Add Custom JavaScript into your WordPress Site

Add Custom JavaScript into your WordPress Site

In some situations, you may need to add custom Javascript to your site. Normally, this would involve modifying your theme files.

However, there is a less intrusive alternative. “Header and Footer Scripts” is a plugin to add custom JavaScript to WordPress without modifying your theme.

In this tutorial, I’m going to show you how this useful plugin works.

First, let’s install the plugin:

  • Log in to your WordPress site.
  • Go to Plugins > Add new
  • Search for “Header and Footer Scripts”.
  • Click “Install Now” and activate the plugin.
Custom JavaScript into WordPress

Option #1. Upload a custom Javascript file

  • Save your custom JavaScript code into a file with the .js format
  • Upload it into your site to this folder: wp-content/themes/your-theme/js/
  • Go to Settings > Header and Footer Scripts.

Now you have two options to load the file:

  • Scripts in header (load inside head tag)
  • Scripts in footer (load before closing body tag)

Use the location that match better your needs using this syntax as example:

{codecitation js}<script src=”http://www.yoursite.any/wp-content/themes/your-theme/js/file.js”></script>{/codecitation}

Custom JavaScript into WordPress
  • Click “Save settings” button when you’re done.

Option #2. Load custom JavaScript without a file

Alternatively, you can add your code directly into WordPress without the need for a custom .js file:

Custom JavaScript into WordPress
  • Click “Save settings” button when you’re done.

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
46 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ilham

Does this way applies to jquery as well?

steve

WordPress ships with JQuery, so no need to add it

Pradyumna singh rathore

i have inserted a javascript using this plugin but now i have to remove it, i have tried uninstalling and deactivating the plugin but the javascript still executes

htmgarcia

Hi @pradyumnasinghrathore,

you need to also delete the javascript file you created. I guess the location was different to plugin’s folder.
Regards

ty

Hi Valentin, would you know where the javascript file might be located? I have the same issue and also an issue with a site from the original clone where the addition header script persists.
Thanks

Simon Long

And Me! Problem appears to be where is it edited and called in the page, not where my script is!

Kev Man

Does not work with Jquery. Errors out saying $ is not a function.
color2=$(“#colorPicker2”).val();
Uncaught TypeError: $ is not a function

at updateColors ((index):311)

at HTMLInputElement.onmousemove ((index):159)

miknik

jQuery can be a bit quirky in WordPress. Try replacing the $ with jQuery in your code like this

color2=jQuery(“#colorPicker2”).val();

Smith

Or redefine the dollar sign first:
var $ = jQuery, color2 = $(“#colorPicker2”).val();

mihha

Thank you for this additional tip!

foxontherock

The reason why they don’t use the $ char is to not interfer with php I think… even if it can’t happen because one is client and the other one is server.  What I do allow me to use the $ without configuring a global window.$ variable.

(function($){
   // all all my code here, $ variable scope is local to this function
   $(‘body’).doSomeThing();
})(jQuery);
// $ is undefined here

QAC Qatar

Enclose your code within 

jQuery(function($){

** your code here
});

Sisira

Lovely.. short and sweet.. very easy and my javascript file start to work smoothly without any hindrance..I can recommend 100% +..! cheers..!

mihha

I am glad that we were able to help

Hiba

Hi Sisira 

So I used Astra Theme how can I insert html template to the front page ?cause  I’d been  asked to add a javascript file and html template to calculate co2 emissions in the front page? Some help 

Dustin Overbeck

Can this plugin help install javascript code to just a single page in WordPress (and not globally across the entire site)?

mihha

This plugin will add custom JS file to all the pages on the WP website
The following plugin will help you add custom JS to a specific page only
[url=https://srd.wordpress.org/plugins/custom-css-js/]https://srd.wordpress.org/p…[/url]

Doaa Altarawy

The link is not workig, would you please point out what plugin to add JS file to a single page?

Lily

Your best bet is to make it into a hook function if it’s an extensive piece of code. If it’s something simple, use if statements to ensure that it only runs on the right page.

Dustin Overbeck

Ah ok, thanks for the help!

CUNAIM MANAGE

hi,

if i use this plug in the javascript is added to all the pages.

how do i attach the js i am writing to a specific page ?

thank you.

Rafael Vila

The proper way is to use WordPress recommended method [url=https://developer.wordpress.org/themes/basics/including-css-javascript/]https://developer.wordpress…[/url] They have a couple of samples that you can follow, including as one was asking on how to specify a script only for specific pages.

htmgarcia

Hi,

that method is for developers who have full control of their themes. However it can certainly be a great method if you’re using a child theme.
Regards

Prince Jamal Minhas

is there a way to load a specific js to a specific page? (i.e: You have 3 pages: A, B, C and you only want to load js on page B)

Dirk

Hi, I like to include a result of a javascript file

This script is adding a list of teams in the DOM.

How can I implement this?

I was trying to put it direct into the text of a page (There are more pages required) so I have to repeat this on different pages

Melvin Chuleria

How can I add the JavaScript used in the IMDB plugin ?

Anson

Valentin Garcia, this seems like such an easy fix now but you have no idea how many days I spent reading n number of articles just for a simple JS inclusion option. THANK YOU!!

Nicolas

Hi there, I’m trying to load a js to a webpage. I’m using your plugin but I can make it run. It runs if I add the code to the chrome console but I can make it work through your plugin.

Michael Kiger

DIDN’T work no matter which way I did it by a custom script or pasting the script into the plugin.

Rob Weiman

Valentin,

I am looking for a way to implement JSON on my WordPress website.  It looks like your plugin will allow me to do this. Is this correct?

Joe Web

i’ve installed the plugin (which looks to be exactly what we need) but when i visit the bottom of any page or post’s edit page, i see only ‘Insert Script to .’ 

there is no field for inserting into footer. 

i’ve confirmed that our theme calls the wp_head and wp_footer hooks from the header.php and footer.php files.

any suggestions on what i am doing wrong?
thank you very much!

sailaja

I’m on the fence about this, while more customization is good, I have a feeling this is a “in-progress” update, it just feels incomplete and half-way there.
We use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout “feels like” it had larger images,
maybe because the images were cropped more loosely so it’s easier to tell which project it was at quick glance. Now the image is cropped closer, making it
harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
efficient.
I have a couple suggestions that might make it work better:
1. Increase the height of the window the cover image is being displayed.
2. Let us to choose which image to be displayed as “cover” (like how Pinterest handles cover images of each board, was hoping for this for a long time)
3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
element already)

Brian Torres

He just took this plague of a problem off of me with this one …thanks bro

James

Thank you Valentin!! This is great!
P.S. for people who want this to apply to specific pages, perhaps they can just add conditionals:
[code]var pageTitle = document.getElementById(‘whateverTheTitleElementIs’).innerHTML;[/code]
[code]if (pageTitle = “Title of page 1”) { code goes here… }[/code]
[code]if (pageTitle = “Title of page 2”) { code goes here… }[/code]

It’s ugly, but functional. My favorite kind of code haha. 

James

Whoops, forgot the == for JavaScript conditions. You guys know what to do.

Hector

Hi, I have followed the steps above.  I went with option 2, but the scripts was not inserted into my website.
What could had went wrong.

StirlingDP

My JavaScript is totally ignored whatever method I use. The program works as if there was not script there what so ever. 

Richard

Thanks for your offer
Your code is very helpful.

Luis

Does it work if some dynamic fields needs to be placed within the js tag? e.g a value from a custom field created with ACF plugin for a certain type of post

Eduardo

Excelent bro, this is so easy to use, even to import css. Awesome

raza

Hay !
how can I change my header on different category pages what is the condition for this?

Jeenus A

is there anyway to use the > or < symbol there since it produces  special character error?

Suraj

Very good

suraj

very helpful

Paathfind

Nice Information Share With Us !
I Like the way of Illustrating things.
Keep Share with us.

Ann Deversi

Work like a charm. This guide is really helpful for me and for my website as well. Thank you

46
0
Would love your thoughts, please comment.x
()
x