[Theme: Twenty Eleven] wp_enqueue_script problems

Anytime you use wp_enqueue_script(), make sure you use it within an action.

BEFORE:
if( !is_admin()){
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, (“https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”), false, ‘1.7.1’);
wp_enqueue_script(‘jquery’);
}

AFTER:
add_action(‘wp_head’, ‘my_register_jquery_function’);
function my_register_jquery_function() {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, (“https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”), false, ‘1.7.1’);
wp_enqueue_script(‘jquery’);
}

This issue caused me all sorts of headache a couple months ago. Hope that helps…

Cheers!
Ryan

Thanks Ryan.

So as I understand it from your post. I add the ‘after’ script you posted in functions.php in my child theme. Seems straight forward enough.
Now after this what do I need to include in functions.php to call my individual plug ins, or do these need to be called in the header. And as the plugins I’ve downloaded reside in my child themed js folder, do I need to call them with bloginfo or stylesheet or a combination, an example would be really handy.

Also I watched a Chris coyier video lastnight where he placed the calls to plugins in the footer, is this something I need to do?

Most of my confusion is arising from where to actually place the scripts and as its a child theme where to call them from.

I will try your example in the meantime and see if it clears anything up.

Thanks for helping.

Marcus

For some reason i don’t see the edit button on the post.

As an aside, does it or should it matter that some scripts dont have the “jQuery prefix” some of my scripts are just scriptname.js
as opposed to jquery.scriptname.js, can this cause conflicts?

Thanks

Hi Marcus,

Sorry I wasn’t very clear in my original reply. Replace the ‘before’ piece of code with the ‘after’ piece of code.

I’m not sure what you mean regarding plugins. All of your plugins will still be handled through the wp-admin backend – as long as your theme still has the wp_head() and wp_footer() functions and they’re in the right place.

If you’re talking about using your functions.php to call/include scripts, do the exact same thing as the “after” piece of code (except you probably don’t need to wp_deregister_script() for most). You can add the code into your header.php file to include it, but it’s much easier to run into conflicts and as a wp nerd I am obliged to at least say it’s considered “bad coding practice” to do that.

wp_enqueue_script(
  'Script' // Unique handle for the script
  , get_stylesheet_directory_uri() . '/js_folder/script.js'
  , array('jquery') /* This is an array of handles for scripts that need to be included before we can enqueue this script i.e. slipslap needs jquery to run, hence slipslap will have array('jquery') as a dependency */
  , $ver // version of the script
  , $in_footer /* if set to true, it will call this script in wp_footer(). This is probably the exact same thing Chris Coyier was doing - not necessary but it can help optimize page load times or at least the appearance of page load times. */
);

Regarding the “jQuery prefix”, it does not matter. As long as you enqueue the script with its dependencies and refer to those dependencies by their handle – for example array('jquery') – wordpress will know that it needs to include the jquery script first. /* run on sentence - will fix later */

Hope that helps… cheers!

Thanks for your help and time RedEarRyan, very appreciated.

One thing though, i actually removed all trace of calls to jQuery i could find, and viewed my source code only to see that it is being pulled from the parent theme of my child, specifically from here: https://www.gotodesigns.co.uk/wp-includes/js/jquery/jquery.js?ver=1.7.1

And when i go into the console and type in “jQuery’ it shows up with function() So im assuming its actually running. When i enqueued the SlipSlap.js with aforementioned method, it was not found. ReferenceError: slipSlap is not defined

Now, am i right in saying i only need to rename the stylesheet link in the child theme so it refers to the childs folder location and not the parent? Theres going to be no double loading issues or anything?

I just cannot for the life of me get one bit of jquery to run. I have tried the method you described as well..

Shall i post some pastebin code up of my header & functions pages. maybe you can see something i cant.

Thanks again

Marcus

Seem to have it working now, finally!!

Neglected to add the add_action(‘wp_enqueue_scripts’, ‘my_register_jquery_function’);

I will try and repeat the process with a couple more plugins to be sure, and report back and hopefully mark the topic as resolved!

Many thanks for your help RedEarRyan

Marcus

I’m going to post the code here actually, just incase anyone else stumbles on this post in the near future and it can be of help.

Adding this to my child themes functions.php worked:

add_action('wp_head', 'my_register_jquery_function');
function my_register_jquery_function() {
wp_deregister_script('jquery');
wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.7.1');
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_register_jquery_function');

wp_enqueue_script(
  'slipSlap'
  , get_stylesheet_directory_uri() . '/js/slipSlap.js'
  , array('jquery')
);

Hi Marcus,

Glad you have it working. I have to apologize, I did it wrong the first example I gave you! Yikes!

The action I gave you to hook into was wrong:
add_action('wp_head', 'my_register_jquery_function');

That’s why when you put this in:
add_action('wp_enqueue_scripts', 'my_register_jquery_function');
it started working. Aha! Right hook!

Well done. See? You didn’t need anyone’s help. Here’s how it should look in total then:

function my_register_jquery_function() {
  wp_deregister_script('jquery');
  wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.7.1');
  wp_enqueue_script('jquery');

  wp_enqueue_script(
    'slipSlap'
    , get_stylesheet_directory_uri() . '/js/slipSlap.js'
    , array('jquery')
  );
}
add_action('wp_enqueue_scripts', 'my_register_jquery_function');

You can put all of the scripts you want to enqueue inside of this one function like I did for you with slipslap.

Lesson to me – do not do from memory. Sorry for the confusion I might have given anyone!

Cheers,
Ryan

No problem Ryan

Main thing is its working and im a happy chappy. And anyone else finding the thread will have a clear example to work from. Thanks Ryan!

Marcus

Hello,
i find this post looking for a link with a problem like this one.
I followed your conversation and i ended up adding the following function to my child-theme file: functions.php

function my_register_jquery_function() {
  wp_deregister_script('jquery');
  wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.7.1');
  wp_enqueue_script('jquery');

  wp_enqueue_script(
    'slidingform'
    , get_stylesheet_directory_uri() . '/js/slidingform.js'
    , array('jquery')
  );
}
add_action('wp_enqueue_scripts', 'my_register_jquery_function');

the truth is that i can’t make it work. i have the file ‘slidingform.js’ in both parent and child path in a folder called ‘js’ but it won’t activate.

Could it because in the functions.php, on the top i have the following function:

function sout_my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', false, '1.7.1');
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'sout_my_init');

Help please!

You have solve my BIG issue with the same case. THANKS!!!!