How to add Javascript code to WordPress page

Add Javascript code to WordPress is important to add more dynamics functionality to pages as Javascript is one of the powerful programming languages which is used to create interactive components for web applications. Javascript codes are usually included in the js files and run directly on the webpages.

If you want to add some interactive features to your WordPress website, there was a lot of JS library to use, or need to write the script of these features in javascript or depending on the jQuery library and then add it inside your WordPress. So in this article, you will learn how to add Javascript code to the WordPress page in the right way as by default WordPress doesn’t add code direct code on pages or posts.

What is Javascript Langauge?

Javascript is one of the powerful programming languages and one of the top popular languages depending on StackOverflow survey 2020 which runs to create an interactive functionality on the user-side (browser) not the server-side.

Why adding javascript code in WordPress?

You can use javascript codes to add extra interactive features to your WordPress website like colorful, interactive buttons, adding moving bars for download or upload, adding some moving shapes during the download of the website, and a lot of features like that. These interactive features improve the user experience of your website and make it more comfortable for the visitors.

You can use it also to create a method of integration to a third-party service and you can put code in the WordPress header or WordPress footer.

There are many plugins that achieve this mission to you and there are other methods easier to customize your website.

The problem in javascript and WordPress is that if you tried to add javascript codes to WordPress, it won’t be saved whatever you did. So we will explain later.

Method #1: Add Javascript code to WordPress page manually

If you want to add a javascript code to all the WordPress pages and posts, you need to add it in the header or the footer of the theme as a hard code.

You can copy and paste the javascript codes in the file of function.php using the wp_head and wp_footer Action hooks But be aware that these codes will be changed and removed if you changed or updated your theme also you shouldn’t add code directly on header.php or footer.php

You can search for the codes for the functions that you need to add on our snippets or on the StackOverflow and a lot of developers will help you for free.

Steps to add Javascript code to functions.php:

1. Open the WordPress admin panel then go to Appearance > Theme Editor
2. Open theme functions.php file, if you work localhost open the same file using any code editor IDE
3. Add the code at the bottom of the file using WordPress action hooks wp_head or wp_footer.
4. Save the changes.

Other than the previous method is not recommended so you need a plugin to add javascript codes.

Method #2: Add Javascript code to WordPress page using WordPress plugins

One of the easiest ways to include javascript code by installing a WordPress plugin using simple

Steps to add Javascript code using WordPress plugins:

1. Open the WordPress admin panel then go to plugins> add new
2. Search for plugin like ” Head and Footer Scripts Inserter Plugin”
3. Installing plugin
4. Active plugin.

Plugin Option #1: Head and Footer Scripts Inserter Plugin

It’s easy to use the plugin. It gives you the ability to add codes (HTML, CSS, JS, and others) to your theme on WordPress and it will be accepted it was right of course.

Using this plugin, you can add javascript codes directly to your WordPress without the need to have an external editor.

The plugin works independently of the theme, so you can use it with any theme. It makes all the changes free from any update or change in the theme.

The code editor is supported by CodeMirror. This code editor has options such as syntax highlighting, line numbering, and more. This plugin has more useful features.

Plugin Option #2: Embed Code plugin

It’s one of the professional plugins that gives you the ability to add codes to your theme on WordPress. It’s easy to use. You can use it to add codes globally for all posts and pages on the website and locally on each individual post or page. You can add codes related to many things in addition to adding interactive features like:

• Google Analytics tracking code.
• Site verification snippets.
• Typekit font scripts.
• Facebook tracking pixel.
• Live chat integration.

Screenshot from the inside editor for Embed Code:

Plugin Option #3: Header and Footer Scripts

It allows you to embed codes in many programming languages inside WordPress easily without any problems or conflicts.

You can also choose to display the post embed code on the frontend, allowing other people to share your content more easily, with the built-in shortcode or content block.

Using the previous plugins, you can use the functionalities of the codes as you want and customize your theme to make it more usable and attractive to your customers.