Daily Tips WordPress

How To Add a Simple jQuery Script to WordPress Parent or Child Theme?

0
1 0

These days I got a lot of questions regarding this simple task in WordPress: “How To Add a Simple jQuery Script to WordPress”. Today I’m gonna show you how to add a simple javascript or jQuery code when you are using a WordPress Parent Theme or a Child one.

Step 1: Get your jQuery/Javascript done. For example:

(function ($) {
    'use strict';

    //On Click Logo
    $( "logo" ).on( "click", function() {
        alert( 'Done' );
    });

} (jQuery) )

Step 2: Create a folder(directory) in your theme, for example name it “js”;

Step 3: Create a .js file this new created folder for your javascript code. E.g. stanleytips-custom.js;

Step 4: Place your jQuery script this new created file (Do not add <script> tags in a .js file).

Step 5: Go to your theme/child-theme directory and open functions.php; To import the new created .js file into our site we will need to use this WordPress function “wp_enqueue_script()“.

Step 6-a: Below is the code you need to write in your functions.php(this is for parent theme, not for child themes);

function import_my_custom_js_file() {
    wp_enqueue_script(
        'stanleytips-custom', // (string) (Required) Name of the script. Should be unique.
        get_template_directory_uri() . '/js/stanleytips-custom.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}
add_action( 'wp_enqueue_scripts', 'import_my_custom_js_file' );

Step 6-b: Now for Child-Themes, the code you need to write in your functions.php is as follows; Basically what I’ve changed was the way I get the path of the js file. For Parent themes I get the derectory using this function “get_template_directory_uri” and now, for child themes I get it with “get_stylesheet_directory_uri()“;

function import_my_custom_js_file() {
    wp_enqueue_script(
        'stanleytips-custom', // (string) (Required) Name of the script. Should be unique.
        get_stylesheet_directory_uri() . '/js/stanleytips-custom.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}
add_action( 'wp_enqueue_scripts', 'import_my_custom_js_file' );

Final Note: Now I think that you should be able to add new JS files(scripts) in your WordPress the correct and legit way:). If you have any other suggestions of tutorials please leave a reply in my comments section below.

If you enjoy this article you can share it to spread the word and help other WordPress users with this feature;

Stanley
I am a self made webmaster, blogger, web technology enthusiast and founder of StanleyTips.com.
You may also like
Which is the perfect SmartPhone for Android N?
doctor who google doodle how to play the game
How to play Doctor Who Google Doodle Game

Leave Your Comment

Your Comment*

Your Name*
Your Webpage

32 + = 40

Enjoy This Article?

Join My Mailing List...

Facebook

Twitter

THANK YOU