Add JavaScript to WordPress: How to do It easily

Add JavaScript to WordPress: How to do It easily

People who use WordPress should learn more about JavaScript and how it is used for a website. To add JavaScript to WordPress, you need to find the most appropriate way to implement it for your own website.

Research holds great importance, as a wrong implementation of JavaScript could lead to consequences that will be troubling to fix.

Table of contents

What is a WordPress JavaScript?

A WordPress JavaScript is a way to add extra functions to a website without slowing it down. JavaScript represents a programming language which runs on the user’s browser. This type of programming offers developers the chance to add all sorts of functions to their sites, such as embedded video players, calculators or other services. The piece of JavaScript code simply needs to be copied and pasted into the website’s code.

Why you should add custom JavaScript in WordPress?

There are multiple reasons why you should add JavaScript to WordPress, but in order to do that, you must be aware of how the website is coded. When coding a WordPress website, there are three elements that may help you:

  • HTML
  • CSS
  • JavaScript

To create a very solid base for the WordPress site, you can use HTML and CSS. Even though they are great to lay the foundation of the website, they are limited in terms of altering the behavior of the site. When you want your site to act in a specific way, you can use JavaScript to do one of the following actions:

  • Changing, hiding or displaying certain HTML elements on the website
  • Adding values to CSS variables, as well as running operations that are more complex (merging variables or making an element interactable by clicking)
  • Changing the layout of the WordPress theme by adding another code block within it
  • Modifying a certain functionality of a WordPress plugin
  • Enhancing the website with content that is dynamic (animations, videos etc.)
  • Including an external element into the website (third-party APIs)

All these – and more – can be done by using JavaScript.

Using Insert Headers and Footers to add JavaScript

When adding JavaScript to WordPress, you need to simply copy and paste the block of JavaScript code to the website. This simple action adds a third-party tool to the website, be it a video player or other element. These code snippets have added either right under the head section or right before the </body> tag in the main code of the website. This influences where the element will be placed. To activate this plugin which is called Insert Headers and Footers, you must install it first.

In order to activate it after installation, you simply have to reach Setting and then the Insert Headers and Footers page. There are two different boxes that you can check – one for the header, one for the footer. Once you activated this plugin you can just paste the JavaScript code snippet and click on save. Because the plugin is activated, the code snippet you pasted will automatically load for all the pages of your website. This is the most basic knowledge you need to have to add JavaScript to WordPress.

Disabling WordPress filtering

When using JavaScript in WordPress, you should also disable blocking script tags from JavaScript. This setting can be found in wp-config.php, which is located in the root web directory. In order to enable custom tags, add this line of code there:

define( 'CUSTOM_TAGS', true );

Once you move to the functions.php page, copy and paste this code snippet in your base code:

function add_scriptfilter( $string ) {global $allowedtags;$allowedtags['script'] = array( 'src' => array () );return $string;}add_filter( 'pre_kses', 'add_scriptfilter' );

Extra tip: using this method means that you disable the security feature on your website, for any user permission level. Use this method only if you deeply trust your authors. Enabling the script tag is sometimes risky this way.

Learn how to Use Script n Styles plugin

You can add JavaScript to WordPress by using a plugin. Normally, you would have to load JavaScript within the <head> and </body> tags. In order to load JavaScript globally, a plugin can be used. A responsive one is Script n Styles. You can either include scrips on the entire website or include them at the page or even post level. You can also modify user permissions. Authors can publish posts and make the JavaScript active and contributors can save the posts without actually publishing them.

Use Advanced Custom Fields

If you wonder how to add JavaScript to WordPress the easiest, this plugin might be the solution. Once you install and activate the plugin, you can access the Custom Fields option under the administrative menu. Then, you can click on Add New. The purpose is to add a field that administrators can access and that can embed a JavaScript source file or JavaScript code within the tags.

  • The first step is naming the Field Group. This can be done by enabling a rule that displays this option if the user who logs in as an Administrator. This means that only the administrator can add these on the site.
  • The fields should be displayed beneath the content area, which means you select Standard when it comes to selecting the style of the Field Group. Set the formatting of the field to “Convert HTML into tags”. This will result in a good output, otherwise, it might translate badly.
  • Add the following code within header.php:

<?php the_field(‘header_script'); ?>

This should be added before </head>.

<?php the_field(‘footer_script'); ?>

This should be added before </body>.

  • Save the template files, update the page and click Publish.

The page will be published with the added JavaScript on it. The Advanced Custom Fields are an appropriate option if you want more functionality for users, pages that are already published and so on.

Ending thoughts on how to add JavaScript to WordPress 

These tips should be enough to teach you how to add JavaScript to WordPress in an easy way, without encountering any issues. After you do it once, the second time will be much easier and less time-consuming.

If you enjoyed reading this article about how to add Javascript to WordPress, you should also read these:

Up Next:

Tips on writing a great WordPress tagline and best practices

Tips on writing a great WordPress tagline and best practices