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 } ?>

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>

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)