How to Easily Add JavaScript in WordPress Pages or Posts Using Plugin

How to Easily Add JavaScript in WordPress Pages or Posts Using Plugin

If you want to enhance your WordPress site front-end functionality, you will need to add JavaScript code to your WordPress site — whether you are using a third-party library or a custom JavaScript code.

By default, the WordPress admin panel does not let you add code directly to your website posts or pages. This article will show you how to easily add JavaScript to WordPress pages or posts using a plugin.

What is JavaScript?

JavaScript is a powerful programming language that runs not on your server but the user’s the web browser. So, JavaScript is client-side programming that allows developers to do many cool things without slowing down your website.

For example, if you want to embed a video player, add Parallax scrolling effects, or some other service and features, then you will be often asked to copy and paste a JavaScript code snippet into your website.


Adding JavaScript to your WordPress using a plugin is the recommended method when you:

  • don’t want to edit theme files directly.
  • Want to add theme-independent JavaScript that you can keep even when you decide to switch to a new WordPress theme.

You can use different kinds of plugins to add custom JavaScript to your WordPress site.

Add JavaScript Site-Wide Using WordPress Insert Headers and Footers Plugin

However, there is a less intrusive alternative. “Insert Headers and Footers” is an easy-to-use plugin to add custom JavaScript to WordPress without modifying your theme.

First, you need to install and activate the “Insert Headers and Footers” WordPress plugin.

First, let’s install the plugin from the WordPress admin dashboard:

  • Log in to your WordPress site.
  • Go to Plugins > Add new,
  • Search for the “Insert Headers and Footers” plugin.
  • Click “Install Now” and activate the plugin.

 

Add JavaScript Site-Wide Using WordPress Insert Headers and Footers Plugin

Upon activation, you need to visit the Settings » Insert Headers and Footers page from the admin dashboard menu. You will see two boxes,

  • Scripts in Header (load inside Header tag)
  • Scripts in Body (load inside Body tag)
  • Scripts in Footer (load before closing Footer tag)

Add JavaScript Site-Wide Using WordPress Insert Headers and Footers Plugin

You can now paste the JavaScript code you copied to one of these boxes and then click on the “Save” button. Use the location that matches your needs better.

Now, Insert Headers and Footers plugin will automatically load the JavaScript code you added on every page of your website.