Including Scripts on Selected WordPress Templates Using Conditional Tags

Running scripts on your posts or pages can give you the ability to enhance website functionality, but loading them in areas where they are not going to be used can add extra load times to your content pages. Using a conditional statement along with WordPress conditional tags will help you specify which pages your script will load into, preventing the rest of the site from becoming bogged down with additional code and requests.

A perfect example of this can be found on this site through the use of the Nivo Slider and WP Attachments slideshow setup, which only gets loaded on the homepage and the individual work pages. I use two variations of the Nivo Slider script functionality, with the homepage slideshow having a different transition speed, pause time and randomizing the slides than the slideshow functionality used throughout the work section.

Using the tutorial on Using Nivo Slider and WordPress Attachments to Create an Easy to Use Slideshow, this example will show you how to load the script and functionality on your homepage only, but I will add the example used on this site for loading different variations on separate pages at the end of the post.

Let’s start by creating a new php file in your theme directory called “hp-slideshow.php” and paste in the following code:

<!-- jQuery Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/FILELOCATION/jquery-1.4.4.min.js"></script>
 
<!-- Nivo Slider Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/FILELOCATION/jquery.nivo.slider.pack.js"></script>
 
<!-- Nivo Slider Function -->
<script type="text/javascript">
$(window).load(function() {
	var total = $('#DIVNAME img').length;
	var rand = Math.floor(Math.random()*total);
	$('#DIVNAME').nivoSlider({
		effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
		animSpeed:600, //Slide transition speed
		pauseTime:6000,
		directionNav:false, //Next and Prev
		controlNav:false, //1,2,3...
		pauseOnHover:false, //Stop animation while hovering
		captionOpacity:1, //Universal caption opacity
		startSlide:0 //Set starting Slide (0 index)
	});
});
</script>

Normally you would place this whole piece of code before the closing body tag in your themes footer.php file, but if I’m using variations of the same script function I like to create each as its own php file and use a php includes within the conditional statement, so I make sure that the script code does not exist in the footer. Instead, you will want to add the following conditional statement above the closing body tag:

<?php if (is_home()) {?>
	<?php include(TEMPLATEPATH . '/hp-slideshow.php'); ?>
<?php }?>

This statement will load the contents of the hp-slideshow.php file only if the user is on the site homepage, preventing it from loading throughout the rest of the site when not necessary.

If you want to load the script on multiple pages, or as this example shows, loading variations of the script on different pages, use the following conditional statement:

<!-- load script on homepage -->
<?php if (is_home()) {?>
	<?php include(TEMPLATEPATH . '/hp-slideshow.php'); ?>
<?php }?>
 
<!-- load script on single post pages -->
<?php if (is_single()) {?>
	<?php include(TEMPLATEPATH . '/post-slideshow.php'); ?>
<?php }?>

To view more WordPress conditional tags that can be used, please visit the WordPress Codex.