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
rtprjct
30,548 PointsjQuery 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:
jQuery(document).ready(function($)){
/*================
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(){
$(this).find('p').show("fast");
$(this).find('h3').hide("fast");
}
//when not on hover, hide the about of each blurb
//hide icon title
//re-show icon blurb
var iconLeave = function(){
$(this).find('p').hide("fast");
$(this).find('h3').show("fast");
}
//execute the above functions on the mouseenter and mouseleave methods
$('.icon').mouseenter(iconHover).mouseleave(iconLeave);
}
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);
if(is_page('home')){
wp_enqueue_script('flexslider');
}
//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
1 Answer
Andrew Shook
31,709 PointsFirst, 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:
(function($){
$document.ready(function(){
//paste your code here
});
//do not put any jQuery below this line.
})(jQuery);
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:
adding-custom-js-to-wordpress
jquery-in-wordpress
Codex- jQuery_noConflict_Wrappers.
Hope this helps.
Andrew McCormick
17,730 PointsAndrew 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
31,709 PointsThanks 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.
rtprjct
30,548 Pointsrtprjct
30,548 PointsAs 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!