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 have been having this issue with my site where some of the scripts that I am putting into the site are not working and others are. The site is fully functional on one setup and fails on another even though it's the same code. I have 4 calls to different scripts in the header of my site. slider, custom animation, pagination, and some tools. I found the slider works fine but the next thing is broken. I can remove the slider and another section will start working. It's bizarre.

I have been doing some reading and decided to try and do it "The right way". I am calling all the scripts from the functions.php file using register script and then enqueue. I can see them all in the header when I view source and all the files are linked correctly. Knowing that WordPress includes jquery, I removed my jquery script that does allow things to work and just added this to the functions

 wp_enqueue_script('jquery');

i can see the script in the view source and that it is linked up correctly, but even will all other scripts removed accept the slider. The slider still don't work. So here is my simple little test that is suppose to have been done the right way,

 wp_equeue_script('jquery'); //this in in functions.php

 //in the header of my site, I am calling the slider
 <script type="text/javascript">
$(document).ready(function() {
        $('#slider').coinslider({
            width: 948,
            height: 367
        });

});

from my reading.. This should work but does not. Only if I include the jquery script which I am not suppose to half to do does it start working. What am I doing wrong?

share|improve this question
    
possible duplicate of Javascript included but alert() function not working –  s_ha_dum Jun 30 '13 at 2:54
    
While I don't think it's an exact duplicate of that question I strongly believe the solution discussed there will work in your case. Also think about loading jQuery from a CDN (like Google) then you can make sure you are using the latest version. –  BandonRandon Jun 30 '13 at 3:16
    
There is a typo in wp_equeue_script(). –  toscho Jun 30 '13 at 7:12
add comment

2 Answers

up vote 4 down vote accepted

The answer is obvious. The jQuery is loaded in noConflict mode. It means that the global $ shortcut for jQuery is not available. You have to use closure, like this:

(function($) {
    $(document).ready(function() {
        $('#slider').coinslider({
            width: 948,
            height: 367
        });
    });
})(jQuery);

In addition I would like to recommend you to create hook handler for wp_enqueue_scripts action. You need to enqueue jquery in this hook. In this case you will enqueue jquery only for frontend. Like following:

add_action( 'wp_enqueue_scripts', 'wpse8170_enqueue_scripts' );
function wpse8170_enqueue_scripts() {
    wp_enqueue_script('jquery');
}
share|improve this answer
    
This is a good answer, but I think it would be more complete if you noted that hardcoding the jQuery into the header is a bad idea. It would be better to put it in a function hooked to wp_footer. If it is going to be hardcoded into the header, it has to go after wp_head(). –  JPollock Jul 1 '13 at 4:24
1  
@JPollock if you can edit my answer, feel free to extend it with your notes. –  Eugene Manuilov Jul 1 '13 at 7:34
    
@JPollock A better edit would be to break the JS into a separate file and enqueue it with in_footer set to true. Don't ever hook script/style includes to wp_footer. –  EAMann Jul 1 '13 at 20:07
    
I wrapped all my scripts in teh function call above and used the built in jquery rather than calling the separate script. Hopefully this will be better. Everything seems to be working now. Thanks to all the comments. There was some good discussion here –  Jamie Jul 2 '13 at 2:34
    
@EAMann The reason I stopped doing it that way was that means I need to created a separate js file for initializing and a separate HTTP get to load it. Do that a few times and you're impacting page load times adversely. Also if you need to reinitialize via a callback, say after an AJAX page load, you've got code in two places, which is a copypasta disaster waiting to happen. –  JPollock Jul 2 '13 at 20:30
add comment

Basically WordPress already loads jQuery by default, you don't have to enqueue jQuery from your functions.php. Because it runs in noConflict() mode you have to use jQuery instead of $.

Edit:

Like mentioned by the other users jQuery does not load by default on frontend, so it should be enqueued...why the hell I never had to do this ;) . Does setting the $deps parameter to array('jquery') when using a script which needs jQuery within wp_register_script automically load jQuery without enqueue jQuery separately?

share|improve this answer
2  
Actually this is incorrect. While WordPress does load jQuery on the admin site by default it is up to the theme/plugin author to load it. However, because most themes/plugins use jQuery it's often the case that one of the installed plugins/theme is calling it for us. –  BandonRandon Jun 30 '13 at 3:12
    
You guessed right @rftq : the $deps parameter for wp_enqueue_script is used to declare the script dependencies and load them before. Try for example to put jquery-ui-tooltip in the deps array to see how many cascaded dependencies are loaded (jquery-ui-widget, jquery-ui-position, jquery-ui-core and jquery) ! –  Fabien Quatravaux Jun 30 '13 at 22:50
    
Thanks for explanation @Fabien –  rfrq Jul 1 '13 at 0:23
add comment

Your Answer

 
discard

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.