Could use some help with Shortcodes

Question

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.

Shortcodes

The nicer version would be to use nested shortcodes:

[tabs]
   [tab]
      content
   [/tab]
[/tabs]

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.

Javascripts

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

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        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() {
        $(this).zozoTabs({
            defaultTab: "tab1",
            rounded: ( $(this).data('zozo-rounded') ) ? true : false
        });
    });
});