jQuery tabs is loaded but not working in WordPress

I am trying to work with jQuery UI tabs in WordPress but I keep getting the “jQuery(“#”).tabs is not a function” error.

I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn’t work. Now I just linking directly to the files and they are loading.

Read More

If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress

Thanks for any help!

Related posts

Leave a Reply

2 comments

  1. I see the following scripts being loaded on your page:

    modernizr-1.6.min.js
    l10n.js
    jquery.js
    galleria.js
    

    and

    <script type="text/javascript"> 
    jQuery(document).ready(function($){
        $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
    });
    </script> 
    

    $.tabs is an extension of jQuery UI, and I don’t see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you’ll see the following two scripts, which I believe are what you’re missing.

    ui.core.js
    ui.tabs.js
    

    Your debugger is alerting you that $.tabs is not a method because it really hasn’t been defined yet.

  2. Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn’t have this module, so perhaps this is also the case with WP.