Adding the JavaScript in header
In this post, I want to show you how to include JavaScript, just on specific pages or areas in WordPress.
First thing you have to do, is to add the JavaScript you want to load in your theme folder of WordPress. To keep everything organized, create a folder called “Scripts” or “Js”.
Than, open you header.php file from you active theme and instead calling the link as you normally do, paste the following code within the head tag:
The Code
<?php if (is_page('home')): ?>
<!--home page custom JS-->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Scripts/customJS.js"></script>
<?php endif; ?>
Code explained
if (is_page('home')
That means that if you have permalinks active and a page called home, the JavaScript will load just on that page.
<!--home page custom JS-->
This is a simple HTML comment to keep organized or to make the life easier to other developers who might have to work with your code.
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Scripts/customJS.js"></script></pre>
Basically, this is the link to our JavaScript file that could stay by itself just that will be loaded on all of the pages.
Variations
Additionally, you can have more pages like that inclusive a page id (please replace just this line in the code from above):
if (is_page('home') || is_page('contact') || is_page('45')
Or sections as:
if (is_single()
For more options please refer to WordPress Conditional Tags
Remove WordPress plugins JavaScript
This is a tricky one. The websites which use WordPress as CMS, need several plug-ins to achieve the desired functionality. Many of those plug-ins insert JavaScript within the head tag using the wp_head() hook.
What happens if we want to call that JavaScript code of specific plugins, just on certain pages? For example, I have a contact form and I want to load its JavaScript only on contact page or I have a video page and the plugin that embeds the videos should be active only on that page.
Wordpress offer us a way to disable JavaScript, also called deregister JavaScript, unfortunately not all of the plug-ins are written properly, so with some of them it will not be possible.
Code needed
Using following code in our functions.php file, will disable a plug-in’s JavaScript except the page you specify:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}
The only plug-ins you can target, are those which use wp_enqueue_script and you need to find the handle for that specific plugin by browsing it’s main .php file.
Justin Tadlock on his blog, offers a more in depth tutorial regarding this matter.
References
The order you insert JavaScript is important, especially when you deal with Jquery in WordPress. You might want to check out this article as well:
Use Google-Hosted JavaScript Libraries (…still the Right Way)
How can we use this in Blogspot ? Please Help.. Will be thank ful
You cannot do that in Blogspot. If you transfer your blog to WordPress, than you can apply the points from above.
Very good post, Lucian. I wrote about handling unwanted scripts and styles as well
Glad you like it.
Thanks for this tutorial, I’m wondering whether it would be more efficient to use a custom header template for all pages using custom JS. I figure that it’s faster to keep the array smaller (or get rid entirely) to save server resources.
I have around 50+ pages I’d have to add to this array and these pages would all appear in my source for every page on my site and is not very good for SEO is it?
Although a custom header is arguably more coding work it is better in my opinion as it keeps things cleaner and leaves the non-JS pages free of a massive array which search engines would have to navigate through on every page, before they get to actual page content. Effectively on the custom header pages we still only have a couple/three/four ‘link rel=’ statements as opposed to a list of 50+ pages in my case.
What do you think?
Simon, it’s better not load JS on pages you don’t need. It may also affect SEO if you have inline JS, which should actually be included in a separated file. Certain plugins they force load this into header and you might not have much of an option.
Thanks for your reply Lucian, I’ve re-coded all my gallery plugins to avoid using plugins altogether, it’s fancybox plugin I’m referring to here and luckily my custom header idea will work fine in this instance.
At this stage if I had a plugin that offered me no choice I’d not use it, or use your idea if needed. My point was that if it’s a few pages an array is all good but if you have loads of pages perhaps a custom header would be a better solution.
Exactly what I was looking for! Thanks Lucian. I was adding Adwords Javascript conversion code to a WordPress template and knew this was easy to do but thanks to your tutorial, I was able to save some time so thank you.
Hi there,
a simple question what would be a function to activate a plugins js only on 2 different pages.
I have a lightbox working on page 1. and page 2. i dont need it on the rest of them.
This code gives the chance to activate it only on one.
add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
function my_deregister_javascript() {
if ( !is_page(‘Contact’) ) {
wp_deregister_script( ‘contact-form-7’ );
}
}
Thx for your help
k..
That got the job done man! Thanks for this simple solution to my problem with 2 different jQuery lib versions required.
This is great; however, I want my js function to run on every page except for one. How can you specify just one page to not have the script in the header?
@Jake the home page will not not include jquery, all the other will do. Replace the home with your page id without quotes:
do nothing
insert script here
Great post! Solved a plugin problem on my wordpress site! Since I can tell the plugins on what page to work now, they don’t overlap anymore. Many thanks!