Take the 2-minute tour ×
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">
 <ul>
  <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>
 </ul>
 <div class="panel-container">
  <div id="side-tab1">
   <h2>Configurations</h2>
   <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>
  <div id="side-tab2">
   <h2>Heading 2</h2>
   <p>Stuff from the second tab.</p>
  </div>
  <div id="side-tab3">
   <h2>Heading 3</h2>
   <p>More stuff from the last tab.</p>
  </div>
 </div>
</div>

http://codex.wordpress.org/Shortcode_API

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 !

Edit:

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

Answer

$tabs_divs = '';

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

    $tabs_divs = '';

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

    return $output;  
}  


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

    extract(shortcode_atts(array(  
        'id' => '',
        'title' => '', 
    ), $atts));  

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

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

    $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

 
discard

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

Browse other questions tagged or ask your own question.