How To Add JavaScript In WordPress? -DIY & JavaScript Plugin

There are times when you may need to add some JavaScript code to all your web pages or maybe just one specific post. Unfortunately WordPress does not allow this by default. This article covers how to easily add any kind of JavaScript you would easily. Enjoy.

JavaScript can be used to add a lot of interactive and engaging elements to your site’s frontend. But by default, WordPress doesn’t have any native solution to help you integrate JS into your posts and pages. However, this is a very basic problem which can be easily resolved by using WordPress plugins, as we will show you in the following guide:

How To Add JavaScript In WordPress?

• Login To Your WordPress Dashboard (/WP-ADMIN)
• Got To Plugins > “Add New”
• Search For Simple Custom CSS & Javascript
• Click “Install Now”
• Then Click “Activate”
• Now you can use the plugin

There are plenty of plugins which can help you integrate custom code into your WordPress website, but we will be using Simple Custom CSS & JavaScript for our guide.

Quickly Add Javascript To WordPress Post

Once installed, the plugin will add a custom post type for custom codes. Here you can type in your JavaScript code, give it a name (Title), and also specify where you want to apply it.

The plugin can be extremely helpful for developers and veteran WordPress users. However, if you are completely new to the CMS and also never have done any coding beforehand, then we encourage you to go through our in-depth guide on the topic. There we share a step by step guide to help you easily add JS to your website.

An In-Depth Guide On How To Add JavaScript In WordPress

Step 1:

The first step is to install and activate the plugin on your website. For this, head on over to your WordPress Dashboard > Plugins > Add New. Now search for “Custom CSS & JavaScript” as shown in the image below.

Click on the Install button followed by Activate, and the plugin will install on your site.

Step 2:

Once installed, you will notice a Custom CSS & JS option in the sidebar of your WordPress dashboard. Click on it to access the following area.

Step 3:

As you can see, this is very much similar to the “All Posts” and “All Pages” sections of your WordPress backend. You will be presented with a list of all the custom codes you have written, saved, and published on your site.

Whereas at the top you will get the option to add custom HTML code, CSS code, and JS code. Since we are interested with adding custom JavaScript, let’s select the Add JS Code option.

Step 4:

As you can see from the image, you will get access to a powerful Text Editor complete with a syntax highlighter. You can either start writing your custom JS code here, or copy paste it from another source.

To the side you will notice there are options which allows you to print the code inline or include it into an external file. You can also specify if you want to print the code in the header, footer, Frontend, Admin page, or on the login page.

That’s a lot of options! And if you want a more, a pro version is also available which gives you more controls and flexibility.

Other WordPress JavaScript Plugins and Widgets (Alternatives):

• Artiss Code Embed – This plugin allows you to embed not only JavaScript but also HTML and other codes. This plugin probably works best for your posts. Some pros include the ability to call up same command/code on another post without having to go back and copy. You can also embed external code by just using a URL which i a hug positive.
• HTML JavaScript Adder – This plugin also allows flash, advertisements, texts, HTML along wiht JavaScript codes like the above plugin. There is advanced setting for targeting specific pages and posts. One feature that stands out is a one click function to show or hide widgets quickly on specific pages and posts. There is a quick tag tool bar that you can call on for functions. If you building websites in different languages this specific plugin supports 12 difference ones.
• Async JS and CSS – just like the title this plugin is built for JavaScript and CSS. This is built for asynchronous (just like the title as well) to speed up your load speed like Google Insights recommends you do.
• Zia3 CSS JS – You can use this plugin to add the JavaScript and CSS you need to customize your pages and posts. This plugin posts it in the header which can be changed in the settings. Very easy to use once you go through it once.
• Allow JavaScript in Text Widgets – This is a nice little plugin that turns your text widgets into a single widget. There you can add in basic items such Google Ads or Google Analytics code

These are just 5 other ones we have used in the past. A lot of themes like Genesis based child themes have a lot of plugins of their own on top of JavaScript options built into the themes. There are many options within WordPress just focus on one that is easy for yourself. If you get stuck send us a message and we will do our best to help you out or do a video walk through.

 

Related Questions From Users:

What Is JavaScript?

You may have seen updates on your computer previously for JavaScript updates and there is a reason for that. JavaScript is a programming language that doesn’t run on a Websites server it actually runs on the user’s browser also known as Client-Side Programming.

So with this tool at your disposal you can do a lot of cool complicated things without actually slowing down your Website load speed (keep in Google good graces).

How Do I Embed A JS File In WordPress?

• Embed a new Javascript file to your template (for all pages), such as for adding a 3rd party service such as Google Analytics
• Add a script into select pages using a plugin such as Headers and Footers
• Use functions.php to add it as part of the template’s output

Does WordPress Use Javascript?

Yes WordPress comes bundles with JavaScript already. It is also found pre-installed with themes and plugins. So unless you are a developer we would highly suggest using a plugin to get your JavaScript up and running in no time.

Conclusion

Unless you are going to be developing WP Themes or Plugins this is all you need to get started on JavaScript customization’s on your Website.

There are some precautions you need to know before going overboard using JavaScript meaning only use it where you need to and don’t overdo it. When it comes to SEO JS can be very problematic because Google needs to be able to crawl all your pages and coding.

When it comes to JS it is just not always so especially when it is coded poorly. Google needs to be able to not only crawl your Website but also render and digest it all that’s why it needs to be as clean as possible.

A simple way to make sure your JavaScript is up to par is to go to your Google Search Console and simple Fetch as Google. This will show an errors so you can look to fix.

Use where it is need to give your users the best experience the can have just be weary of any errors it may cause to your SEO.