@anemo – I found this thread while I was trying to solve the same problem. However, rather than using jQuery UI Tabs, I’m using the jQuery Tools – Tabs.
Despite the fact that we’re using different libraries with slightly different HTML/JS/CSS setups, the solution on the WordPress shortcode side of things should help you too. Just change the output to match your needs.
Example shortcode setup:
[tabgroup]
[tab title="Tab 1"]Tab 1 content goes here.[/tab]
[tab title="Tab 2"]Tab 2 content goes here.[/tab]
[tab title="Tab 3"]Tab 3 content goes here.[/tab]
[/tabgroup]
The Shortcode functions:
/*
* jQuery Tools - Tabs shortcode
*/
add_shortcode( 'tabgroup', 'etdc_tab_group' );
function etdc_tab_group( $atts, $content ){
$GLOBALS['tab_count'] = 0;
do_shortcode( $content );
if( is_array( $GLOBALS['tabs'] ) ){
foreach( $GLOBALS['tabs'] as $tab ){
$tabs[] = '<li><a class="" href="#">'.$tab['title'].'</a></li>';
$panes[] = '<div class="pane"><h3>'.$tab['title'].'</h3>'.$tab['content'].'</div>';
}
$return = "\n".'<!-- the tabs --><ul class="tabs">'.implode( "\n", $tabs ).'</ul>'."\n".'<!-- tab "panes" --><div class="panes">'.implode( "\n", $panes ).'</div>'."\n";
}
return $return;
}
add_shortcode( 'tab', 'etdc_tab' );
function etdc_tab( $atts, $content ){
extract(shortcode_atts(array(
'title' => 'Tab %d'
), $atts));
$x = $GLOBALS['tab_count'];
$GLOBALS['tabs'][$x] = array( 'title' => sprintf( $title, $GLOBALS['tab_count'] ), 'content' => $content );
$GLOBALS['tab_count']++;
}
As you can see, the key in my solution is to store the data for the [tab] shortcode in a global variable. Then, once the recursion is finished there, my [tabgroup] shortcode function generates and returns the necessary HTML by stepping through the global tabgroup array.
For slightly more details, you can see this post on my blog.
Hope this helps you out. Cheers!
Thread Starter
anemo
(@anemo)
Ah, I need to try that out! Right now I’m experimenting with “retro-adding” unique DIV id:s and links by using jQuery:
<div class="ui-tabs">
<ul>
<li><a>This is the link</a></li>
<li><a>This is the link</a></li>
<li><a>This is the link</a></li>
</ul>
<div class="tabcontent">This is the content</div>
<div class="tabcontent">This is the content</div>
<div class="tabcontent">This is the content</div>
</div>
<script type="text/javascript">
jQuery('.ui-tabs ul li a').attr('href', function() {
return '#tab-' + jQuery(this).index();
});
</script>
<script type="text/javascript">
jQuery('.ui-tabs div.tabcontent').attr('id', function() {
return 'tab-' + jQuery(this).index();
});
</script>
It works for setting the ID of the DIV:s but I haven’t managed to get the unique link (href=”#-number“) to work yet for some strange reason.
EDIT: updated the code
Thread Starter
anemo
(@anemo)
@thewebist
Hey!
I was a bit inspired by your use of global variables and came up with this:
// Tabs Main [tabs tab1="xxxxx" tab2="xxxxx"][/tabs]
function tabs_main($atts, $content = null) {
extract(shortcode_atts(array(
), $atts));
global $tab_counter_2;
$tab_counter_1 = 1;
$tab_counter_2 = 1;
$output .= '<div class="ui-tabs">';
$output .= '<ul>';
foreach ($atts as $tab) {
$output .= '<li><a href="#tab-' . $tab_counter_1 . '">' .$tab. '</a></li>';
$tab_counter_1++;
}
$output .= '</ul>' . do_shortcode($content);
$output .='</div>';
return $output;
unset($tab_counter_2);
}
add_shortcode('tabs', 'tabs_main');
// Tab Elements [tab][/tab]
function tab_elements($atts, $content = null) {
extract(shortcode_atts(array(
), $atts));
global $tab_counter_2;
$output .= '<div id="tab-' . $tab_counter_2 . '">' . do_shortcode($content) . '</div>';
$tab_counter_2++;
return $output;
}
add_shortcode('tab', 'tab_elements');
This code works but the only “problem” is that the link and id of the divs are named by a counter (tab-1, tab-2 and so on) and not the actual title. I guess that the naming can be solved with a global array.
BTW, I’m using this syntax:
[tabs tab1="alfa" tab2="beta" tab3="gamma"]
[tab]Content for alfa[/tab]
[tab]Content for alfa[/tab]
[tab]Content for alfa[/tab]
[/tabs]
But I like your idea of using [tab title=”xxx”] to be honest. I’m going to try your method soon! 🙂
Awesome tutorial! It inspired me to create a plugin to add shortcodes for imagemaps; I was sort of stumped about how to create a parser for that. Your examples certainly were a fantastic resource! Thank you very much 🙂
