If you are wondering how to easily add JavaScript in WordPress pages and posts, don’t ignore this article. Our blog will help you answer this question through many useful methods below. Let’s dive into the blog and choose the best one.
What is JavaScript?
JavaScript is a scripting or programming language that enables you to implement various functionality on the web page. Each web page not only displays static information for you to look at but also runs and does a lot of things at the same time such as displaying timely content updates, interactive maps, scrolling video jukeboxes, and much more. However, it still doesn’t slow down your website.
How to add JavaScript in WordPress Pages or Posts?
There are different ways to add JavaScript to WordPress posts and pages. However, to help you save much time, we will share with you the three easiest ways including using WordPress plugins and code. Now, let’s explore the following methods.
Method 1: Using Insert Headers and Footers Plugin
Insert Headers and Footers plugin is one of the useful WordPress Header Plugins that allows you to add code without editing your theme files such as Google Analytics, Custom CSS, Facebook Pixel, and much more
In order to use this plugin, first of all, you need to install and activate it. You can access our tutorial on how to install a WordPress Plugin for beginners.
After you have installed the plugin yet, let’s navigate to the Settings> Insert Headers and Footers page.
On the Insert Headers and Footers page, there are three boxes for header, body, and footer sections.
Now, it’s time to paste the JavaSript you copied into one of these boxes, and don’t forget to click on the “Save” button.
The plugin will help you load the code that you inserted on every page/post of your website.
Method 2: Using Code Embed Plugin
Code Embed Plugin is also a simple WordPress code plugin. This tool enables you to embed code in your post but you don’t need to edit the content. This tool is really helpful for embedding third-party scripts and much more.
Firstly, you need to install and activate it. Similarly, you can see our detailed guides on how to install a WordPress plugin.
Once the plugin has been installed, you can start editing the post or pages where you want to add JavaScript. After that, it is necessary to enable custom fields. By default, the custom fields option is hidden.
In order to view this option, let’s take a look at the Screen options menu in the top-right corner of the screen. Then click on it to expand the screen options menu.
After that, let’s tick on the Custom Fields option.
Now, scroll down the screen, you will see the ” Custom Fields” meta box displayed below the content editor.
Let’s click the “Enter new” link.
Immediately, the custom field name and value fields will appear. In the first field, you need to provide a name with the “CODE” prefix and then paste your JavaScript code into the value field.
Next, remember to click the “Add Custom Field” button to save your custom field.
You can also use this custom field to embed the JavaScript code into any position in the post/page.
{{CODEmyjscode}}
Then, don’t forget to click the “Update” or Publish” button to save your changes and make your JavaScript code live.
Method 3: Using code
The third method is more complicated than previous methods because you need to add code to your WordPress files.
Initially, you need to copy the code below and then add it to your functions.php or in a site-specific plugin.
function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
- Adding JavaScript to a specific WordPress post
If you would like to insert JavaScript to a WordPress post, you only need to add conditional logic to the code.
You can refer to the following code snippet.
function wpb_hook_javascript() {
if (is_single ('227')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
The example code above only runs JavaScrip where the post with ID number shows “5”. Therefore, you need to replace the “227” with your own post ID.
In order to find the Post ID, you need to open the post where you want the JavaScript to run. Then, have a look at the URL of the page, you will find the post ID.
- Adding JavaScript to a special WordPress page
On the other hand, if you only want to add JavaScrip to a particular WordPress page, you need to add conditional logic to the code.
The following code snippet below is an example.
function wpb_hook_javascript() {
if (is_page ('115')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
It is also similar to the code above. So you need to ensure that you will replace the “115” in the code with your own page ID.
The process of finding the page ID is not different from the method above. You only visit the page you want the Javascript to run and find the page ID in the URL.
- Adding JavaScript to a Specific WordPress Post or Page Using Code in the Footer
The following code will be used when you want the JavaScript to run in your site footer instead of the header.
Let’s add the following code snippet to your website.
function wpb_hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
In addition, you are able to add conditional tags to add JavaScript to specific posts and pages which is similar to the examples provided.
You can also add conditional tags to add javaScript to specific posts and pages like the examples above.
In conclusion
Which is your favorite solution? These are completely simple methods that are suitable for beginners. Hopefully, through this blog, you can easily add JavaScript in WordPress pages or posts. If you have any questions, let us know by leaving a comment below, we are ready to support you.
Moreover, you can visit our Free WordPress Themes to explore tons of gorgeous, cutting-edge, responsive designs for your website.
- What are joomla tags and how are the used? - November 3, 2024
- Why and how to create hidden menu items in Joomla? - October 31, 2024
- How to publish smartslider 3 to joomla 4? - October 31, 2024
Recent Comments