How To Move JavaScript To The Footer of Your WordPress Site?

move javascript to the footer

JavaScript is a scripting language which works when the user opens the website. It’s a client-side language. To build a website, you may in need to use this language.

In every WordPress theme, there are a few JavaScript files. Most of the files are added in the header of the website. What would you do to move JavaScript to the footer of your website?

Before you go further, you must know how to include a Javascript file in WordPress theme.

Why do you want to move the files to the bottom of your website? Do you know the reason?

The Biggest Benefit of Moving The JavaScript File to The Bottom.

When any user opens your website then all the JavaScript files get downloaded by the web browser to show the proper working of the website.

But if you have the files in the header then the browser would take more time.

To increase the speed of your website, you should move JavaScript in the footer of your WordPress theme.

The user won’t even notice the loading process of the files because the website will be appearing to the user.

How Would You Add JavaScript In The Footer?

When you add the JavaScript file in your WordPress theme then you use a WordPress function. That function consists many parameters.

Let me show you.

wp_enqueue_script ( $handle, $src, $deps, $ver, $in_footer );

In this function, the values to the parameter should pass.

$handle :- It’s the name of the file.

$src :- Address or path of the file.

$deps:- It’s an array to handle the script.

$ver :- It’s the version of the file.

$in_footer :- This is the final and the most important part of the code. By default, it’s “false”.

But if you want to move JavaScript to the footer then just set this value to “true” and you’re done.

Let me show an example of the code.

function your_script_file() {

wp_enqueue ( ‘script’, get_template_directory_uri() . ‘/Js/script.js’ , ” , ‘1.0’, true );

}

add_filter ( ‘wp_enqueue_scripts’, ‘your_script_file’ );

This code will add the JavaScript file of the name “script.js” located in the “Js” folder of your theme in the footer.

As the value of “$in_footer” is set to “true” so the file will move to the bottom of your WordPress theme.

You have successfully moved the JavaScript file of your theme in the footer area. If you check the source code of your website then the file would have shifted to the bottom.

Can You Now Move JavaScript To The Footer?

As you know, it’s important to have the minimum page loading time. It’s recommended to keep the page loading under 3 seconds.

If you have the JavaScript files in the header area, the web browser will take much time to load your website. So, it’s better to move JavaScript to the footer area.

You just have to find the code which adds the JavaScript file and set the value of the parameter to “true”.

by Ravi Chahar

A WordPress Professional, web developer and designer who intends to guide his readers about WordPress, Blogging, Web Development, Web Design and more. I have expertise in WordPress theme development and customization. I can set up and redesign the Thesis themes. I have been working in this field for years now.

5 comments

    1. Hi Ash,

      It’s important to have a little of knowledge about the WordPress functions so that you can find the right code in your theme file. Every developer has something different to add.

      Just find the similar code shown above and replace the value.
      ~Ravi

  1. Hi Ravi,

    It’s been long since I last landed here 🙂 How are you?

    I love the tutorial you treated today. However, is there a way to move all javascript to the footer with one nice stroke of modification/code?

    I’ll sincerely appreciate your thoughts on this.

    Make the day great!

    Always,
    Akaahan Terungwa

    1. Hey Akaahan,

      Glad to see you.:)

      Yeah, you can add more than one JavaScript files in the footer. As I have mentioned in the tutorial, you just have to manage the code to get repeated for each file in the same function.
      ~Ravi

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge