Title: jQuery/jQuery UI
Last modified: August 19, 2016

---

# jQuery/jQuery UI

 *  [jwoj](https://wordpress.org/support/users/jwoj/)
 * (@jwoj)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/)
 * Hi,
    is there anywhere a in-depth tutorial or documentation on how to include
   the jQuery and jQuery UI libraries? I have been trying since yesterday with no
   result. Nothing hides, nothing works, and the error code is “jQuery(‘#tabs’).
   tabs is not a function” due to the not found libraries. I have read throug serveral
   tutorials and documentations and found out that the jQuery libraries apparently
   should be included in the footer. Can anyone help me out here. That would really
   make me happy.

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

 *  [Dave Redfern](https://wordpress.org/support/users/daveredfern/)
 * (@daveredfern)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226532)
 * you need to attach both jquery and the jquery-ui js files to your header or just
   above the close of the body tag.
 * use something like this to attach the files:-
 *     ```
       <script type='text/javascript' src='jquery-file-location.js'></script>
       ```
   
 * you then need to write an onload such as this. I tend to include this in a third
   js file:-
 *     ```
       $(document).ready(function() {
       // do stuff
       });
       ```
   
 * then add your tabs code to the //do stuff part.
 * the jquery ui website probably has the best documentation and tutorials you’ll
   find on the web for it at [http://jqueryui.com/demos/](http://jqueryui.com/demos/).
 * hope this helps.
 * dave.
 *  Thread Starter [jwoj](https://wordpress.org/support/users/jwoj/)
 * (@jwoj)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226544)
 * Hi dave,
 * thank you very much for your fast answer. I have tried including my jquery-script
   in several ways, including the one you suggested. But still nothing happens. 
   I have implemented the code as suggested in the jQuery UI documentation and with
   the nettuts-Tutorial on how to implement a tabbed UI. The problem is, absolutely
   nothing happens. It’s like, no matter how hard i try to include that stuff, it
   is totally ignored :-O.
 *  [Dave Redfern](https://wordpress.org/support/users/daveredfern/)
 * (@daveredfern)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226549)
 * hello,
 * do you have a link to your site? it sounds like either the files are not loading
   properly or the code is on being loaded on page load but could be a dozen other
   things.
 * dave.
 *  [s_ha_dum](https://wordpress.org/support/users/apljdi/)
 * (@apljdi)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226550)
 * Are you using a relative URL for the script source? Relative URLs do not work
   as expected within the WP framework.
 *  Thread Starter [jwoj](https://wordpress.org/support/users/jwoj/)
 * (@jwoj)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226553)
 * [@dave](https://wordpress.org/support/users/dave/):
    Sorry, i forgot to post 
   my Site: [http://books-and-it.de](http://books-and-it.de)
 * [@apljdi](https://wordpress.org/support/users/apljdi/):
    Actually i used the 
   wp_enqueue_script()-function with the handles: jquery, jquery-ui-core and jquery-
   ui-tabs. But i have tried to include with both, relative and absolut paths already,
   too.
 * First i wanted to use my own jquery-ui script which i had downloaded and uploaded
   into my theme. That that either didn’t work. After that i found out that wordpress
   already comes with the needed scripts, so i tried to include those.
 *  [Dave Redfern](https://wordpress.org/support/users/daveredfern/)
 * (@daveredfern)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226555)
 * haven’t looked at your site but you need to be careful with the jquery-ui plugin
   as it comes in many forms. you need to ensure the one you have supports tabs.
   if you go to their download page there are lots of checkboxes. most can be disabled
   but for you tabs definitely needs to be ticked.
 * the download page is at [http://jqueryui.com/download](http://jqueryui.com/download)
 * not sure what the wordpress jquery-ui comes with.
 * dave.
 *  [Dave Redfern](https://wordpress.org/support/users/daveredfern/)
 * (@daveredfern)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226556)
 * sorry for posting twice. but something else to not is your jquery ui is loading
   in the footer. if you have your jQuery(‘#tabs’).tabs loading above it won’t work.
 * make sure that your code is below the library and plugins.
 *  [s_ha_dum](https://wordpress.org/support/users/apljdi/)
 * (@apljdi)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226557)
 * Looks like you are successfully loading four jquery scripts– two of them look
   to be slightly different versions of the jQuery UI core. That could be your problem.
 *  Thread Starter [jwoj](https://wordpress.org/support/users/jwoj/)
 * (@jwoj)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226563)
 * [@dave](https://wordpress.org/support/users/dave/): i only tried once loading
   in the footer. I read up on a few posts about jquery and WordPress 2.8 and found
   out, that it is supposed to be loaded in the footer. So i tried that. Therefore
   i had an extra function included in my functions.php which made sure that the
   jquery-tab-function wouldn’t be loaded until the scripts are loaded. I just forgot
   to take that out again, sorry. But, whatever, once again, it didn’t work :-).
 * [@apljdi](https://wordpress.org/support/users/apljdi/): thanks for your hint.
   I removed the one script. But it won’t work. Some posts i found don’t mention
   anything about where to load the libraries other posts say, they have to be loaded
   in the footer. I don’t understand why i can’t find anything about that in the
   WordPress documentation.
 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226605)
 * You should have the following the in the header file for your theme if you want
   to use jQuery.. (don’t know regarding UI)..
 *     ```
       <?php wp_enqueue_script('jquery');?>
       <?php wp_head(); ?>
       ```
   
 * `<?php wp_head(); ?>` should already be there, you need to make sure the enqueue
   script is placed before wp_head.
 * You also need to rename your functions or use no conflict mode.
 * This is a snippet (so incomplete) from my “working” header file..
 *     ```
       <?php wp_enqueue_script('jquery');?>
       <?php wp_head(); ?>
       <script type="text/javascript">
       //<![CDATA[
       jQuery(document).ready(function() {
   
       	<?php if(is_search()) { ?>
       	jQuery('#toggle_options').css('cursor','pointer')
       	.click(
       		function() {
       			// Toggle the class on the item toggling the hidden content
       			jQuery(this).prev('div').toggleClass('hide');
       			jQuery(this).prev('div').toggleClass('show');
       		}
       	);
       	<?php } ?>
       ```
   
 * Just to give you an idea of what some basic jQuery may look like in the file…
 * I’m using 2.8.4 …
 * NOTE: There is a conflict when loading jQuery tools externally alongside the 
   above though. I don’t use jQuery tools now, but i did have it for something else
   previously and happened to notice the problem, so felt it worth a mention “just
   incase”.
 *  Thread Starter [jwoj](https://wordpress.org/support/users/jwoj/)
 * (@jwoj)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226732)
 * Hi,
    i really appreciate your guy’s help! Thanks a lot!
 * [@t31os_](https://wordpress.org/support/users/t31os_/):
    I have found out now,
   that only jQuery UI is my problem because it is loaded in the footer. Everything
   i do with jQuery works fine.
 * Can someone tell me how (and where) to wrap up the jQuery(‘#tabs’).tabs()-code
   so that it is loaded after the libraries are loaded in the footer and to get 
   it working?
 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226958)
 * You can do the tabs in the header, i use them for some personal projects.
 *     ```
       jQuery(document).ready(function() {
       	jQuery('#tabs').tabs( TAB_ARGS_HERE );
       });
       ```
   
 * Sorry i didn’t reply before, it’s hard to keep track of older threads.
 * The important part is this..
 *     ```
       jQuery(document).ready(function()
       ```
   
 * Which tells the script to wait until the document/page has finished loading (
   or more appropriately, when it’s ready).

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

The topic ‘jQuery/jQuery UI’ is closed to new replies.

## Tags

 * [http://educhalk.org/blog/?p=29](https://wordpress.org/support/topic-tag/httpeduchalk-orgblogp29/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [jQuery UI](https://wordpress.org/support/topic-tag/jquery-ui/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 12 replies
 * 4 participants
 * Last reply from: [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * Last activity: [16 years, 3 months ago](https://wordpress.org/support/topic/jqueryjquery-ui/#post-1226958)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics