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.

Author

  • Valentin Garcia

    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
Article Rating
Subscribe
Notify of
46 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Ilham
Ilham
7 years ago

Does this way applies to jquery as well?

steve
steve
7 years ago
Reply to  Ilham

WordPress ships with JQuery, so no need to add it

Pradyumna singh rathore
Pradyumna singh rathore
7 years ago

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
7 years ago

Hi @pradyumnasinghrathore,

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

ty
ty
4 years ago

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
Simon Long
3 years ago

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

Kev Man
Kev Man
6 years ago

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
miknik
6 years ago
Reply to  Kev Man

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

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

Smith
Smith
6 years ago
Reply to  miknik

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

mihha
mihha
6 years ago
Reply to  Smith

Thank you for this additional tip!

foxontherock
foxontherock
5 years ago
Reply to  Kev Man

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
QAC Qatar
2 years ago
Reply to  Kev Man

Enclose your code within 

jQuery(function($){

** your code here
});

Sisira
Sisira
6 years ago

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

mihha
mihha
6 years ago
Reply to  Sisira

I am glad that we were able to help

Hiba
Hiba
3 years ago
Reply to  Sisira

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
Dustin Overbeck
6 years ago

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

mihha
mihha
6 years ago

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
Doaa Altarawy
6 years ago
Reply to  mihha

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

Lily
Lily
6 years ago

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
Dustin Overbeck
6 years ago
Reply to  Lily

Ah ok, thanks for the help!

CUNAIM MANAGE
CUNAIM MANAGE
6 years ago

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
Rafael Vila
6 years ago

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
6 years ago
Reply to  Rafael Vila

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
Prince Jamal Minhas
6 years ago

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
Dirk
6 years ago

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
Melvin Chuleria
6 years ago

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

Anson
Anson
5 years ago

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
Nicolas
5 years ago

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
Michael Kiger
5 years ago

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

Rob Weiman
Rob Weiman
5 years ago

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
Joe Web
5 years ago

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
sailaja
3 years ago
Reply to  Joe Web

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
Brian Torres
4 years ago

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

James
James
4 years ago

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
James
4 years ago
Reply to  James

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

Hector
Hector
4 years ago

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
StirlingDP
4 years ago

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

Richard
Richard
3 years ago

Thanks for your offer
Your code is very helpful.

Luis
Luis
3 years ago

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
Eduardo
3 years ago

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

raza
raza
3 years ago

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

Jeenus A
Jeenus A
3 years ago

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

Suraj
Suraj
2 years ago

Very good

suraj
suraj
2 years ago

very helpful

Paathfind
Paathfind
2 years ago

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

Ann Deversi
Ann Deversi
1 year ago

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