How to Add Custom JavaScript Into your WordPress Site

Adding custom JavaScript to your website significantly enhances the front-end functionality of your website. However, you may have a hard time figuring out how to do so effectively. Depending on your technical background and why you’re adding custom JavaScript to your WordPress website, there are several ways you can choose from.

In this tutorial, we will discuss two methods to add custom JavaScript to your WordPress Site:

• Leveraging the Head & Footer Code plugin (suitable for users with little or no technical background)
• Adding the code to the functions.php file

Fix #1: Use a Plugin like Head & Footer Code

Being the simplest way of adding custom JavaScript to your WordPress website, using a plugin is suitable for website owners from non-technical backgrounds. The Header & Footer Code plugin, and other plugins like it, offer an intuitive and user-friendly way of including custom JavaScript to your website.

The free plugin allows you to insert code seamlessly in several ways. It offers utility with various applications including Facebook Pixel, Google Analytics, custom CSS, and more.

Here is how you can add custom JavaScript to your WordPress Site using a plugin:

1. From the admin dashboard, navigate to the Plugins tab, and click on the Add New option. Then, search for “Head & Footer Code” and click on Install Now.
2. After installing the plugin and activating buttons, go to the plugin’s settings by going to the Tools section and selecting Head & Footer Code. You will find three sections here- header, footer, and body.

3. You can simply add your WordPress custom JavaScript into any of these boxes depending on your requirements. Hit the Save Changes button once you’re done and the code will then load for every page of your site.

As you see, this method is extremely beginner-friendly and does the trick in three simple steps. Additionally, it also allows you to add other types of code and custom CSS effectively. However, you will be installing a third-party plugin that might not be suitable for you if you’re trying to keep your extensions to a minimum.

Fix #2: Add the code to your functions.php file

This method involves using the built-in functions and editing the functions.php file. In other words, you will be manually uploading the scripts to your server.

It is advisable to create a child theme before going through with this method. This ensures that you’re able to update the parent theme safely. In addition, you are also advised to take a backup of your site in case something goes wrong.

We’ll be using the IS_PAGE function in this method. Additionally, you can use conditional logic to apply the custom JavaScript to selected pages or posts. Follow the steps given below to add custom JavaScript to your website using the functions.php file:

1. Find and launch the functions.php file and paste the following code snippet in it:

   function ha_custom_javascript() {
      ?>
          <script>
            // add your code here
          </script>
      <?php
   }
   add_action('wp_head', 'ha_custom_javascript');

   The code snippet given above will add custom JavaScript to your header.

2. To apply custom JavaScript to a single page, you can use the following code.

   function ha_custom_javascript() {
    if (is_single ('post_id')) {
      ?>
          <script type="text/javascript">
           // add your code here
          </script>
      <?php
    }
   }
   add_action('wp_head', 'ha_custom_javascript');

   Note

   Note: You need to replace ‘post_id’ in the code with the post ID number to which you want to add the code. You will find it in the URL after “post=” of a particular post when you go to edit it through the admin dashboard.

3. Once you’ve replaced the ID number and added your custom JavaScript, save the file. You will see that the changes will be reflected on your website. The same process can be repeated for a single WordPress page.

This method offers you the flexibility of adding custom JavaScript to specific pages or posts or the whole website. It also allows you to avoid installing any plugins. The only downside of this method is that it may not be suitable for website owners who do not have a technical background.

• Check out our recommendations for the best wordpress web hosting.