Jquery in Child Theme

by

First off, jquery is most likely already enqueued by the main theme. But if not, the proper way is to call wp_enqueue_script('jquery') in a function for the action hook wp_enqueue_scripts.

Example: 

function enqueue_jquery() {
   wp_enqueue_script('jquery');
}

add_action('wp_enqueue_scripts', 'enqueue_jquery').

This code would need to be added to the functions.php file for your child theme.

You would only specify a file name in wp_enqueue_script if you wanted to load a jquery version different than the one that comes with wordpress, or the one that comes with your main theme. And you would then need to make sure that any version of jquery already loaded is unloaded first, with wp_deregister_script('jquery'). Not deregistering an already loaded jquery version before loading a new one will lead to conflicts (same jquery functions defined twice…).

Then, for your jquery.balloon.js file, same remark, use wp_enqueue_script (and action hook wp_enqueue_scripts). You should also avoid using relative url’s. Assuming you put the jquery.balloon.js file under the “js” directory for your child-theme, standard in WordPress would be to use code along the lines of:

wp_enqueue_script('jquery-balloon', get_stylesheet_directory_uri().'/js/jquery.balloon.js', array('jquery'), false, false);

The get_stylesheet_directory_uri function will return the full path url to your child-theme directory.

EDIT (had forgotten to include the activation of the balloon effect)

For the activation part (the $(document).ready(...); code), the most standard WordPress way to do things (and the one that will have the least disruption potential in terms of main – child theme relationship) is to create a js file with it, called for instance “balloonactivate.js“, and put that file in the “js” folder for your child-theme.

Let’s say that your child theme is for a theme called “maintheme”; then your child-theme should be in a folder called “maintheme-child” (ie, wp-content/themes/maintheme-child). In the “js” folder below (which either already exists, or which you will have created to put the “jquey.balloon.js” file), put the “**strong text**balloonactivate.js” file. The only thing left to do is to enqueue it like the jquery and jquery.balloon.js scripts.

So, the complete code that could work for you is as follows:

function enqueue_jquery_balloon() {
   wp_enqueue_script('jquery');
   wp_enqueue_script('jquery-balloon', get_stylesheet_directory_uri().'/js/jquery.balloon.js', array('jquery'), false, false);
   wp_enqueue_script('activate-balloon', get_stylesheet_directory_uri().'/js/balloonactivate.js', array('jquery-balloon'), false, false);
}

add_action('wp_enqueue_scripts', 'enqueue_jquery_balloon').

This code should be added to the functions.php file in the directory for your child-theme.

For the activation of the balloon effect, the $(document).ready(...); code could also be added inline at the end of the child-theme footer.php file (if the child-theme requires a footer that is different from the main theme one). But if the main theme footer suffices, it would be a pity to create a footer.php in the child-theme just for the balloon script (hence the comment above about the “least disruptive” impact of the balloonactivate.js file).

Enqueuing jquery is probably not needed in your case, but enqueuing it again is not an issue. What would be an issue is if one version of jquery was already loaded, and that you loaded a second one.

Hope this helps.

Leave a Comment