Title: Loop through shortcode attribute array?
Last modified: August 19, 2016

---

# Loop through shortcode attribute array?

 *  [anemo](https://wordpress.org/support/users/anemo/)
 * (@anemo)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/loop-through-shortcode-attribute-array/)
 * Hey guys!
 * I’m trying to create tabs using WordPress shortcodes and [jQuery UI Tabs](http://docs.jquery.com/UI/Tabs#demo).
   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?

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [thewebist](https://wordpress.org/support/users/thewebist/)
 * (@thewebist)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/loop-through-shortcode-attribute-array/#post-1745860)
 * [@anemo](https://wordpress.org/support/users/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](http://flowplayer.org/tools/demos/tabs/index.html).
 * 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](http://wp.me/pbhpi-4X8).
 * Hope this helps you out. Cheers!
 *  Thread Starter [anemo](https://wordpress.org/support/users/anemo/)
 * (@anemo)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/loop-through-shortcode-attribute-array/#post-1745862)
 * 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](https://wordpress.org/support/users/anemo/)
 * (@anemo)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/loop-through-shortcode-attribute-array/#post-1745885)
 * [@thewebist](https://wordpress.org/support/users/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! 🙂
 *  [Gwyneth Llewelyn](https://wordpress.org/support/users/gwynethllewelyn/)
 * (@gwynethllewelyn)
 * [15 years ago](https://wordpress.org/support/topic/loop-through-shortcode-attribute-array/#post-1745966)
 * 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 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Loop through shortcode attribute array?’ is closed to new replies.

## Tags

 * [jquery](https://wordpress.org/support/topic-tag/jquery/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 4 replies
 * 3 participants
 * Last reply from: [Gwyneth Llewelyn](https://wordpress.org/support/users/gwynethllewelyn/)
 * Last activity: [15 years ago](https://wordpress.org/support/topic/loop-through-shortcode-attribute-array/#post-1745966)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics