Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


30,548 Points

jQuery isn't working in my wordpress theme

Hi guys,

Probably an easy fix, but I've been stuck on this nonetheless

My jQuery code (Which was working in my static html prototype) is no longer working when I have tried to add it to my wordpress theme

here is some of my jQuery and how I have written it:

    Icon Behaviour
//hide the about icon section
$('.icon p').hide();

//on hover reveal the about blurb of each icon
    //hide icon title
    //reveal icon blurb 
var iconHover = function(){
//when not on hover, hide the about of each blurb
    //hide icon title
    //re-show icon blurb
var iconLeave = function(){

//execute the above functions on the mouseenter and mouseleave methods 


and here is how I have linked to it in my functions.php file:

//Load Js
function theme_js(){
    //general purpose js
    wp_enqueue_script('app', get_template_directory_uri(). '/js/app.js', array('jquery'), '', true);

    //js for the image galleries
    wp_enqueue_script('simple-lightbox', get_template_directory_uri(). '/js/simple-lightbox.js', array('jquery'), '', true);

    //flexslider js
    wp_register_script('flexslider', get_template_directory_uri(). '/js/flexslider.js', array('jquery'), '', true);

    //js for the flex call
    wp_enqueue_script('theme_js', get_template_directory_uri(). '/js/theme.js', array('jquery'), '', true);
add_action('wp_enqueue_scripts', 'theme_js');

can anyone see what I'm doing wrong here? Any help would be much appreciated

30,548 Points

As a quick fix I have reverted back to using the "jQuery()" syntax rather than the "$()" syntax, but if anyone has any insight on how to get the $() syntax to work without conflicts could they please let me know!

1 Answer

Andrew Shook
Andrew Shook
31,709 Points

First, how are you loading jQuery into your theme? I don't see you enqueueing it so are you using html in your header?

Your problem is that WordPress loads jQuery in no conflict mode which means that you can't use the dollar sign by default. So what you need to do is wrapper your code in this:

        //paste your code here
    //do not put any jQuery below this line.

This code is a self executing function/closure ( meaning its executes as soon as it is read and helps limit the scope of variables) that takes the jQuery object as a parameter. It then passes jQuery into the anonymous function inside of it, and maps/aliases it to the dollar sign parameter of the anonymous function. That way you can use the dollar sing alias instead of typing out jQuery.
Here are some links for further reading:
Codex- jQuery_noConflict_Wrappers.

Hope this helps.

Andrew McCormick
Andrew McCormick
17,730 Points

Andrew Shook , great answer and explanation.
Quick Mod edit, I changed the text of your links for ease of reading and searching for people looking for answers in the future.

Andrew Shook
Andrew Shook
31,709 Points

Thanks Andrew McCormick, a lot of the time when I do that its because am I work, know the answer, and need to get it out quickly.