So you want to add a Javascript snippet somewhere on your website, or maybe on a webpage or a post? It’s not an easy task to achieve because no matter what kind of web development platform you are using, you just can’t add a Javascript code snippet dorectlt in your website or posts. Generally these kinds of errands are taken care of by the software development companies, that is if you have collaborated with dedicated developers to build your site in the first place. But if you are a novice at web development or are a non-technical person finding an easy way through then this article is just right for you.
Table of Contents
What is JavaScript?
Developers know that Javascript is a type of programming language that runs on the user’s browser and not on the server. Also, it enables you to do a lot of cool stuff without affecting the performance or speed of your website.
For example, if you want to embed a video player, a calculator or any other third-party services, then you have to copy-paste a Javascript code snippet on your website. A typical JS code snippet would look something like the following:
<script type="text/javascript">
// Some JavaScript code
</script>
<!-- Another Example: --!>
<script type="text/javascript" src="/path/to/some-script.js"></script>
But when you add and try to save this snippet on your web development platform like wordpress, it will always get deleted. And that’s why in this article, we will go through a series of steps for you to follow so that you can easily add a Javascript code snippet on your wordpress website. We will go through two types of methods wherein first we will use a tool to add the snippet whereas in another we will see how to do it manually.
Method 1: How to Add JavaScript on Your WordPress Site Using WPCode
As we already discussed, if you try to copy-paste a code snippet into wordpress, it will automatically get deleted when you save it. Instead, you have to use some kind of tool or a plugin to accomplish the task.
Generally, you have to add this Javascript snippet in the footer or the header section of the wordpress website so that your code is loaded on your website. Let’s say if you install Google analytics, its code will run on every web page to track the visitors. One way to do it is to manually add the code in header.php or footer,php files but as soon as you update your website or change the theme, your code will be overwritten.
And that is the reason why you have to use a tool or plugin to add your JS code snippet so that you don’t have to install it again and again on your site every time you update or make changes to it. In this section, we will be using WPCode to add the JS code snippet. It is one of the powerful code snippet plugins for wordpress that enables you to customize the code from any section of your website without charging a single penny.
First of all you have to download and activate your WPcode plugin. Once you have activated WPCode, visit Code Snippets » Headers & Footer. There you can see three different fields namely header, body and footer.
You can use these options to save your Javascript code snippets. Once you save your code here. WPCode will load it automatically to wherever you want it to be, may it be pages or posts. For that, you have to go to Code Snippets » + Add Snippet, and then click on the button ‘create your own’.
This section will allow you to create your own customized snippet where you have to either write or paste your code in the Code Preview box and give it a suitable title too. After that, you have to click on the code type which will provide you with a dropdown menu from which you have to choose a JavaScript snippet.
Once you have selected that, scroll down in the create your own snippet to find out the ‘Insertion’ section. From there, you have to pick out a location to place your code on the website from the dropdown menu. You will be provided with several options categorized in ‘Page, Post, Custom Post Type’ to select where in the web page or the post would you like your code snippet to appear.
Now that you are using the WPCode to insert the code snippet, you have to add it before or after the paragraph. For that, you will be able to choose specifically after or before which paragraph in the post you want your JS code snippet to appear. For example, if you add the number 1 in the field called ‘Insert Number’ then your JS code will appear before or after the first paragraph of the post. Same goes for number 2 and so on.
Once that’s taken care of, all you have to do is click on the toggle that is located on the top of your screen to switch to ‘Active’ and then you have to click on the ‘Save Snippet’ button that lies right beside it.
That’s all it takes to make your Javascript code snippet go live on wordpress website using WPCode plugin.
Method 2. Adding JavaScript Code to WordPress Manually
You can use this method to add your javascript code snippet in the wordpress website files manually. First, we will see how to add your code into the header of the wordpress site. For that, you have to copy your code snippet and then add it in the functions.php.
function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');Adding JavaScript code to a Specific Post
Now, if you wish to add your code in just one post on your website then you have to add some conditional logic into your javascript code. Take a look at the following code for reference.
function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');Now if you add the above code then your website will only run it if the post ID matches with the ‘5’. Now, of course, it goes without saying that you have to replace the ‘5’ with the post ID for which you want this code to be active. If you don’t know the post ID then it’s easy to check out. Just open up the post where you want to run your JS code and there you will find the post ID in the URL of the page.
Adding JavaScript code to a Specific Web Page
Similar to the post, if you want to add your code snippet to any specific page of your wordpress site then you will have to add the conditional logic for the same in your javascript code. For example:
function wpb_hook_javascript() {
if (is_single ('5')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');As in the case of posts, the above code will run only on the page with page ID mentioned in the code. So you have to mention the page ID in the place of ‘10’ in this code. You can find the page ID for the web page where you want to run code snippets by looking at its page URL.
Adding JavaScript code to a Specific Post or Page in the Footer
Until now, we saw how you can add the javascript code snippet into the header of your website’s page or post. Here we will learn to add the javascript code snippet in the footer of your website.
function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');This code snippet has to be hooked into the wp_footer instead of wp_header. You can add the same conditional logic to the javascript code if you want it to add to any specific post or pages by referencing the above examples.
Final words
The methods we used in this article are for beginners and the website owners. So if you’re learning wordpress or web development then you can use these methods to add your javascript code snippet to your website.
I hope this article helps you with what you come looking for. You can manually add the code snippets if you are good at coding and if you are a non-technical person, or just want to save time and efforts then you can simply use the plugins like WPCode to add the Javascript code snippets to the web pages and posts on your site.
