How To Add JavaScript to WordPress

What do you do if you want to add fancy elements to your WordPress website, but don’t want to risk slowing down your website by installing a bunch of different plugins?

That’s right! You add a bit of JavaScript code to your entire site or a respective WordPress page or post.

The cool thing about JavaScript is that it’s a coding language that runs on the user’s browser instead of your server. The result? You can tweak your website to your heart’s content without having to worry about your site loading at turtle-slow speeds.

WordPress is slightly tricky when it comes to adding JavaScript. WordPress doesn’t allow you to just add a JavaScript code snippet willy-nilly. If you try and simply paste code into the 'code' section of a WordPress post, WordPress will likely delete it when you try and save it, causing you to run around in frustrating circles.

But don’t worry. This post will cover how you can add JavaScript to your WordPress website with the help of a couple of great plugins. The two most popular ways to easily add JavaScript with a plugin are:

1. Using the Insert Headers and Footers plugin to add code to your whole site
2. Trying out the Code Embed plugin to add code to posts and pages

Here’s how to add code using each method. Thankfully, these methods aren’t too complicated, so even novice WordPress users should be able to add JavaScript code as necessary.

Let’s dig in!

What is a Script?

Before talking about how to add JavaScript, it’s important to cover what a script even is. A script is a pre-made coding language that developers and designers use to perform specific actions.

There are several different languages for writing scripts, including ASP, Perl, PHP, Python, Ruby, Java, and…JavaScript. 

There are a lot of various things your website will be able to do if you add a script using the JavaScript language, but here are some examples:

• Sliding through different images
• Displaying a countdown timer
• Showing animations
• Displaying content updates
• Presenting interactive maps
• Developing a browser game
• And so much more!

Now let’s talk about how to add JavaScript code with the help of two plugins.

1. Add JavaScript using the Insert Headers and Footers Plugin

If you want to add JavaScript code to your whole website, then the best option is to download the Insert Headers and Footers plugin. 

It’s possible to edit and add JavaScript code to your WordPress theme’s header.php or footer.php files. 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, and will delete your edits.

Using the Insert Headers and Footers plugin is a way around this problem. Even if you update your theme, your headers and footers code will stay put if you use the plugin.

Here are the steps for adding JavaScript using the Insert Headers and Footers Plugin:

1. Log in to WordPress with your login credentials.
2. Find 'Plugins' on the left dashboard, hover your cursor over it, and select 'Add New.'
3. Search for the 'Insert Headers and Footers' plugin in the search bar.
4. Click 'Install.'
5. Click Activate.'
6. When you activate the plugin, go to 'Settings,' and find and select 'Insert Headers and Footers.'
7. One of the boxes is for headers and the other is for footers.
8. Insert the JavaScript code into the respective box and save your changes.

Once you have added and saved your code, you will see your changes site-wide. Remember, even if you update your WordPress theme, this plugin will save you JavaScript code information, keeping your JavaScript changes active.

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

Sometimes WordPress users will want to add JavaScript to a specific page or post. If this is your desire, you don’t want to use the Insert Headers and Footers plugin. Instead, you’ll want to install the Code Embed plugin. 

Here are the steps for adding JavaScript code via the Code Embed Plugin.

1. Log in to WordPress with your login credentials.
2. Find 'Plugins' on the left dashboard, hover your cursor over it, and select 'Add New.'
3. Search for the 'Code Embed' plugin in the search bar.
4. Click 'Install.'
5. Click Activate.'
6. Once you activate the plugin, you’ll need to edit the respective post or page where you want the JavaScript.
7. Go to the post or page 'Edit' page, click on 'Screen Options,' and select 'Custom Fields.'
8. Once you’ve checked the 'Custom Fields' box, scroll down until you see the post editor. Below the post editor, you’ll see the 'Custom Fields' metabox. From here, you can click on the 'Enter new' link.
9. After you do this, you will see the custom field name and values.
10. Make sure to provide a name for the custom field and don’t forget to use a CODE prefix. This means write the word CODE and the name (e.g. CODEname). 
11. Past the JavaScript code into the value field.
12. Click on the 'Add Custom Field' button to save the custom field.
13. Once you’ve completed these steps, you can use this custom field anywhere in the post or page. All you have to do is embed the code where you want it to appear in your post or page (e.g. {{CODEname}}).
14. As soon as you have entered your code field where you want it to appear, you can save your page or post.
15. Once you’ve saved the code, JavaScript will go to work and you’ll see the coded function appear on your post or page.

If you want to check out your JavaScript code from behind the scenes, you can always navigate to the page in question, right click on the page, and select 'View Page Source' from the drop down menu. 

Tutorials for manually adding code (another option for adding JavaScript to WordPress)

Using the Insert Headers and Footers plugin to add JavaScript to your whole WordPress site and the Code Embed plugin to add JavaScript to individual pages and posts are the easiest methods for adding JavaScript. However, they are not the only methods.

If you are interested in coding, you can also manually add the code to your website. Here are a few helpful tutorials for how to add JavaScript to your WordPress site manually:

• Tutorial from WPBeginner
• Tutorial from OSTraining
• Tutorial from Envanto

These tutorials will provide helpful information if you’re looking to delve a bit deeper into the world of JavaScript

Wrap Up

Adding a script to your website is a fun way to add extra features to your whole site, pages, or posts. The best part about adding JavaScript to WordPress is you can add functionality to your website without bogging your site down with tons of plugins.

While you can certainly add JavaScript to your website manually, it’s often easier for beginner WordPress users to install a plugin. Namely, you’ll want to install the Insert Headers and Footers and Code Embed plugins.

As you work to customize your website, remember to select a hosting company, like HostGator. that makes it easy to start a WordPress site. Visit HostGator today to learn more about our WordPress hosting options.