So I am starting with shortcodes and this is my first time trying to make one, I am using it to make css/js tabs for information and basing off code I got from themeforest..

So I will do the best to explain what I have and what I am trying to do.

HERE is what my short code looks like

[tab title="This is tab 1 Title"]Tab 1 Content [/tab]
[tab title="This is tab 2 Title"]Tab 2 Content [/tab]
[tab title="This is tab 3 Title"]Tab 3 Content [/tab]
[tab title="This is tab 4 Title"]Tab 4 Content [/tab]

HERE is the code I am using to make the tabs

 /* -----------------------------------------------------------------
----------------------------------------------------------------- */

 // Set up Scripts For Tabs 
 function add_tabs_scripts_to_head(){
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/zozoTabs.js' );
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'custom-script' );

 // Set up Style For Tabs 
 function add_tabs_style_to_head(){
    wp_register_style( 'custom-style', get_template_directory_uri() . '/css/zozoTabs.css');
    // For either a plugin or a theme, you can then enqueue the style:
    wp_enqueue_style( 'custom-style' );

add_action('template_redirect', 'add_scripts'); 

        'style' => false,
        'orientation' => false,
    ), $atts));

function add_scripts() { 
   global $wp_query; 
   if ( is_singular() ) { 
      $post = $wp_query->get_queried_object(); 
      if ( false !== strpos($post->post_content, '[tabs') ) { 
      // Adding the style JUST when needed
      add_action( 'wp_enqueue_scripts', 'add_tabs_style_to_head' );
      add_action( 'wp_enqueue_scripts', 'add_tabs_scripts_to_head' );
add_shortcode('tabs', 'ts_tab');
    function ts_tab($atts, $content = null, $code) {
    if (!preg_match_all("/(.?)\[(tab)\b(.*?)(?:(\/))?\](?:(.+?)\[\/tab\])?(.?)/s", $content, $count)) {
        return do_shortcode($content);

    } else {
        for($i = 0; $i < count($count[0]); $i++) {
            $count[3][$i] = shortcode_parse_atts($count[3][$i]);
$output = '     
        $(document).ready(function () {
                defaultTab: "tab1",
                rounded: false,

    <div id="basic-usage">
    <div id="tabbed-nav"> 
    for($i = 0; $i < count($count[0]); $i++) {
        $output .= '<li><a>' . $count[3][$i]['title'] . '</a></li>';
    $output .= '</ul>';

    $output .= '<div>';
    for($i = 0; $i < count($count[0]); $i++) {
        $output .= '<div>' . do_shortcode(trim($count[5][$i])) . '</div>';
    $output .= '</div>';
    return '<div class="tabcontainer">' . $output . '</div></div></div>

And a pastebin of the same: http://pastebin.com/wZ6VRPwm

So all of that works just fine, but what I am trying to do is make it so I can make my short code start out like this

[tabs orientation="vertical"]

and it will add orientation: "vertical",

to line 52 of the pastebin to make it look like this

   $(document).ready(function () {
      defaultTab: "tab1",
      rounded: false,
      orientation: "vertical",

So that is the problem, and I have tried about all I can think of and search but an getting no where.

  • Please edit your code into this question. – s_ha_dum Jul 18 '13 at 21:04
  • @s_ha_dum It's pretty long, so it isn't a good idea to put it in here, I guess... – Krzysiek Dróżdż Jul 18 '13 at 21:05
  • Gosh, it's another rubbish code from themforest. Why can't they learn WordPress and do it the right way... Your code is wrong in so many ways... Don't enqueue scripts on theme_redirect. Don't use id as tabs identifier (unless you are sure that you'll use it only once on page). I also would register 2 shortcodes (1 for tabs and one for single tab) - it would be much more clear, I guess... – Krzysiek Dróżdż Jul 18 '13 at 21:06
  • I can add the coed, but I was thinking its a little long and did not want to fill up the page with it. – Chaos67731 Jul 18 '13 at 21:07
  • 1
    @KrzysiekDróżdż -- Are those links intentionally identical, or did you miss a copy step? – Pat J Jul 18 '13 at 21:16

First of all... It's a really poor quality code, I guess.

You assume that there will be only one tabs widget on page (it's recognized by HTML id param, so placing 2 widgets on same page would generate invalid HTML code).

You also implement only one shortcode, which parses it's content. But I don't think you really need this.


The nicer version would be to use nested shortcodes:


So you should register tabs and tab shortcodes. WordPress will parse them for you ;) More on this here: http://codex.wordpress.org/Shortcode_API#Nested_Shortcodes

To do so, just call do_shortcodes in shortcodes callbacks.


Put your inline JS in seperate file. Enqueue it with something like this:

function my_scripts_method() {
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Sending params to JS

Instead of outputting different JS code for different params, make this JS smart. So if you want different options passed to zozoTabs, make JS prepare them based on class or data attribute.

So your JS can look like this:

$(document).ready(function () {
    $(".tabbed-nav")each(function() {
            defaultTab: "tab1",
            rounded: ( $(this).data('zozo-rounded') ) ? true : false
  • But is there a way to do it that way I was looking for? Thanks for the answer, but its sad that a lot of that is still above me. – Chaos67731 Jul 19 '13 at 3:50
  • I've just showed you the way to do it. What is the way "you were looking for"? Apart from errors in your code (using wrong hooks and inlining a lot of JS which will break your page if you put more than 1 tabs widget on page), that's it. – Krzysiek Dróżdż Jul 19 '13 at 6:39
  • Just to make sure, where I have (title="This is tab 1 Title") I worded that wrong and that is the clickable link to get to the tab. – Chaos67731 Jul 19 '13 at 17:13
  • Just to make sure, where I have (title="This is tab 1 Title") I worded that wrong and that is the clickable link to get to the tab. And I know it will break if more than one is added, well it will break if more than one is added I was hopping to keep using the code given so that I can hook in to their themes and layouts. – Chaos67731 Jul 19 '13 at 17:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.