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
best-wordpress-custom-post-plugin
Best WordPress Custom Post Type Plugin
how to gain website visitors
14 Ways to get traffic for your website

Leave Your Comment

Your Comment*

Your Name*
Your Webpage

45 − = 40

Enjoy This Article?

Join My Mailing List...

Facebook

Twitter

THANK YOU