How to Load jQuery in WordPress Footer

By default, WordPress includes jQuery library with every installation. WordPress registers the jQuery library to load in header. But site performance wise, this is not always good. So, here we’ll see how we can load the jQuery in footer of our WordPress site.

We can do this using a little snippet in our functions.php file. Let’s do it.

First, we deregistered the jQuery. Then, we registered it using the wp_register_script function. This function accepts five parameters.

  • $handle – This is the name of the script. In this case, it is ‘jquery’. Remember to use all lower-case letters.
  • $src – This is the source of script. By default, jQuery is located in /wp-includes/js/jquery.js
  • $deps – This is the dependency of your script. Here, we used false because jQuery library is not dependent on any other scripts.
  • $ver – This is the version of the script.
  • $in_footer – This is the most important parameter here. Here, we tell the function to load the script in footer. By default, it returns ‘false’ which means the script will load in header. So, we put ‘true’ to load the script in header.

Then, we enqueue the script using the wp_enqueue_script function.

NOTE : You can add the script using the wp_enqueue_scripts action hook. But you have to add it in a specific way.

Loading the jQuery in footer is a good thing. But it can create conflicts in your Dashboard, cause jQuery is needed in Dashboard. So, we don’t want to load the jQuery in footer, when user is in the Dashboard.

That’s why we used !is_admin while adding our action hook. Here ! is a PHP logical operator. This tells the function to enqueue script when user is not in dashboard.

I hope you find this post helpful. Let me know through comments if you have any queries. Don’t forget to share it with others.

Sharing is Caring
Imtiaz Rayhan
 

WordPress Enthusiast, Novice PHP Developer. Music Addict, The Beatles Fan. Conncect with me on Facebook, Google+ and Twitter.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: