The Easiest Way to Add Javascript to Your WordPress Site

I’m glad you’re here.

If you’re not an experienced WordPress developer, adding Javascript to your site can be pretty intimidating. Even worse…

You could seriously mess up your site if you aren’t careful.

In this tutorial, you’ll learn the quickest and safest way to add new Javascript to your WordPress site.

Add new Javascript to WordPress

Normally, you would add a child theme or plugin which would then load a new Javascript file on your site.

However, this is a lot of work if you just need to add a snippet or two of JS code. The easiest solution is to use the Simple Custom CSS and JS plugin.

Install and activate this plugin on your site, and you’ll see a new Custom CSS & JS menu item added to your dashboard. Hover over the new menu item and click the “Add Custom JS” option to begin adding your javascript.

Add the Javascript

On the next page, you’ll see a code editor where you can enter the JS you want to add to your site.

Give your JS a title so it’s easy to remember why you added it, and then enter your code into the editor below. Make sure to delete the comments first since you don’t need that added to your site.

Test the Javascript

If you want to make sure it’s working, you can add this JS to your site:

jQuery(document).ready(function( $ ){
	$('.logged-in').on('click', function(){
    	alert('The code is working!'); 
    });
});

Here’s how it will look in the editor.

All this code does is show an alert box when you click anywhere on the site, like this:

It only affects logged in users, so it won’t disrupt your visitors when you add it to do a test.

Once you’re certain it’s working, you can swap out the test snippet with the real JS you want to add to your site.

Configure the JS options

Simple Custom CSS & JS comes with a few handy options for deciding exactly how your Javascript gets added to the site.

First, if you’re just adding a bit of code, keep the Linking type as “Internal” which simply adds the code to the page. This is simpler than loading another file and won’t impact on your site’s load time.

Next, if you’re adding an analytics script, they’ll probably say if you should add it to the header or footer. Otherwise, it’s best to default to the footer.

Lastly, if the Javascript is supposed to affect your visitors, keep the “In Frontend” option checked for the Where in site setting. The “In Admin” option is only for if you want to load the Javascript while viewing pages in the WP dashboard, and of course, the “On Login Page” option is only for the member login page.

Conclusion

This approach is WAY easier than creating a new plugin or child theme.

Not to mention, Simple Custom CSS & JS is an awesome plugin, and you’ll probably find more uses for it in the future. There’s also a pro version available that’s capable of some pretty impressive customizations if you need more flexibility.

If you have questions or feedback about this post, leave a comment below.