Adding JavaScript to WordPress

Why Add JavaScript?

Adding JavaScript is the perfect option if you wish to add an array of extra elements to your WordPress website. you can do this without Javascript by installing multiple plugins, but doing this will cause the headache and issues of having to manage them all and also the risk of slowing down your website.

The interesting thing about JavaScript is that it is a coding language that instead of running on your server, within the file manager on your cPanel, it runs on the user’s browser. This allows you to adjust your website without the fear of your website loading times being affected.

WordPress will allow you to add JavaScript it, but it can just be a bit touch-and-go as WordPress does not allow you to add JavaScript code snippet directly into your page. If you attempt to add the code onto the page, there is a good chance WordPress will delete it when you have saved your edits. This will cause confusion and frustration when your site no longer works.

We will be covering in this article the easiest and most effective way you can add JavaScript to your website. But first, we need to cover what a script is.

What is a Script?

So, you can understand JavaScript even more than just adding it, it is important to cover what a script even is. A script is a pre-made code language that developers and designers use to perform specific actions.

There are multiple different coding languages for writing scripts all with their own syntax’s, these are the most commonly used languages:

• ASP
• Perl
• PHP
• Python
• Ruby
• Java
• JavaScript

Adding a script using the JavaScript language your website will allow you to add various things to your website, for example:

• Developing a browser game
• Presenting interactive maps
• Showing animations
• Displaying content updates
• Sliding through different images

So, how do you add JavaScript onto your page? There are two easy methods, let's go over them now.

Add JavaScript using the Insert Headers and Footers Plugin.

To use this method for adding JavaScript code to your whole website, the best option is to download the Insert Headers and Footers plugin.

You can edit and add JavaScript code to your WordPress theme’s header.php or footer.php files within your file manager via cPanel. However, you must also keep in mind that if you do edit your theme files, every time you update your theme, WordPress will override the code deleting your edits.

Using Insert Headers and Footers plugin is an easy workaround for this problem. Even if you update your theme, your headers and footers code will stay put if you use the plugin.

Below you will find the steps for adding JavaScript using the insert headers and footers plugin:

• Login into you WordPress (domain/wp-admin).

• Find “plugins” on the left dashboard. Hover your cursor over it and select  “Add New.”

• Use the search function to find “Insert Headers and footers.”

• Click “Install.”

• Click “Activate.”

• Go to “Settings” and select “Insert Headers and Footers.”

• One of the boxes is for the headers and the other is for footers.

• Insert the JavaScript code into the respective box and save your changes.

Once you have added the changes to your header or footer, you will see your changes site-wide, even if you update your WordPress theme, this plugin will save your JavaScript code information, keeping your JavaScript changes active.

Add JavaScript code inside posts or pages using the Code Embed Plugin.

If you do not just want your JavaScript to be displayed on your headers and footers, but instead add it to a post or page. You will want to install the Code Embed plugin.

Below you will find the steps for adding JavaScript using Code Embed plugin:

• Login into you WordPress (domain/wp-admin).

• Find “plugins” on the left dashboard. Hover your cursor over it and select “Add New.”

• Use the search function to find “Code Embed”.

• Click “Install.”

• Click “Activate.”

• Find the page/post, where you want to add the JavaScript.

• Go to the page/post “Edit” page, click on “Screen Options,” and select “Custom Fields.”

• Check “Custom Fields” Box scroll down to the post editor below that, you will find “Custom Fields” metabox. Click “Enter New” link.

• After this, you will see the custom field name and values.

• Make Sure to provide a name for the custom fields remembering the CODE prefix. This means write the Code and the name.

• Past the JavaScript code into the value field.

• Click on “Add Custom Field” button to save the custom field.

• You can use this custom field anywhere in the post or page. All you must do is embed the code where you want it to appear.

It is always a handy trick to have the page open in another browser or tab, this allows you to refresh the page once changes are made in real time. You can also right click on the page and select “View Page Source” from the drop-down menu.

You can check out more helpful articles or visit our knowledgebase for more how-to guides created by our HA support.

Not sure how to set up WordPress still via cPanel?

You can get more helpful HA how-to videos by liking and subscribing to our YouTube channel.