Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm having a problem I've never seen before. In a very new WordPress install, I uploaded a theme I had been working on for a friend's restaurant: CornerPocketPub.com

The problem, as you can see, is that the jquery plugins for the homepage (.cycle) and the menu page (.easyAccordion) aren't being recognized as functions in Firebug. Now, I've been looking all around for answers, but I can't seem to get a solution that works for me.

Please help, and thank you in advance for help and advice!

share|improve this question
    
How is this a WordPress-specific question? –  Chip Bennett Jul 2 '11 at 0:43
    
Because I've seen MANY people say it has to do with a wordpress/jquery interaction issue. I know it works because on my local install, everything works fine. But a few days after I put it up live, suddenly the functions are no longer recognized as functions. –  user6674 Jul 2 '11 at 0:50
1  
jQuery object in WP is jQuery, not $. –  Milo Jul 2 '11 at 1:37
add comment

1 Answer 1

I still say this is a jQuery issue; however, it is important to note that WordPress requires no-conflict mode for jQuery.

From Codex: jQuery noConflict Wrappers

The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

In the noConflict() mode, the global $ shortcut for jQuery is not available, so you can still use:

jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

but the following will either throw an error, or use the $ shortcut as assigned by other library.

$(document).ready(function(){
     $(#somefunction) ...
});

However, if you really like the short $ instead of jQuery, you can use the following wrapper around your code:

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

That wrapper will cause your code to be executed when the DOM is fully constructed. If, for some reason, you want your code to execute immediately instead of waiting for the DOM ready event, then you can use this wrapper method instead:

(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
})(jQuery);

Alternatively, you can always reassign jQuery to another shortcut of your choice and leave the $ shorcut to other libraries:

var $j = jQuery;
share|improve this answer
    
Ok well, you both were correct. @Milo, I had forgotten to include a var $ = jQuery.noConflict(); into my code, so thank you for reminding me of that. @Chip Bennet, your link eventually led me to a solution for the .cycle plugin for the front page of the website. Strange thing is, once that is sorted out, the plugin for the Menu page is still not being recognized as a function. Check the link again, so you can see it through Firebug! –  user6674 Jul 2 '11 at 2:55
    
Nevermind, the server just needed to catch up to my multiple changes. After a 5 minute break, both plugins are working as they should. Thank you everyone for you patience and advice, it is very appreciated :) –  user6674 Jul 2 '11 at 3:15
    
@:Chip Bennett:+1 very good answer... –  Ramkumar Jul 2 '11 at 5:16
1  
$Corey, I think using $ = jQuery.noConflict() can cause problems in some situations. It's better to use a self-calling anonymous function that passes jQuery in for the $ parameter, or something similar –  Ian Dunn Jul 2 '11 at 19:27
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.