How to add javascript or jquery to WordPress

Once in a while when building client websites I need to add some javascript. For example, to show element on button click, run calculations on a form, and so on.

But adding plain javascript code to a page is not the best idea. Even if it can be added, it’s not the right place to add scripts. Second – jquery requires calling jquery functionality in your website, and not all themes call it out of the box.

Here you’ll find a tiny tutorial how to run javascript and jquery scripts in a way that actually works.

How to add jquery script to WordPress

There are lots of plugins you could add install to add jquery scripts to WordPress. But since I don’t like adding additional plugins for such a small feature, I’ll show you how to do it without plugins.

Here’s the example we use:

<script>
$(document).on("click", ".showit", function () {
	$(".my-element").toggle('slow');
});  
</script>

If you click element with class showit, then it toggles (shows or hides) element with class my-element.

If you’ll add this code to a HTML block or to WordPress website’s head section, you’ll probably be disappointed, because it won’t work. There’s one thing missing – jquery needs to be loaded in the first place.

Just for quick test, we can call jquery from it’s CDN like that:

<script
  src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
  crossorigin="anonymous"></script>
<script>
<script>
$(document).on("click", ".showit", function () {
	$(".my-element").toggle('slow');
});  
</script>

Now if you have script in the right place, and both classes defined in the page, the script should run just fine. But we’re not done yet.

First – running scripts from other server (jquery CDN) will take some time, so it will slow down your website. That’s no good, and we’ll need to figure it out. Second – we need to put these scripts to the right place – to <head> section of you WordPress site. Third – we may not need to call these scripts on evey single page. I’ll show you how to call the script only where it’s needed.

Let’s cover it.

How to call jquery from your WordPress theme folder

To load jquery as fast as possible, download the jquery file to your computer. You may use this link from previously mentioned CDN – click here.

Once file is in your computer, upload it to server where your WordPress website files are located. Specifically – upload this file to your theme’s directory ( wp-content/themes/[your theme]/). Create js directory if it does not exist yet, and put the file there.

You may use Filezilla app to upload, or you may go to Cpanel or DirectAdmin, and upload the file using File Manager in the panel.

How to add jquery script to WordPress theme’s head section

That’s easy. To call any script from <head> section in WordPress, go to Appearance >> Theme File Editor or Tools >> Theme file editor. Open functions.php file on the right, and add this code to the end of the file:

function rocksolid_script() {
?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.6.1.min.js"></script>
<script>
$(document).on("click", ".showit", function () {
	$(".dont-show").toggle('slow');
});  
</script>
<?php 
}

add_action('wp_head', 'rocksolid_script');

As you see, we’re calling function named rocksolid_script in WordPress head section. It does two things:

It loads jquery from current active theme’s js/ directory, so we no longer need CDN link. You can get current active theme url using <?php echo get_template_directory_uri(); ?>.
It runs the actual jquery script we needed in the first place.

Now what if we need to load it just in one page?

How to load custom jquery script only on specific page

If you want to call function just on homepage or any other specific page in WordPress, we need to add additional check in the script.

For example if you want to load previously mentioned script only on homepage, you need to add if is_front_page() to the function, like here:

function rocksolid_script() {
if (is_front_page()) { ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.6.1.min.js"></script>
<script>
$(document).on("click", ".showit", function () {
	$(".dont-show").toggle('slow');
});  
</script>
<?php }
}

add_action('wp_head', 'rocksolid_script');

To load script only on specific post, you’d need to use if (is_single(POST ID HERE)).
To load script only on specific page, you’d need to use if (is_page(PAGE ID HERE)).

If you have no idea where to find post or page ID in WordPress, read this article.

How to add javascript or jquery to WordPress

How to add jquery script to WordPress

How to call jquery from your WordPress theme folder

How to add jquery script to WordPress theme’s head section

How to load custom jquery script only on specific page

You should also check: