Wordpress Shortcodes (Possibly Nested & Input)

I’ve been battling with this problem in WordPress particularly with using one shortcode which has a nested shortcode inside it, which works like a charm, however I wanted to make it a simple shortcode which in turn then would be easier for someone to use.

You can see the code here

function pb_timeline($attr,$content){
        $content = wpautop(trim($content));
        return '<ul class="timeline">'.do_shortcode($content).'</ul>';
}
add_shortcode("timeline","pb_timeline");

function pb_tlsection($attr,$content=null){
          return '<li><div class="year">YYYY</div><div class="dot"></div><div class="box"><p>Description To Go Here.</p></div></li>';
}
add_shortcode("timeline_section","pb_tlsection");
?>

The HTML output for the shortcode is basically this

<ul class="timeline">
   <li>
      <div class="year">YYYY</div>
      <div class="dot"></div>
      <div class="box">Description</div>
   </li>
</ul>

What I would like to do is to use a WordPress shortcode like

[timeline_section year="2013" description="Hello"]

The Year and Description could be filled out by the content editor for example. I have the shortcode working for this, but I have no idea or anywhere to start regarding inputting the data from the shortcode tag to display exactly what it should be.

Edit: Adding the solution to this for reference to whoever comes across the same problem themselves. Improving on Cyrille’s answer which has set me on the right path. I have found out that the following is more effective as it is…

function pb_tlsection($atts){
        
        extract( shortcode_atts( array(
            'year' => 'YYYY',
            'desc' => 'Description',
            ), $atts, 'timeline_section' ) );
            
          return '<li><div class="year">' . $year . '</div><div class="dot"></div><div class="box"><p>' . $desc . '</p></div></li>';
}
add_shortcode("timeline_section","pb_tlsection");

Answer

You should have a look at the following link: http://codex.wordpress.org/Shortcode_API Particularly at the extract function.

You could do for instance:

 function pb_tlsection($attr,$content=null){
        extract( shortcode_atts( array(
            'year' => '2013',
            'description' => 'Hellow',
        ), $atts ) );

        return '<li><div class="year">'.$year.'</div><div class="dot"></div><div class="box"><p>'.$description.'</p></div></li>';

}

WordPress Shortcodes (Possibly Nested & Input)

Advertisement

Answer