Title: jQuery UI Tabs and wp_enqueue_script
Last modified: August 19, 2016

---

# jQuery UI Tabs and wp_enqueue_script

 *  Resolved [Drew Baker](https://wordpress.org/support/users/dbaker/)
 * (@dbaker)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/jquery-ui-tabs-and-wp_enqueue_script/)
 * I’m trying to use some jQuery Tabs in my sidebar [as per this website](http://docs.jquery.com/UI/Tabs).
 * If I call the jQuery script in my header.php like this first example it works
   fine:
 *     ```
       <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
   
       <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
       <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
       <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
       <script type="text/javascript">
       $(document).ready(function(){
       $("#tabs").tabs();
       });
       </script>
       <?php wp_head(); ?>
       ```
   
 * But if I call it like this (which is the supposed proper way) then it doesn’t
   work. The .js files seem to get loaded into the head, but the tabbed content 
   just displays inline. Is there something different between the WP jQuery files
   and those from jQuery’s site?
 *     ```
       <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
   
       <?php
       	wp_enqueue_script('jquery');
       	wp_enqueue_script('jquery-ui-core');
       	wp_enqueue_script('jquery-ui-tabs');
        ?>
       <script type="text/javascript">
       $(document).ready(function(){
       $("#tabs").tabs();
       });
       </script>
       <?php wp_head(); ?>
       ```
   
 * If anyone is curious to the HTML that goes with this, here it is:
 *     ```
       <div id="tabs">
           <ul>
               <li><a href="#fragment-1"><span>Shoutbox</span></a></li>
               <li><a href="#fragment-2"><span>Latest Comments</span></a></li>
               <li><a href="#fragment-3"><span>Poll Jam</span></a></li>
           </ul>
           <div id="fragment-1">
               Shoutbox goes here.
               <div>If you can see this it works with DIVS</div>
           </div>
           <div id="fragment-2">
               Latest Comments go here.
           </div>
           <div id="fragment-3">
               Polls Go here.
           </div>
       </div>
       ```
   
 * Thanks for the help!

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

 *  Thread Starter [Drew Baker](https://wordpress.org/support/users/dbaker/)
 * (@dbaker)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/jquery-ui-tabs-and-wp_enqueue_script/#post-1275595)
 * Bumping because I still can’t work this out.
 *  [Aaron Jorbin](https://wordpress.org/support/users/jorbin/)
 * (@jorbin)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/jquery-ui-tabs-and-wp_enqueue_script/#post-1275599)
 * The version of jquery that WordPress calls doesn’t automatticly use $ for jquery.
   If you replace
 * `$(document).ready(function(){`
 * with
 * `jQuery(document).ready(function($){`
 * your script should function as expected
 *  Thread Starter [Drew Baker](https://wordpress.org/support/users/dbaker/)
 * (@dbaker)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/jquery-ui-tabs-and-wp_enqueue_script/#post-1275615)
 * Hey Jorbin,
    Thanks for this. Although I still get issues with it. If i put this
   code in:
 *     ```
       <?php
       	wp_enqueue_script('jquery','','','',true);
       	wp_enqueue_script('jquery-ui-core','','','',true);
       	wp_enqueue_script('jquery-ui-tabs','','','',true);
        ?>
   
       <script type="text/javascript">
       jQuery(document).ready(function($){
       $(".tabs").tabs();
       });
       </script>
       ```
   
 * The code scripts get loaded in my BODY. I think it’s because of the Event calender
   3 plugin I have, as they scripts are loaded right above that plugin. But I though
   the last ‘true’ attribute forced the scripts into the header?
 *  Thread Starter [Drew Baker](https://wordpress.org/support/users/dbaker/)
 * (@dbaker)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/jquery-ui-tabs-and-wp_enqueue_script/#post-1275618)
 * Working!!!
 * It would only work if I do this:
 *     ```
       <?php wp_enqueue_script('jquery'); ?>
       <?php wp_enqueue_script('jquery-ui-core'); ?>
       <?php wp_enqueue_script('jquery-ui-tabs'); ?>
       <?php wp_head(); ?>
       <script type="text/javascript">
       jQuery(document).ready(function($){
       $(".tabs").tabs();
       });
       </script>
       </head>
       ```
   
 * This is because <?php wp_head(); ?> actually calls the script within it. So the
   jQuery(document).ready(function($){ ends up being called before the script is
   loaded.

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

The topic ‘jQuery UI Tabs and wp_enqueue_script’ is closed to new replies.

## Tags

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 2 participants
 * Last reply from: [Drew Baker](https://wordpress.org/support/users/dbaker/)
 * Last activity: [16 years, 6 months ago](https://wordpress.org/support/topic/jquery-ui-tabs-and-wp_enqueue_script/#post-1275618)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics