How To Add Plugins To Wordpress Blog

Do you want to add JavaScript in your WordPress pages or posts?

Sometimes you may need to add JavaScript code to your entire website or into specific pages and posts. By default, WordPress does not let you add code directly in your posts.

In this article, we'll show you how to add JavaScript in WordPress pages or posts easily.

How to easily add JavaScript in WordPress pages or posts (3 methods)

What is JavaScript?

JavaScript is a programming language that runs on the user's browser, not on your server. This client-side programming allows developers to do a lot of cool things without slowing down your website.

If you want to embed a video player, add calculators, or some other third-party service, then you will be often asked to copy and paste a JavaScript code snippet into your WordPress website.

A typical JavaScript code snippet may look like this:

<script type="text/javascript">   // Some JavaScript code  </script>  <!-- Another Example: --!>    <script type="text/javascript" src="/path/to/some-script.js"></script>

But, if you add a javascript code snippet to a WordPress post or page, then it will be deleted by WordPress when you try to save it.

That being said, let's see how you can easily add JavaScript to WordPress pages or posts without breaking your website. You can use the quick links below to jump straight to the method you want to use.

Add JavaScript to entire site using a plugin
Add JavaScript manually using code
Add JavaScript to single posts and pages using a plugin

Method 1. Add JavaScript to Entire WordPress Site Using Insert Headers and Footers Plugin

Sometimes a plugin or tool will need you to copy and paste a JavaScript code snippet into your website to work correctly.

Usually, these scripts will go in the header or footer section of your WordPress blog, so the code is loaded on every page view.

For example, when you install Google Analytics, the code needs to run on every page of your website, so it can track your website visitors.

You can manually add the code to your header.php or footer.php files, but these changes will be overwritten when you update or change your theme.

That's why we recommend using a WordPress plugin to add JavaScript to your entire WordPress site.

The best plugin for the job is the Insert Headers and Footers plugin.

The first thing you need to do is install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to go to Settings » Insert Headers and Footers.

Here you will see three boxes for the header, body, and footer sections.

Insert headers and footers add code

You can now paste the JavaScript you copied into one of these boxes and click on the 'Save' button.

The plugin will now automatically load the code you added on every page of your website.

Method 2. Adding JavaScript Code to WordPress Manually Using Code

With this method, you need to add code to your WordPress files. If you haven't done this before, then check out our guide on how to copy and paste code in WordPress.

First, we'll show you how to add code to your WordPress site's header. You need to copy the following code and add it to your functions.php, in a site-specific plugin, or by using a code snippets 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 Using Code

If you only want to add JavaScript to a single WordPress post, then you will need to add conditional logic to the code.

Take a look at the following code snippet:

              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');

The code above will only run the JavaScript if the post ID matches '5'. Make sure you replace the '5' with your own post ID.

To find the post ID open up the post where you want the JavaScript to run. Then, in the URL of the page, you'll find the post ID.

Find WordPress post ID

Adding JavaScript to a Specific WordPress Page Using Code

If you only want to add JavaScript to a single WordPress page, then you will need to add conditional logic to the code, just like above.

Take a look at the following example:

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');

The code above will only run the JavaScript if the page ID is '10'. Make sure you replace the '10' with your own page ID.

You can find the page ID using the same method as above. Simply open the page you want the JavaScript to run and note the page ID in the URL.

Adding JavaScript to a Specific WordPress Post or Page Using Code in the Footer

If you want the JavaScript to run in your site footer instead of the header, then you can 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');

This code snippet hooks into wp_footer instead of wp_head. You can also add conditional tags to add javaScript to specific posts and pages like the examples above.

Method 3. Adding Javascript Code Inside WordPress Posts or Pages Using a Plugin

Another way you can add JavaScript to individual posts and pages is by using a plugin. You can select where in the content you want to embed your JavaScript code.

First, you need to install and activate the Code Embed plugin. For more details, see our beginner's guide on how to install a WordPress plugin.

Upon activation, you need to edit the post or page where you want to add JavaScript. Then, you need to enable custom fields which is hidden by default.

To view it, you need to click on the three-dot menu in the top-right corner of the screen and then select 'Options' from the menu.

Post editor options

This brings up a popup where you need to check the 'Custom fields' option under the 'Advanced panels' section.

Then, click the 'Enable & Reload' button to reload the post editor.

Enable display custom fields

After that, you'll see the 'Custom Fields' meta box directly below the content editor.

Next, click the 'Enter new' link.

Add a new custom field

The custom field name and value fields will now appear.

You need to provide a name for the custom field with the 'CODE' prefix (for example, 'CODEmyjscode') and then paste your JavaScript code into the value field.

Then, click the 'Add Custom Field' button to save your custom field.

Adding a JavaScript code to a custom field

Now you can use this custom field to embed the JavaScript code anywhere in this post or page. Simply add this embed code anywhere in your post content.

Make sure you click 'Update' or 'Publish' to save the page or post and make your JavaScript code live.

Pro tip: These methods are for beginners and website owners. If you are learning WordPress theme or plugin development, then you need to properly enqueue JavaScript and stylesheets to your projects.

We hope this article helped you learn how to easily add JavaScript in WordPress pages or posts. You may also want to see our guide on how to choose the best blogging platform and our expert picks of the best AI chatbot software for your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.