Monday , 20 November 2017
Home / Programming / WordPress / Themes / How to add JavaScript in your WordPress Themes
How to add JavaScript in your WordPress Themes
How to add JavaScript in your WordPress Themes

How to add JavaScript in your WordPress Themes

This tutorial is a part of the WordPress Theme tutorial series. If you would like to see the whole series and the order in which you should follow them, then click here.

We have some javascript in our theme. So, let’s learn how to add JavaScript in your WordPress themes. It’s very similar to adding style sheets to your theme.

Adding JavaScript

Open up your footer.php file and add this line of code right before the closing </body> tag.

Just like our wp_head() function, this gives developers access to add their own scripts or add any content they want.

Let’s open up our functions.php file and inside our jk_add_custom_scripts_styles() function add this bit of code.

Our theme utilizes JQuery and so we need to properly add it. You’ll notice that we’re not registering our script first.  WordPress actually has JQuery itself and it actually registers JQuery automatically for you. So, you can just enqueue it right away. WordPress comes installed with dozens of scripts. If you would like a list, then click here.

However, we do have a script that comes exclusively with our theme. To register this script, we use this the wp_register_script() function. Add this bit of code.

This function is similar to our wp_register_style() function. It has 5 parameters. The first 2 are required and the last 3 are optional. Let’s go over each one

  • Handle – The name for this script. You’ll use this name to reference it if you need it. This name should be unique.
  • Source – The location to this file.
  • Dependencies – An array filled with the names of scripts that should be loaded before this script.
  • Version – The version of this script.
  • Load in Footer – Should this script load in the footer? If set to false, then this script will load in the header.

You’ll notice we add 1 item in the array. This script depends on JQuery to run. So, it’s a dependent on JQuery. We let WordPress know this by passing in the handle name. In our case, it’s jquery as defined by WordPress. We also set the load in footer option to true. We want this script to load in the footer. I assume you know why. If not, to sum it up, it makes our  website run faster.

Lastly, we need to enqueue this script to actually add it. So, add this bit of code.

That’s it! Reload your page and you should see your scripts loaded. View the source code to make sure. Let’s open up our header.php file and remove  these lines of code.

This is what your jk_add_custom_scripts_styles() function should look like.

Conclusion

Adding JavaScript and CSS to your template is fairly simple and flexible. If you would like more information about adding JavaScript, then click here.

About Jasko Koyn

Check Also

WordPress Theme Menu Support

WordPress Theme Menu Support

Having a dynamic theme is important. It allows the user to customize  your theme to …

Leave a Reply

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

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link