By default, WordPress does not let you add code directly in your posts. But there will come a point when you want to add your own unique functionality interactivity to your WordPress. This is when JavaScript comes in handy. You can include any feature on your site by adding JavaScript to your WordPress site. In this guide, we will show you two methods you can use to add custom JavaScript to your WordPress site. But before that, we’ll walk you through what JavaScript is and why you may add JavaScript.
What is JavaScript?
JavaScript is a popular programming language that is commonly used for adding analytics to your website. It runs on the user’s browser but does not run on the server. Just like HTML and CSS, JavaScript has always been a part of WordPress to extend the theme’s features. But it isn’t as simple to implement as HTML and CSS. JavaScript has its own ecosystem. There are three standard terms associated with Javascript, AngularJS, jQuery, and Node.js. AngularJS is a JavaScript Framework, JQuery is a JavaScript Library, and Node.js, a runtime environment.
Sometimes JavaScript can make your website load slower. Also, incorrect code placement can hurt the site’s performance or even break it. Though, you don’t have to learn the entire programming language to use JavaScript in WordPress. You have to be careful about how you write the code, where and how you add it to your WordPress site. There are many ways to add JavaScript to your site. Based on your goals and coding knowledge, you can choose the technique that is best for you.
Why You May Want to Add Custom JavaScript to your WordPress Website?
As we said earlier, JavaScript is used to add dynamic functionality to your website. There are typically many reasons why you want to add JavaScript to your WordPress site. With JavaScript, you can apply styling, layout, and content changes outside the boundaries. This could include anything like command-line tools to a real-time feed of information. Even if you’re a beginner and just setting up a simple WordPress website, you should make yourself familiar with JavaScript for improving your site design in the future. So, let’s look into why should add JavaScript to your site.
- By adding JavaScript you can change the layout and design of your WordPress theme. You can also alter or enhance the functionality of plugins.
- When you are using Google Analytics or a third-party API to track your website traffic, you will have to add a JavaScript tracking code to your website to collect the data. So, JavaScript help you to hook an external source or element into your site.
- You can detect the type of device your visitors are using to access your website so that the proper version of the site can be served.
- To create popups that prompt your user to subscribe to a site, or to be notify them about new offer or content you need to add JavaScript.
- JavaScript enhance your site with dynamic content like sliders, animation, video players, drop-down or hover effects, calculators, and other interactive elements.
- It adds value to CSS variables and run complex operations on them like merge variables or provide a response after an action is taken.
However, while you have a number of reasons to add custom JavaScript to your WordPress site, there are also a number of ways from using plugins to attaching custom scripts to different action hooks in which you can implement it. You can use a few different strategies depending on your experience level and what you’re trying to achieve. Now, we will introduce you to two different methods you can use to add custom JavaScript to your WordPress site.
Method 1# Add Custom JavaScript Using Plugin:
Using plugins is the easiest way to add JavaScript to your WordPress site. But there are two different types of plugins for adding JavaScript on your site, one is for adding Javascript on your whole site and another is for adding JavaScript on individual pages. In this section, we will show you tutorials for both types of plugins.
Add Custom JavaScript on Your Whole Site:
If you want to add JavaScript code to every page of your WordPress website then Insert Headers and Footers is the best option in the market. It’s free, lightweight, and beginner-friendly. As the name says, the plugin will help you add scripts to the header and footer of your website. It has a simple user interface with just three text areas—one for the header, one for the body, and one for the footer scripts. You can insert any kind of script into the two input fields.
To start with the plugin, the first thing you need to do is Install and Activate the plugin.
Once you have activated the plugin, you can locate the plugin’s settings by going to Settings > Head & Footer Code. On this screen, there are three boxes for the header, footer, and body sections:
Simply copy and paste your code to either on the header, body, or footer section of your website. Then, click on the Save button to finish and save.
Now you can say why I need a plugin to add JavaScript to the header and footer of my website, I can do that by editing my theme’s header and footer? Yes. You are right. You can edit and add JavaScript code to your WordPress theme’s header.php or footer.php files. But when you update your theme WordPress override the code and delete all the edits you made on the theme file. So, editing and adding the header and footer with the plugin is the safest option. Particularly, when it’s doesn’t cost a penny.
Add Custom JavaScript on Individual Page or Post:
Adding all of your JavaScript on every page or post (where it is not required) can slow down your website. Also, sometimes you might need a specific style for a specific page or post but the previous plugin option doesn’t allow you to do so. For doing so, you need a plugin that will allow you to add your JavaScript to the specific page or post where you want. Code Embed plugin allows you to add your custom JavaScript on each page or post.
To get started, go to Plugins > Add New and search for the Code Embed plugin. Install and Activate the plugin.
After activation, go to the page or post you want to add custom JavaScript and select Custom Fields.
To find the Custom Field option, click on the three-dot menu in the top-right corner of the screen then scroll down and select Options from the menu.
After that, you will see a pop-up on the screen where you need to check the Custom fields option under the Advanced panel‘s section and click on the Enable & Reload.
Now, you will see the Custom Fields meta box below the post editor. Click on the Enter new link there and the custom field name and value fields will appear.
To avoid conflicts with existing WordPress codes, name the custom field with the CODE prefix and paste the JavaScript code into the value field. Then, press Add Custom Field button to save your custom field.
Now, you can use this custom field to embed the JavaScript code where on the page you’d like the JavaScript code to execute.
Method 2# Add Custom JavaScript Manually:
If you don’t prefer using plugins, there is another method for adding WordPress custom JavaScript to your website. In this method, you need to add your custom JavaScript manually on your functions.php file and upload the scripts manually to your server. To get started, go to Appearance > Theme Editor menu of your WordPress admin area then locate and open your functions.php file.
On Your Whole Site:
You can add custom JavaSciprt both in the header and footer of your website using this method. Now, we will show you how to add custom JavaScript to the header of your website. For that, copy the following code snippet and paste it into the function.php file.
function wpdm_custom_javascript() {
?>
<script>
// your javscript code
</script>
<?php
}
add_action('wp_head', 'wpdm_custom_javascript');
If you want to add your custom JavaScript only on your WordPress site’s footer, just copy and paste the following code snippet on your function.php file:
function wpdm_custom_javascript_footer() {
?>
<script>
// your javscript code
</script>
<?php
}
add_action('wp_footer', 'wpdm_custom_javascript_footer');
On Individual Page or Post:
If you want to add your custom JavaScript on a specific page or post then you will need to add conditional logic to the code. The code for page and post is almost the same. You just need to use (is_single) instead of (is_page).
For adding custom JavaScript on the header of a specific post or page, copy and paste the following code snippet on your function.php file:
function wpdm_custom_javascript() {
if (is_page ('8')) {
?>
<script type="text/javascript">
// your javscript code
</script>
<?php
}
}
add_action('wp_head', 'wpdm_custom_javascript');
For adding custom JavaScript on the footer of a specific post or page, copy and paste the following code snippet on your function.php file:
function wpdm_custom_javascript_footer() {
if (is_page ('8')) {
?>
<script type="text/javascript">
// your javscript code
</script>
<?php
}
}
add_action('wp_footer', 'wpdm_custom_javascript_footer');
Note: Here, 8 in (is_page (‘8’)) is the ID number of the page or post. You need to replace the ID number with the page or post the ID number to which you want to add the code. To identify the ID number of the page or post to which you want to add the script, go to the page or post, click Edit, and then pick up up the ID number of the page from the URL on the browser bar. The ID is the number next to “post=” found in the URL of the browser bar. If you have the page or post title, you can use the title instead of the ID number.
However, we don’t recommend this method, especially if you are a beginner. Because you may lose the changes you are made on your parent theme when you update them. But if you want to go through this process, don’t forget to create a child theme. Also, take a backup of your site in case something goes wrong.
The two methods mentioned above are the easy and safest methods to add JavaScript. If you have significant code experience and don’t want to add an extra plugin to your site, go for the first one. Otherwise, using plugins is also cool. We hope this article helped you learn how to add JavaScript to WordPress. For more info check, How to Add Custom JavaScripts and Styles in WordPress. Also, for more WordPress-related tutorials, visit our WordPress Tips section.
Don’t hesitate to comment below if you have any confusion or suggestion. We appreciate our visitors’ feedback.
By default, WordPress does not let you add code directly in your posts. But there will come a point when you want to add your own unique functionality interactivity to your WordPress. This is when JavaScript comes in handy. You can include any feature on your site by adding JavaScript to your WordPress site. In this guide, we will show you two methods you can use to add custom JavaScript to your WordPress site. But before that, we’ll walk you through what JavaScript is and why you may add JavaScript.
What is JavaScript?
JavaScript is a popular programming language that is commonly used for adding analytics to your website. It runs on the user’s browser but does not run on the server. Just like HTML and CSS, JavaScript has always been a part of WordPress to extend the theme’s features. But it isn’t as simple to implement as HTML and CSS. JavaScript has its own ecosystem. There are three standard terms associated with Javascript, AngularJS, jQuery, and Node.js. AngularJS is a JavaScript Framework, JQuery is a JavaScript Library, and Node.js, a runtime environment.
Sometimes JavaScript can make your website load slower. Also, incorrect code placement can hurt the site’s performance or even break it. Though, you don’t have to learn the entire programming language to use JavaScript in WordPress. You have to be careful about how you write the code, where and how you add it to your WordPress site. There are many ways to add JavaScript to your site. Based on your goals and coding knowledge, you can choose the technique that is best for you.
Why You May Want to Add Custom JavaScript to your WordPress Website?
As we said earlier, JavaScript is used to add dynamic functionality to your website. There are typically many reasons why you want to add JavaScript to your WordPress site. With JavaScript, you can apply styling, layout, and content changes outside the boundaries. This could include anything like command-line tools to a real-time feed of information. Even if you’re a beginner and just setting up a simple WordPress website, you should make yourself familiar with JavaScript for improving your site design in the future. So, let’s look into why should add JavaScript to your site.
However, while you have a number of reasons to add custom JavaScript to your WordPress site, there are also a number of ways from using plugins to attaching custom scripts to different action hooks in which you can implement it. You can use a few different strategies depending on your experience level and what you’re trying to achieve. Now, we will introduce you to two different methods you can use to add custom JavaScript to your WordPress site.
Method 1# Add Custom JavaScript Using Plugin:
Using plugins is the easiest way to add JavaScript to your WordPress site. But there are two different types of plugins for adding JavaScript on your site, one is for adding Javascript on your whole site and another is for adding JavaScript on individual pages. In this section, we will show you tutorials for both types of plugins.
Add Custom JavaScript on Your Whole Site:
If you want to add JavaScript code to every page of your WordPress website then Insert Headers and Footers is the best option in the market. It’s free, lightweight, and beginner-friendly. As the name says, the plugin will help you add scripts to the header and footer of your website. It has a simple user interface with just three text areas—one for the header, one for the body, and one for the footer scripts. You can insert any kind of script into the two input fields.
To start with the plugin, the first thing you need to do is Install and Activate the plugin.
Once you have activated the plugin, you can locate the plugin’s settings by going to Settings > Head & Footer Code. On this screen, there are three boxes for the header, footer, and body sections:
Simply copy and paste your code to either on the header, body, or footer section of your website. Then, click on the Save button to finish and save.
Now you can say why I need a plugin to add JavaScript to the header and footer of my website, I can do that by editing my theme’s header and footer? Yes. You are right. You can edit and add JavaScript code to your WordPress theme’s header.php or footer.php files. But when you update your theme WordPress override the code and delete all the edits you made on the theme file. So, editing and adding the header and footer with the plugin is the safest option. Particularly, when it’s doesn’t cost a penny.
Add Custom JavaScript on Individual Page or Post:
Adding all of your JavaScript on every page or post (where it is not required) can slow down your website. Also, sometimes you might need a specific style for a specific page or post but the previous plugin option doesn’t allow you to do so. For doing so, you need a plugin that will allow you to add your JavaScript to the specific page or post where you want. Code Embed plugin allows you to add your custom JavaScript on each page or post.
To get started, go to Plugins > Add New and search for the Code Embed plugin. Install and Activate the plugin.
After activation, go to the page or post you want to add custom JavaScript and select Custom Fields.
To find the Custom Field option, click on the three-dot menu in the top-right corner of the screen then scroll down and select Options from the menu.
After that, you will see a pop-up on the screen where you need to check the Custom fields option under the Advanced panel‘s section and click on the Enable & Reload.
Now, you will see the Custom Fields meta box below the post editor. Click on the Enter new link there and the custom field name and value fields will appear.
To avoid conflicts with existing WordPress codes, name the custom field with the CODE prefix and paste the JavaScript code into the value field. Then, press Add Custom Field button to save your custom field.
Now, you can use this custom field to embed the JavaScript code where on the page you’d like the JavaScript code to execute.
Method 2# Add Custom JavaScript Manually:
If you don’t prefer using plugins, there is another method for adding WordPress custom JavaScript to your website. In this method, you need to add your custom JavaScript manually on your functions.php file and upload the scripts manually to your server. To get started, go to Appearance > Theme Editor menu of your WordPress admin area then locate and open your functions.php file.
On Your Whole Site:
You can add custom JavaSciprt both in the header and footer of your website using this method. Now, we will show you how to add custom JavaScript to the header of your website. For that, copy the following code snippet and paste it into the function.php file.
If you want to add your custom JavaScript only on your WordPress site’s footer, just copy and paste the following code snippet on your function.php file:
On Individual Page or Post:
If you want to add your custom JavaScript on a specific page or post then you will need to add conditional logic to the code. The code for page and post is almost the same. You just need to use (is_single) instead of (is_page).
For adding custom JavaScript on the header of a specific post or page, copy and paste the following code snippet on your function.php file:
For adding custom JavaScript on the footer of a specific post or page, copy and paste the following code snippet on your function.php file:
Note: Here, 8 in (is_page (‘8’)) is the ID number of the page or post. You need to replace the ID number with the page or post the ID number to which you want to add the code. To identify the ID number of the page or post to which you want to add the script, go to the page or post, click Edit, and then pick up up the ID number of the page from the URL on the browser bar. The ID is the number next to “post=” found in the URL of the browser bar. If you have the page or post title, you can use the title instead of the ID number.
However, we don’t recommend this method, especially if you are a beginner. Because you may lose the changes you are made on your parent theme when you update them. But if you want to go through this process, don’t forget to create a child theme. Also, take a backup of your site in case something goes wrong.
The two methods mentioned above are the easy and safest methods to add JavaScript. If you have significant code experience and don’t want to add an extra plugin to your site, go for the first one. Otherwise, using plugins is also cool. We hope this article helped you learn how to add JavaScript to WordPress. For more info check, How to Add Custom JavaScripts and Styles in WordPress. Also, for more WordPress-related tutorials, visit our WordPress Tips section.
Don’t hesitate to comment below if you have any confusion or suggestion. We appreciate our visitors’ feedback.
Sidratul Sohrat