Javascript in Functions.php - How to Add Javascript Files Without Breaking Your WordPress Site

WordPress is so extensible that it allows you to easily add new features and functionalities to your website without actually having to redesign your entire theme. Rather you can add the functionality by simply adding plugins. And if the functionality you would like to add is too small to create a plugin (which comprises just a few lines of code), you can use the functions.php file rather than creating a separate plugin.

 

(Special note: Are you looking for a list of tweaks/tricks you can easily make on your WordPress site without using a plugin? You may refer our guide here:101 WordPress tricks every serious blogger must know.)

The best thing about the functions.php file is that it acts like a plugin, which can be used to add features and extend the functionality of both the theme as well as WordPress installation.

That said, often times while enhancing your website with new features you’ll require to add additional javascript files to your WordPress theme especially if you’re looking to provide a friendlier user experience to your website visitors or if you’re verifying your site with third-party services.

Though you can easily add a javascript code directly to your header.php file, the problem with this method is that it can even cause conflicts with other plugins when they load their own JS scripts.

Let’s take a look at the right way to add javascript to WordPress themes. As WordPress developers, this is one of the things which we will have to do very often.

Adding javascript to WordPress: The right way

The recommended method to add a javascript file to your WordPress theme is by using functions.php file with wp_enqueue_script.

Here’s how to do it.

Just open your functions.php file and copy the below code snippet to it. Make sure you replace the template URLwith yours before saving.

function my_theme_scripts_function() {

  wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js');

}

add_action('wp_enqueue_scripts','my_theme_scripts_function');

If you’re using a child theme, you’ll need to use get_stylesheet_directory_uri() instead of get_template_directory_uri()

Adding Javascript to WordPress using plugins

If you would like to simply use a plugin for uploading a javascript to the theme’s header or footer file, ‘Insert Headers and Footers’ plugin could be the right choice for you. As the name says it allows you to add scripts to the header and footer files by hooking into wp_head and wp_footer.

You can download Insert Headers and Footers here.

Download the list of 101 WordPress tricks every blogger should know

101 WordPress tricks

Click here to Download Now

One more thing...

Do you have friends or a Facebook group who you think would find this useful? Share this with them and then let me know what they think.

Want to supercharge your website?

 
Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion VPS servers We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for DART Creations friends + FREE domain! Check it out NOW!