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");
Advertisement
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>';
}