Tabs shortcode – WordPress

0 Views
<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 WordPress without JavaScript, but PHP is not my strong point. I really need help with this.

Post Views: 0

Related posts

Leave a Reply

4 comments

  1. 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');

  2. Here is an another working solution using class-based approach. It’s a nice alternative to using global variables. See this link for an explanation on how it works.

    <?php 

/**
* Tabs Short Code
*/
if ( ! class_exists( 'TabsClass' ) ) {
class TabsClass {

    protected $_tabs_divs;

    public function __construct($tabs_divs = '') {
        $this->_tabs_divs = $tabs_divs;
        add_shortcode( 'tabs', array( $this, 'tabs_wrap') );
        add_shortcode( 'tab', array( $this,'tab_block') );
    }

    function tabs_wrap ( $args, $content = null ) {
        $output = '<div class="tabs"><ul>' . do_shortcode($content) . '</ul>';
        $output .= $this->_tabs_divs . '</div>';
       return $output;
    }

    function tab_block( $args, $content = null ) {
        extract(shortcode_atts(array(  
            'id' => '',
            'title' => '', 
        ), $args));

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

        $this->_tabs_divs.= '<div id="'.$id.'">'.$content.'</div>';

        return $output;
    }

}
new TabsClass;
}