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.
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}
- 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:
- Click “Save settings” button when you’re done.
Does this way applies to jquery as well?
WordPress ships with JQuery, so no need to add it
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
Hi @pradyumnasinghrathore,
you need to also delete the javascript file you created. I guess the location was different to plugin’s folder.
Regards
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
And Me! Problem appears to be where is it edited and called in the page, not where my script is!
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)
jQuery can be a bit quirky in WordPress. Try replacing the $ with jQuery in your code like this
color2=jQuery(“#colorPicker2”).val();
Or redefine the dollar sign first:
var $ = jQuery, color2 = $(“#colorPicker2”).val();
Thank you for this additional tip!
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
Enclose your code within
jQuery(function($){
** your code here
});
Lovely.. short and sweet.. very easy and my javascript file start to work smoothly without any hindrance..I can recommend 100% +..! cheers..!
I am glad that we were able to help
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
Can this plugin help install javascript code to just a single page in WordPress (and not globally across the entire site)?
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]
The link is not workig, would you please point out what plugin to add JS file to a single page?
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.
Ah ok, thanks for the help!
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.
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.
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
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)
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
How can I add the JavaScript used in the IMDB plugin ?
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!!
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.
DIDN’T work no matter which way I did it by a custom script or pasting the script into the plugin.
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?
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!
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)
He just took this plague of a problem off of me with this one …thanks bro
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.
Whoops, forgot the == for JavaScript conditions. You guys know what to do.
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.
My JavaScript is totally ignored whatever method I use. The program works as if there was not script there what so ever.
Thanks for your offer
Your code is very helpful.
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
Excelent bro, this is so easy to use, even to import css. Awesome
Hay !
how can I change my header on different category pages what is the condition for this?
is there anyway to use the > or < symbol there since it produces special character error?
Very good
very helpful
Nice Information Share With Us !
I Like the way of Illustrating things.
Keep Share with us.
Work like a charm. This guide is really helpful for me and for my website as well. Thank you