CODEWITHSUNDEEP
wordpressjquery-ui
Buddhi
Buddhi

Reputation: 1

jQuery UI tabs not working with Wordpress

This theme I found seems to be using jQuery UI tabs but they're not working...

header.php has:

<link type="text/css" href="<?php bloginfo('template_url'); ?>/css/ui-lightness/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> 

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-ui-1.8.4.custom.min.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.2.min.js"></script>

according to the theme I'm using, the tabs are in sidebar-1.php, so I have this code:

<script type="text/javascript">
    $(function(){
        $('#tabs').tabs();
    });
</script>

<div class="tab">
    <ul>
        <li class="active"><a href="#tabs-1">Welfare Services</a></li>
        <li><a href="#tabs-2">Education Services</a></li>
        <li><a href="#tabs-3">Social Enterprise</a></li>
    </ul>
    <div id="tabs-1">Tab 1 content</div>
    <div id="tabs-2">Tab 2 content</div>
    <div id="tabs-3">Tab 3 content</div>
</div>

the site at www.wickedflava.com/ps the tabs are just below the Flash header (Information Technology etc) but they don't work for some reason. any help would be appreciated!

Upvotes: 0

Views: 6608

Answers (3)

usama sulaiman
usama sulaiman

Reputation: 2021

- If you want to put your js and css tabs code inside your template so you add it to functions.php :

function my_scripts_method() {
    if ( !is_admin() ) {
        wp_enqueue_script('jquery-ui-tabs');
        wp_enqueue_script('custom-script',get_template_directory_uri() . '/add-tabs/js/tabs.js',array('jquery'));
    }
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

Note: I believe that you can use

wp_enqueue_script('your_custom_script1',get_template_directory_uri() . '/js/tabs.js', __FILE__));

instead of

wp_enqueue_script('your_custom_script1',get_template_directory_uri() . '/js/tabs.js',array('jquery'));

- If you are using a plugin you can do like so (I added extra example of adding many js files and stylesheets)

function tabs_scripts_method() {
    if ( !is_admin() ) {
        wp_enqueue_script('jquery-ui-tabs');

        wp_register_script('your_custom_script1',plugins_url('js/tabs.js', __FILE__));
        wp_enqueue_script('your_custom_script1');

        wp_register_script('your_custom_script2',plugins_url('js/tabs.js', __FILE__));
        wp_enqueue_script('your_custom_script2');

        wp_register_style('your_custom_stylesheet1', plugins_url('css/jquery-ui-1.8.23.custom.css', __FILE__));
          wp_enqueue_style('your_custom_stylesheet1');
    }
}
add_action('wp_enqueue_scripts', 'tabs_scripts_method');

Notes:

1- make sure that wp_enqueue_script('jquery-ui-tabs'); is before your custom scripts because it sometimes make conflict if you add it below the custom script

2- replace js/tabs.js with your_javascript_folder/your_javascript_file or jquery file

3- replace css/jquery-ui-1.8.23.custom.css with stylesheet_folder/your_tabs_stylesheet

4- because you are using the function plugins_url('....', __FILE__)) so you don't need to write the name of the plugin folder because you are calling the file from inside that plugin folder. Also you can use other way like so: plugins_url().'your_plugin_folder_name/your_javascript_folder/your_javascript_file';

for using it in the sidebar its recommended to use the plugin one just you need to add one line of code in functions.php

add_filter('widget_text', 'do_shortcode');

this will help you to use shortcode with any text widget area (if you make a shortcode) this link will guide you how to create shortcodes wordpress.org shortcode

Upvotes: 1

markratledge
markratledge

Reputation: 17561

Use Firebug or Safari Web Dev to look at the javascript errors you're getting. Looks like you're loading jQuery UI before the main jQuery library.

And with Wordpress, you need to correctly enqueue scripts rather than simply link them in header.php, esp. for the jQuery libraries and other scripts that depend on jQuery.

See http://codex.wordpress.org/Function_Reference/wp_enqueue_script

As an example from that doc, this goes in functions.php of your theme:

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_template_directory_uri() . '/js/custom_script.js',
        array('jquery')
    );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

Upvotes: 1

John P Bloch
John P Bloch

Reputation: 4581

You're loading tabs and UI before jQuery. Just add this line of PHP any time before wp_head():

wp_enqueue_script( 'jquery-ui-tabs' );

That will take care of all the dependencies and make sure it all loads in the correct order.

EDIT:

Also, remove those script tags. Leave the stylesheet, though.

Upvotes: 3

Related Questions