How do I get jQuery to run in Wordpress?

Hey Folks,

The correct way to add JS is via the functions.php file. In your functions.php you would have something like this:

// Load the Theme JS
function theme_js() {
    wp_register_script( 'yourscript', get_template_directory_uri() . '/js/yourscript.js', array('jquery', 'jquery-ui-core'), '', true );
}
add_action( 'wp_enqueue_scripts', 'theme_js' );

What this does is tell WordPress that you want to include a custom JS file and make it dependent on jQuery and jQuery UI, which both ship with WordPress.

Then in your yourscript.js you would open with this:

jQuery(document).ready(function($) {

    $('selector').whatever();

})

The reason the jQuery. is needed to start is because several JS libraries use the $ so WordPress doesn't know what you're referring to. However, using function($) lets you use the $ within your (document).ready()

Hope this helps!

Try using wp_enqueue_script instead of wp_register when loading your JS

Usually WordPress can include the latest version of jQuery for you. What I see most people do is include any jQuery files they need as links in their footer.php file.

Wow that was fast! :)

I've tried just using the included jQuery John Locke. I've also tried including the main libraries in one place and then my script in the footer. Nothing seems to be working. I also need jQuery UI which I don't think WordPress comes with does it?

If you need jQuery UI, you'll have to include it specifically.

So, you say that you've built this as just a regular HTML page outside of WordPress and it works?

Outside of WordPress the slider works as intended. Put it in WordPress and the HTML and CSS work fine but I'm struggling with where to include the 3 relevant js files. There's the main jQuery one, the UI one and my script file for animating the slider.

I've done all the options I can find.

I can think of a few reasons this might not be working as planned. Check in your generated code if your slider.js file shows above your jQuery/jQuery UI files. This should be easy to correct, as all files dependent on other libraries should be below them.

Check if there are more than one jQuery file in your generated code. Wordpress has its own jQuery and jQuery UI files, so they may create a conflict. If you plan to use the Google API files, you'll have to include the function wp_deregister_script in your functions.php file. A code snippet for this can be found at http://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme

If you are using Wordpress' jQuery and jQuery UI files, these run in no conflict mode. You have to wrap your scripts differently when in no conflict mode. There are several tutorials on how to do this, but I recommend you study the wp_enqueue_script function in Wordpress' own codex.

And I believe from the from previous answers that you already have the wp_footer function before the closing body tag, but doesn't hurt to bring it up again.

Harry Pujols , I think you may be onto something there with no-conflict. I've written everything in my script as per usual and I don't think I've done anything to change it back to using $ instead of jquery.

Probably something stupid like that that's causing me all the problems, usually is.

I'm putting scripts either at the bottom of the template if it's just for that template or in the footer.php.

Hi all,

I'm stuck on the exact same thing. I followed this tutorial: http://wp.tutsplus.com/tutorials/theme-development/adding-a-responsive-jquery-slider-to-your-wordpress-theme/ but the slider doesn't work. All of the files appear to have been loaded correctly into the header, and the images are loaded into the body but the slideshow doesn't appear.

Out of curiosity, I added jquery to directly into the header template via Google’s CDN. That made the slider work but then broke the wp-admin (which I expected), so then I tried deregistering the included jquery library and registered jquery via Google’s CDN and that didn’t work either.

Zac Gordon, I tried your instructions too - nothing happened again.

I don’t know what to try next - Even the Wooslider plugin wouldn't work for me!

Could you do two things? Paste up the code from your functions.php file and a screenshot of where the slideshow files are stored in your theme folder.

Thanks!

Here's my functions file: http://pastebin.com/xqJsqTZq

And a screen shot of my js folder: http://bit.ly/10Lpgbz

I discovered that I needed to use absolute links rather then relative. I think that's what I did. Anyway, I got it working. I even got wp_enqueue_script('jquery') working but jqueryui won't work in the same way.

However, I was doing all this before Zac's new videos came out so I'm looking forward to going through them and understanding it fully.

I got the slider to work... FINALLY! Here's what I did for jQuery FlexSlider v2.1

In the functions.php I wrote:

function flexslider_functions() {
wp_register_script( 'jquery.flexslider-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery.flexslider-min' );
}
add_action( 'wp_enqueue_scripts', 'flexslider_functions' );

Then, at the the top of the flexslider.js file I wrote:

jQuery(document).ready(function($) {
 $('.flexslider').flexslider({touch: false, controlNav: true, animation: "fade", slideshowSpeed: 10*1000 });
})