WordPress.org

1. anemo
   Member
   Posted 1 year ago #

   Hey guys!

   I'm trying to create tabs using WordPress shortcodes and jQuery UI Tabs. I managed to get the tabs working but the code my shortcode functions output is in the wrong order. This is how it looks (functions.php):

   // Tabs Main [tabs][/tabs]
   function tabs_main($atts, $content = null) { 
   
   return '<div class="ui-tabs"><ul>' . do_shortcode($content) . '</ul></div>';
   
   }
   
   add_shortcode('tabs', 'tabs_main');
   
   // Tab Elements [tab id="name"][/tab]
   function tab_elements($atts, $content = null) {
   	extract(shortcode_atts(array(
   		'id' => 'Untitled Tab!'
   	), $atts));
   
   	return '<li><a href="#tab-' . $id . '"><span>' . $id . '</span></a></li>
   	<div id="tab-' . $id . '">' . $content . '</div>';
   }
   add_shortcode('tab', 'tab_elements');

   Now it outputs like:
   

   <div class="ui-tabs">
   <ul>
   <li><a href="#tab-1"><span>1</span></a></li>
   <div id="tab-1"> Content goes here </div>
   <li><a href="#tab-2"><span>2</span></a></li>
   <div id="tab-2"> Content goes here </div>
   </ul>
   </div>

   But it's supposed to look like this:
   

   <div class="ui-tabs">
   <ul>
   <li><a href="#tab-1"><span>1</span></a></li>
   <li><a href="#tab-2"><span>2</span></a></li>
   </ul>
   <div id="tab-1"> Content goes here </div>
   <div id="tab-2"> Content goes here </div>
   </div>

   So I need to create two loops; the first one print out the list data (UL and LI) and the second one prints out the containers (DIV).

   How do I do this?

2. TheWebist
   Member
   Posted 1 year ago #

   @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!

3. anemo
   Member
   Posted 1 year ago #

   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

4. anemo
   Member
   Posted 1 year ago #

   @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! :)

5. Gwyneth Llewelyn
   Member
   Posted 1 year ago #

   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 :)

Topic Closed

This topic has been closed to new replies.