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.

Simple Custom CSS & 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.

Custom CSS & JS Menu

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.

New JS code menu page
The comments in the editor are also quite helpful

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.

Javascript Snippet

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

Javascript Test Alert

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.

Simple CSS & JS Options

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.

Related Posts

Be First to Comment

    Post a comment

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