How to dynamic tab HTML to WP

Welcome to all in this tune. I am going to describe a common featured tab. To dynamic tab need register a custom post and a custom taxonomy without registering this can use wordpress default post and taxonomy. Also need three shortcode function register for this tab, one shortcode register for tab list, another for tab content and last one register for combination those two shortcode for use user friendly . Hopefully within few steps, complete the tune.

In first steps I going to analysis a full HTML tab code.

<div class="light-wrapper">
<div class="container inner">
<div class="row">
<div class="col-sm-12">
<div class="tabs tabs-top left tab-container">
<ul class="etabs">
<li class="tab"><a href="#tab-1">This is</a></li>
<li class="tab"><a href="#tab-2">Tabbed</a></li>
<li class="tab"><a href="#tab-3">Content</a></li>
</ul>
<!-- /.etabs -->
<div class="panel-container">
<div class="tab-block" id="tab-1">
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Donec sed odio dui. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.</p>
<ul class="circled">
<li>Mauris lacinia dui non metus dignissim venenatis.</li>
<li>Etiam elit tellus, condimentum tempor lobortis non.</li>
<li>Aliquam pharetra vestibulum arcu, eget iaculis. </li>
</ul>
</div>
<!-- /.tab-block -->
<div class="tab-block" id="tab-2">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. </p>
</div>
<!-- /.tab-block -->
<div class="tab-block" id="tab-3">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. </p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
</div>
<!-- /.tab-block -->
</div>
<!-- /.panel-container -->
</div>
<!-- /.tabs -->
</div>
<!-- /.col-sm-12 -->
</div>
</div>
<!--/.container -->
</div>

Here tab list HTML:

<ul class="etabs">
 <li class="tab"><a href="#tab-1">This is</a></li>
 <li class="tab"><a href="#tab-2">Tabbed</a></li>
 </ul>

And tab content HTML:

<div class="panel-container">
            <div class="tab-block" id="tab-1">
              <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
              <p>Donec sed odio dui. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.</p>
              <ul class="circled">
                <li>Mauris lacinia dui non metus dignissim venenatis.</li>
                <li>Etiam elit tellus, condimentum tempor lobortis non.</li>
                <li>Aliquam pharetra vestibulum arcu, eget iaculis. </li>
              </ul>
            </div>
            <!-- /.tab-block -->
            <div class="tab-block" id="tab-2">
              <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. </p>
            </div>
            <!-- /.tab-block --> 
          </div>

To register custom post and taxonomy view: how to register custom post & taxonomy Suppose register custom post post_type “tab-items” ans custom taxonomy “tab_cat”.

Now going to dynamic tab list by using shortcode, see the shortcode look like below:

function tab_list_shortcode($atts){
extract( shortcode_atts( array(
'category' => '',
), $atts, 'tablist' ) );

$q = new WP_Query(
array('posts_per_page' => -1, 'post_type' => 'tab-items', 'tab_cat' => $category)
);

$list = '<ul class="etabs">';
while($q->have_posts()) : $q->the_post();

$list .= '

<li class="tab"><a href="#tab-'.get_the_ID().'">'.get_the_title().'</a></li>

';
endwhile;
$list.= '</ul>';
wp_reset_query();
return $list;
}
add_shortcode('tablist', 'tab_list_shortcode');

To dynamic tab content by using shortcode look like this:

function tab_content_shortcode($atts){
extract( shortcode_atts( array(
'category' => '',
), $atts, 'tabcontent' ) );

$q = new WP_Query(
array('posts_per_page' => -1, 'post_type' => 'tab-items', 'tab_cat' => $category)
);

$list = '<div class="panel-container">';
while($q->have_posts()) : $q->the_post();

$list .= '

<div class="tab-block" id="tab-'.get_the_ID().'">
'.get_the_content().'
</div>

';
endwhile;
$list.= '</div>';
wp_reset_query();
return $list;
}
add_shortcode('tabcontent', 'tab_content_shortcode');

If anyone want to use the two shortcode in php file it look like:

<div class="light-wrapper">
 <div class="container inner">
 <div class="row">
 <div class="col-sm-12">
 <div class="tabs tabs-top left tab-container">
 <?php echo do_shortcode('[tablist category=""]');?>
 <!-- /.etabs -->
 <?php echo do_shortcode('[tabcontent category=""]');?>
 <!-- /.panel-container -->
 </div>
 <!-- /.tabs -->
 </div>
 <!-- /.col-sm-12 -->
 </div>
 </div>
 <!--/.container -->
 </div>

This code not to be easy for user, so register another shortcode for user friendly shortcode, that is show below:

function tab_main_shortcode($atts, $content = null) {
extract( shortcode_atts( array(
'category' => '',
), $atts ) );

return'<div class="tabs tabs-top left tab-container">'.do_shortcode('[tablist category="'.$category.'"] [tabcontent category="'.$category.'"]').' </div>';
}
add_shortcode('tab', 'tab_main_shortcode');

Now a use can easily use tab every where by using a single shortcode Tab

Note: Some time you need to be use like this code for active class:

jQuery(document).ready( function ($) {
    
    jQuery("ul.etabs li:first").addClass("active");      });

Tab dynamic