Wordpress Shortcode

Question

I want to create a multiple shortcodes something likes this.

[tabs]

[tab title="1"]
//content goes here
[/tab]

[tab title="2"]
//content2 goes here
[/tab]

[tab title="3"]
//content4 goes here
[/tab]

[/tabs]

expected output :

<ul>
    <li id="tab1">[tab title="1" goes here]</li>
    <li id="tab2">[tab title="2" goes here]</li>
    <li id="tab3">[tab title="3" goes here]</li>
</ul>

<ul id="tab1">
    <li>Content1</li>
</ul>

<ul id="tab2">
    <li>Content2</li>
</ul>

<ul id="tab3">
    <li>Content3</li>
</ul>

How to do that in WordPress?

Answer 1

First create "tabs" shortcode

function tabs_shortcode( $atts, $content ) {
    $atts = shortcode_atts( array(      
            'id' => ''        
            ), $atts );

extract ($atts); // gives you the ability to use array keys as variables

    return '<ul id="'. $id.'">'. do_shortcode( $content ) .'</ul>';

}
add_shortcode( 'tabs', 'tabs_shortcode' );

Now create "tab" shortcode

function tab_shortcode( $atts, $content ) {
   $atts = shortcode_atts( array(       
           'id' => ''        
           ), $atts );

extract ($atts); // gives you the ability to use array keys as variables

    return '<li id="'. $id.'">'. do_shortcode( $content ) .'</li>';

}
add_shortcode( 'tab', 'tab_shortcode' );

Use it like this

[tabs id="tab"]
   [tab id="tab1"] lorem ipsum dolor [/tab]
   [tab id="tab2"] lorem ipsum dolor [/tab]
   [tab id="tab3"] lorem ipsum dolor [/tab]
[/tab]

Answer 2

add_shortcode('external', 'externalFunction');
function externalFunction( $atts,$content = null){
     echo do_shortcode('[internal]'.$content.'[/internal]');
}

add_shortcode('internal','internalFunction');
function internalFunction($atts, $content=null)
{
  extract(shortcode_atts(
      array(
            "title" => ''
        ), $atts));  
      /* do your stuffs here */
}