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 it.

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 and the LinkedIn Influencer. A coder by passion and a blogger by choice. WordPress theme development is his forte. He is your WordPress guy who will teach you how to solve WordPress errors, WordPress security issues, design issues and what not.

Get Free Updates Into Your Inbox

Learn Everything Just Like I Did

SUBSCRIBE

9 comments

  1. Hey Ravi,

    Just in time when I was looking for the exact same thing to help speed up my site. I was wondering if it’d be better to use Better WordPress Minify for moving both JS and CSS files?

    I am non-techy to even dare work on the “editor”. Do you think that’s a better idea?

    Ash

    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

  2. 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

  3. Great tutorial as always, Ravi. I didn’t realize having that Javascript in the header could slow the page loading. Might have to get moving mine. Thanks for sharing this!

    B

  4. Hi Ravi,

    You are my new best friend! πŸ™‚ Thank you for showing us how to do this! I’ve been trying to speed up Not Now Mom’s Busy but I’m too intimidated to try to fix it without a guide. This is going to work perfectly.

    Now all I need is to find the time to do this. πŸ™‚

    Passing this one along for sure. Hope you’re having a great day!

    Cori

    1. Hey Cori,

      Coding always seems to be intimidating but once you learn it, everything seems to be really easy. This is another way to improve a website’s performance.
      Glad you liked it.
      Thanks for stopping by.
      ~Ravi

  5. Hi Ravi,

    Another informative post from you. Great. Page speed is important for any website to get more visitors. I too facing speed issues regarding javascript & definitely, I will follow your guidance. It’s really helpful.

    Thank you,

Leave a Reply

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