Add Javascript to Wordpress [2024] 💥

Updated: April 8, 2024 | by: Martijn Assie, creating websites & shops since 20 years, also Linux-, Wordpress-,
Photoshop- and SEO expert. | NL DE

You might need JavaScript for a specific piece of content or the entire site. This is useful for embedding third party tools, adding tracking scripts such as Google Analytics and Facebook Pixel, and even adding functionality to your website. There are many options available for adding JavaScript in WordPress.

Advertisement

1. Add Javascript to Wordpress with Gutenberg

Single post/page

It is possible to add Javascript to a single post or page using the default Wordpress editor, named Gutenberg. Opem a post/page with Gutenberg. Click the + (plus) icon to add a new block. Use the searchbox, type: "html". Click on "Custom HTML". Here you can write or paste your JS-code. Don't forget to open and close with script tags. See screenshot below.

Site wide

If you want to add Javascript code to Wordpress that works on the whole website and not just on one page or post you need whether a good theme like Divi or any good premium theme or you have to work with a plugin. See options below.

2. Add Javascript to Wordpress with DiviBuilder

Single post/page

Let's continue with the best pagebuilder out there. Open your post or page with DiviBuilder. Click on the grey plus(+) that opens a new module. Click on the "Code" module. There are 3 tabs, go to the "Content" tab and paste your Javascript there. Don't forget to open and close with script tags.

Site wide

The code module can be used to add a few lines of code to a page or post on your website. However, if you want your code code to run across your entire site, you will need to use the Divi Theme Options console to enter your JavaScript and jQuery. Navigate to "Divi Theme Options", and then click on the "Integration" tab. Find the toggle "Enable header codes" and ensure it is enabled. Add your Javascript to this section: "Add code to the HEAD of your blog". Don't forget to open and close with script tags.

3. Add Javascript to Wordpress with Elementor

Single post/page

And this is how to add javascript to Wordpress with the second best pagebuilder out there named Elementor. Open your post or page with Elementor. Use the search in Elementor, type:"html". Drag the HTML module to the sqaure in the middle of the page. See screenshot.

Now you can paste your Javascript in the box. Don't forget to open and close the code with script tags. See screenshot below.

4. Add Javascript to Wordpress with Plugin

We will use the popular WPCode plugin. WPCode is a popular code editor that was formerly known as Insert Headers or Footers. You can add JavaScript directly to your site's footer or header, true to its formerly name. You can use the features to conditionally load JavaScript on specific content or users.

Start by downloading and activating the WordPress.org free plugin. Alternatively go to "Plugins" >> "Add new" and search for the name of the plugin. Next, navigate to "Codesnippets". Then, click "+Add Snippet". This will allow you to create your first JavaScript snippet.

You can use some preset snippets included in the plugin. You can add your own snippet by hovering over the option "Add your own custom code (New Snippet)" and clicking "Use a Snippet".

Next, give your snippet a name so you can remember it. Select JavaScript Snippet for the Code Type. You can then add your JavaScript code snippet to the code box. You can see below how it looks to add the Google Analytics tracking code.

5. Add Javascript to Wordpress using functions.php

This method is not for beginners. Functions.php is used to enhance the functionality of WordPress CMS by allowing for custom code. You will need a child theme to be able to use functions.php and add custom functions on your site. After your child theme has been set up, and you have created a functions.php file you can start prepping your site's script code. Follow the above steps to create a folder (called 'js' in your child theme folder) and then add the appropriate script files, such as javascript-file.js.

After the files are added, go to functions.php and insert the following code:

function mycustomscript_enqueue() { 
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/javascript-file.js' ); 
} 
add_action( 'wp_enqueue_scripts', 'mycustomscript_enqueue' );

Advertisement