Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Move JavaScripts to the Bottom or Footer in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Recently, one of our readers asked us how they can move JavaScripts to the bottom in WordPress to increase their Google page speed score. We are glad they asked, because honestly we wanted to write about this. Previously, we have talked about how to properly add JavaScripts and CSS styles in WordPress. In this article, we will show you how to move JavaScripts to the bottom in WordPress, so you can improve your site load time and your Google page speed score.

Benefits of Moving JavaScripts to the Bottom

JavaScript is a client side programming language. It is executed and run by a user’s web browser and not by your web server. When you put JavaScript at the top, browsers may execute or process the JavaScript before loading the rest of your page. When JavaScripts are moved to the bottom, your web server would quickly render the page and then the user’s browser would execute JavaScripts. Since all the server side rendering is already done, the JavaScript will load in the background making the overall load faster.

This will improve your speed score when testing with Google page speed or Yslow. Google and other search engines are now considering page speed as one of the performance matrices when displaying search results. This means that websites that load faster will appear more prominently in search results.

The Proper Way of Adding Scripts in WordPress

WordPress has a powerful enqueuing system which allows theme and plugin developers to add their scripts in queue and load them as needed. Enqueuing scripts and styles properly can significantly improve your page load speed.

To show you a basic example, we will add a little JavaScript into a WordPress theme. Save your JavaScript in a .js file and place that .js file in your theme’s js directory. If your theme does not have a directory for JavaScripts, then create one. After placing your script file, edit your theme’s functions.php file and add this code:

function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  

In this code, we have used wp_register_script() function. This function has the following parameters:

<?php
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
?>

To add the script in the footer or bottom of a WordPress page, all you need to do is set the $in_footer parameter to true.

We have also used another function get_template_directory_uri() which returns the URL for the template directory. This function should be used for enqueuing and registering scripts and styles in WordPress themes. For plugins we will be using plugins_url() function.

The Problem:

The problem is that some times WordPress plugins add their own JavaScript to pages inside <head> or inside page body. In order to move those scripts to the bottom you need to edit your plugin files and properly move the scripts to the bottom.

Finding The JavaScript Source

Open your site in the web browser and view page source. You will see the link to the JavaScript file indicating the location and the origin of the file. For example, the screenshot below tells us that our script belongs to a plugin called ‘test-plugin101’. The script file is located in the js directory.

Finding source of a script in WordPress

Sometimes you will see JavaScript added directly into the page and not linked through a separate .js file. In that case, you would need to deactivate all your plugins one by one. Refresh the page after deactivating each plugin until you find the one adding the script to your pages. If the JavaScript does not disappear even after deactivating all the plugins, then try to switch to another theme to see if the JavaScript is added by your theme.

Register and Enqueue Scripts

Once you have found the plugin or theme that is adding JavaScript in the header section, the next step is to find out where the plugin has a call for the file. In one of your theme or plugin’s PHP files you will see a call to that particular .js file.

If the plugin or theme is already using enqueuing to add JavaScript file, then all you need to do is change wp_register_script function in your plugin or theme and add true for the $in_footer parameter. Like this:


wp_register_script('script-handle', plugins_url('js/script.js'  , __FILE__ ),'','1.0',true);

Lets assume that your plugin or theme is adding raw JavaScript in the header or between the content. Find the raw JavaScript code in the plugin or theme files, copy the JavaScript and save it in a .js file. Then use wp_register_script() function as shown above, to move JavaScript to the bottom.

Editor’s note: It is important to understand that when you make changes to the core files and update the plugin, then your changes will not be overridden. A better way of doing this would be to deregister the script and re-register it from your theme’s functions.php file. See this tutorial.

Aside from moving the scripts to the footer, you should also consider using a faster social media plugin and lazy load images. Along with that you should also use W3 Total Cache and MaxCDN to improve your site speed.

We hope that this article helped you move JavaScripts to the bottom in WordPress and improve your page speed. For questions and feedback please leave a comment below.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

17 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Catharine says

    Hi Syed, thanks for the tutorial. However I am a complete noob and have a very basic question. For that piece of code you posted (the entire function etc), do we need to add that in the functions.php file for every single bit of javascript we want to enqueue? I guess what I’m asking is, how would you format that code if you had more than one piece of javascript that was being loaded in the headers of more than one page?
    Your help would be greatly appreciated!

  3. Marc Jacobs says

    hi, great tutorial. I have a question though. I ran my website through Google Page Speed Insights and got the warning that I had to eliminate render blocking Javascript (and css) to boost my page speed. I read the information on this website (great read!), but I cannot seem to find the php-files where the plugin “calls” for the js-files causing my website to lack speed. I have figured out what plug-in is causing most of the delay (Google-maps-ready), but I have no idea how to precoeed frpm there. I have searched every php-file in the plugin folder, but can’s find a js-file named remotely similar to the files mentioned in the google speed test:

    How do I figure out what php file to edit? Help wouldbe much appreciated!

    greeting,

    Marc.

  4. Basavaraj Tonagatti says

    Hi, I recently moved to Genesis Framework+Eleven 40 Child Theme. I am also facing the same problem while I run the Google page speed test. But as I don’t know the exact way of doing, finding it difficult to make changes. Can anyone guide me what is the exact cause on my site and how to remove this Javascript issue? (I don’t know any styling languages and I am totally unware about these code languages.)

  5. Joseph Stanley-Hunt says

    Thanks heaps, I have been wondering how to do this and some other tricks (which I have also found answers to on here).

    One question tho, I see there is no in-head in the paramaters. is that meaning that if the in_footer is set to false, it is registered in the head automatically?

  6. Jason says

    Great article! I have been asking this questions for a long time because so many themes get penalized in Googls speed test due to java scripts loading first. Maybe others have known how to put these scripts in the footer.

    Again, thanks and I will try this out and tell you how it works.

  7. Jeremy Myers says

    Great tutorial.

    But once we update the plugin, we will have to do this again, right? And every time the plugin updates?

    Is it possible to deregister the js in functions.php and then simply reregister it in the footer somehow?

  8. adam says

    Hi, thanks for this useful tips. But, how to move .js of W3 Total Cache minify on head?
    That’s js location on cache in wp content, not wp plugin.

Leave a Reply to Marc Jacobs Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.