Sign up ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
<div id="tab-side-container">
  <li><a href="#side-tab1">Tab 1</a></li>
  <li><a href="#side-tab2">The Second Tab</a></li>
  <li><a href="#side-tab3">Tab C</a></li>
 <div class="panel-container">
  <div id="side-tab1">
   <p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
  <div id="side-tab2">
   <h2>Heading 2</h2>
   <p>Stuff from the second tab.</p>
  <div id="side-tab3">
   <h2>Heading 3</h2>
   <p>More stuff from the last tab.</p>

I'm trying to set a shortcode for tabs in wrodpress without js but php is not my strong point. I really need help with this.

Thanks in advance !


Ok i've found helpful example. I decided to share with it.


$tabs_divs = '';

function tabs_group($atts, $content = null ) {
    global $tabs_divs;

    $tabs_divs = '';

    $output = '<div id="tab-side-container"><ul';
    $output.= '<div class="panel-container">'.$tabs_divs.'</div>';

    return $output;  

function tab($atts, $content = null) {  
    global $tabs_divs;

        'id' => '',
        'title' => '', 
    ), $atts));  

        $id = 'side-tab'.rand(100,999);

    $output = '
            <a href="#'.$id.'">'.$title.'</a>

    $tabs_divs.= '<div id="'.$id.'">'.$content.'</div>';

    return $output;

add_shortcode('tabs', 'tabs_group');
add_shortcode('tab', 'tab');
share|improve this question
Hi, there's an answer box just bellow ;) – brasofilo Sep 25 '13 at 10:55
need to wait 8 hours - less than 10 rep – user2587741 Sep 25 '13 at 11:22

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.