Wednesday, May 18th, 2022

How to Add Custom JavaScript to WordPress (3 Ways)

WordPress is one of the best ways to enhance the front-end functionality of your website by adding custom JavaScript. However, figuring out how to do this can be tricky, especially if you’re used to working with the customizer to insert custom CSS.

Fortunately, there are a few different strategies you can use depending on your level of experience and what you’re trying to achieve. Once you know what your options are, you’ll be able to choose the custom JavaScript solution that best suits you.

In this post, we’ll walk you through three methods you can use to add custom JavaScript to your WordPress site, as well as discuss the pros and cons of each option. Here are three methods we’ll cover – you can click to go straight to a specific method:

  1. Use header and footer code plugin (Simplest option for non-technical users,
  2. Add code to functions.php file
  3. Add code to header (Using the wp_enqueue_script function or the wp_head hook,

Let’s jump in!

1. Install a plugin such as Head & Footer Code

One of the easiest ways is to use a WordPress plugin to add custom JavaScript to your website. For example, the header and footer code is a good tool:

This free plugin enables you to insert code in a variety of ways. You can use it for the Facebook Pixel, Google Analytics, custom CSS, and more.

To get started, add the plugin to your site by navigating to Plugins → Add New From your admin dashboard, then searching for “head and footer code”.

once you click on Install now And Active button, you can find out the setting of the plugin by going to Tools → Head and Footer Code, There are three boxes on this screen for the Header, Footer, and Body sections:

You can enter your WordPress custom JavaScript in any of these boxes. When you’re done, choose save Changes button at the bottom of the screen. The code will then load on every page of your site.

Pros and Cons of Using a Plugin

The main advantage of using a plugin is that it is a beginner-friendly option. You don’t need to worry about editing your theme’s files. The Head & Footer Code plugin can also come in handy if you’re looking for an intuitive way to add other types of code and custom CSS.

However, the downside of this method is that it involves installing a third-party plugin, which some site owners try to avoid. If you want to keep your extensions to a minimum, it’s better to use one of the other methods. Furthermore, the plugin is designed for site-wide JavaScript changes rather than for specific pages or posts.

2. Use your functions.php file

Another way to add WordPress custom JavaScript to your website is by using built-in functions and editing hooks. task.php file. This approach involves manually uploading the script to your server.

Before we begin, we recommend creating a child theme. This step helps ensure that you will still be able to update the original theme safely. You should also back up your site in case something goes wrong.

This method involves using the IS_PAGE function. You can add conditional logic to apply your custom JavaScript to a single post or page.

To get started, locate and open your task.php file, then copy and paste the following code snippet:

function ti_custom_javascript() {
    ?>
        <script>
          // your javscript code goes here
        </script>
    <?php
}
add_action('wp_head', 'ti_custom_javascript');

This code will add JavaScript to your header. To apply it to a single position, you can use the following:

function ti_custom_javascript() {
  if (is_single ('3')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'ti_custom_javascript');

Note that you will need to replace 3 In above example with post id number in which you want to add code. To find that number, navigate to Posts from your admin dashboard and then click . click on Edit, In the URL of the browser bar, the ID number is the number next to “post=”:

The post ID of the WordPress URL in the browser bar.

After changing the ID number save your file and add your custom JavaScript in the specified field. You can repeat the same process for a single WordPress page.

Pros and cons of editing your tasks. php file

One benefit of editing your task.php The file is that you don’t need to install any other plugins. You can also use this technique to add features and functionality to both your theme and WordPress. For example, this method can insert JavaScript into a post or page, or all pages.

The only downside to this method is that it involves working with code and editing your site’s files. Hence, it may not be the best option if you are not experienced in this department.

There is a way to insert custom wordpress javascript <script> Tag yourself directly header.php file. However, this method is not recommended. This can interfere with the loading sequence of WordPress and cause conflicts with other themes and plugins.

If you want to add custom JavaScript to all of your pages via the header of your site, you can go about it in two ways. you can edit task.php file and use wp_enqueue_script function, which creates a normal function. Alternatively, you can use wp_head action hook.

Let’s take a look at both the options…

Add Javascript to your header using the wp_enqueue_script function

First, you’ll want to upload your custom JavaScript file to your template’s directory. You can do this through a File Transfer Protocol (FTP) client or a file manager.

Navigate to your site’s Templates folder (wp_content → Theme → [yourtheme]) Then, select Pour out,

WordPress custom JavaScript file uploaded to a templates folder.

Note the exact file path of this file. For example, it should be something like “https://www.yourdomain.com/wp-content/themes/twentytventyuone/js/myjsfile.js”.

Next, locate and open your task.php file, then copy and paste the following code snippet:

function ti_custom_javascript() {
wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/examplescript.js');
}
add_action('wp_enqueue_scripts', 'ti_custom_javascript');

Be sure to replace the template URL with your own. Lastly, save your file.

add custom javascript using wp_head hook

you can also use wp_head Action hook for adding custom JavaScript to your header via inline script. Again, this method is not preferable as it can create too many scripts. However, it is better to put the script directly in your header.php file.

This method, which you can also use for the footer, uses action hooks to add inline scripts to your site. Whereas wp_enqueue_script The function queues up custom scripts, the wp_head outlook prints the script in your header template (and footer, if you use wp_footer hook).

To get started, navigate to your task.php file, then copy and paste the following:

function ti_custom_javascript() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');

note that wp_head The hook only activates on the front end of your website. This means that any custom JavaScript you add using this method will not be visible in the admin or login areas. However, if you want to add JavaScript to those fields, you can use admin_head And login_head action hooks, respectively.

Advantages and Disadvantages of Adding JavaScript to Your Header

wp_enqueue_script The function is preferred among developers because it prevents conflicts that may arise with other options, such as adding scripts directly to you. header.php file. Furthermore, using this method does not create any dependent scripts.

The main problem with adding custom WordPress JavaScript to your site’s header is that it can cause problems with other plugins that load their own scripts. This setup can cause many scripts to be loaded more than once, which can hamper the overall speed and performance of your website.

Get started with WordPress Custom JavaScript

By default, WordPress does not allow you to insert JavaScript code snippets in your pages and posts. Fortunately, some go-arounds can add custom JavaScript to your WordPress without breaking your website. The best approach depends on your comfort level with editing your site files and where you want to apply the script.

As we discussed in this post, there are three ways you can add WordPress custom JavaScript to your website:

  1. Install a plugin such as Head and Footer Code.
  2. use your task.php File for adding custom JavaScript to a page or post.
  3. add javascript to your header using one of these wp_enqueue_script function or wp_head hook

Now that you know how to add custom JavaScript to WordPress, you might be interested in our other guide on how to add custom CSS to WordPress.

Do you have any questions about adding WordPress custom JavaScript to your website? Let us know in the comments section below!

free guide

5 essential tips to increase speed
your wordpress site

Reduce your loading time by 50-80%
Just by following simple tips.

Source link