How to Insert JavaScript into WordPress Pages and Posts?

3 min


WordPress comes with the ability to block the insertion of scripts into the content of your website directly. While some developers or website owners find this perturbing, it is not any development or design flaw. It is merely a security feature that protects your website from hackers.

WordPress mainly separates content from design and thus allows formatting at the theme level to prevent website security. But since JavaScript is already a part of WordPress, it allows you to change content, layout as well as apply styling.

JavaScript is a programming language which runs on the front end, which indicates that it communicates with the users directly through web browsers. Since JavaScript runs on the web browsers, it has the potential to execute much faster than any other programming language. When you use JavaScript, the requests are processed by the browsers and immediately render the output without ever communicating with the server.

However, there is one downside of using Javascript that a user can disable JavaScript from its browser which makes your website to malfunction. But the many benefits of using this programming language overpowers its one downside.

Reasons to add JavaScript to your WordPress website,

  • To add audio and video players that require script to run on the web page
  • To create calculators and interactive pages that require integration of third party scripts within the website.
  • Lead generation and subscription forms usually possess remotely loaded scripts.

Two problems may occur if you try to insert JavaScript directly to your WordPress website.

Translation problem:

Adding JavaScript directly into your website bring out translation problems. As an instance, when you are building a lightbox gallery plugin, a developer needs to pass arguments such as Image X of Y, Previous, and Next. There is no way of performing the task without displaying the inline JavaScript in the header section.

Duplicate Code:

Let’s picture it this way; you are developing plugin where you need to add jQuery and it works when you display the proper script tag in the header section. However, what if your another plugin requires the same jQuery? For developing another plugin with the same jQuery code, you will need to write the same code and execute it again. This leads to writing duplicate code and increasing the bandwidth of downloading the code twice.

Method 1: Using advanced custom fields

Using advanced custom fields

Advanced Custom Fields is one of the most popular WordPress plugins that enables website owners to add custom fields without having to touch even a single line of code.

In order to get started, you need to download and install the plugin on your website. Once installed, you will see a new menu option in your dashboard namely “Custom Fields”.

Click Custom Fields → add new. You will be redirected to a new page where you will be asked to fill your Field name. You can keep any name you want. You can choose the user type who would have the access to this custom field and would be allowed to use it.

There are various other options under the Options sections where you can select the section where you want to display the fields as well as the style type.

Now you would require adding Header and Footer scripts to display the script properly on the page. Make sure you set the formatting option as “Convert HTML into tags”.

Write the desired JavaScript code you want to insert into your pages or posts and paste it in the right places and save the template and hit publish.

Method 2: Using a Plugin


There is another way to inserting JavaScript within the posts and pages of your websites that is by using a plugin. Though there are myriad of plugins available today for adding JavaScript to your website, Scripts n Styles has proven to be extremely resourceful and helpful.

Scripts n Styles plugin enables website owners to add independently JavaScript, Classes, and custom CSS directly to the website pages and posts. It also allows you to add classes to the post container and the body tag. The plugin comes with a Global Settings Page that allows you to write the entire blog.

WordPress is a great platform, and when combined with JavaScript, it can do wonders to your website provided you follow the best practice to do the job.Do you know that you can buy/sell websites, web-based businesses or domain names on Worth Of Web Academy?

Thanks for reading!

  • Share: If you know someone who might find this helpful, please share it.
  • Related Posts: Check recommended posts from our blog below.

Like it? Share with your friends!