Load scripts and css only when needed

CMS & WordPress
1

I haven’t found any good answers to this with searches. Everything found is for plugin scripts.
I load javascripts and css with functions in the functions file which loads them all site wide. With the exception of jquery and modernizr, the rest only need to be loaded for the homepage. The homepage is a page with a custom template which includes an image slider.
How do I only load the scripts and css for the homepage?

The functions

function my_scripts() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"), false, '1.6.1', true);
		wp_enqueue_script('jquery');
		// load custom scripts
		wp_enqueue_script('powerSlide', get_bloginfo('template_url') . '/js/powerSlide.js', array('jquery'), '1.0', true);
		wp_enqueue_script('custom_powerSlide', get_bloginfo('template_url') . '/js/scripts.js', array('jquery'), '1.0', true);
		wp_enqueue_script('modernizr', get_bloginfo('template_url').'/js/modernizr-2.0.6.js', false, '2.0.6', true);
	}
}
add_action('init', 'my_scripts');

// Add stylesheet the right way
function theme_add_styles() {
	wp_enqueue_style('slider_css', get_bloginfo('template_url') . '/css/powerSlide.css', false, '1.0');
	wp_enqueue_style('slider_custom_css', get_bloginfo('template_url') . '/css/powerSlide_theme.css', false, '1.0');
}
add_action('init', 'theme_add_styles');

My thoughts on an alternative method is to use different header and footer files for the homepage but would like to do it with the functions.

2

Hi. I do not have any experience with your type of script that registers and deregisters things to be included. But what you would want to do is test for the home page using is_home();

Something like:


if (is_home())
{
  //  Do stuff like register CSS and JS files.
}

You may be able to do that in your existing code just by adding an additional if statement. You already have a if (!is_admin()) in there, just put the if (is_home()) and see how it works.

Like I said, I’ve never done it that way. An alternative way would be to edit your header.php file and do a conditional to check if it is the home page and then link in the appropriate CSS and JS files.


//  We are in header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 * We filter the output of wp_title() a bit -- see
	 * twentyten_filter_wp_title() in functions.php.
	 */
	wp_title( '|', true, 'right' );

	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

//  Add in this code:
<?php if (is_home()):?>

  <link rel="stylesheet" type="text/css" media="all" href="/path_to_css_file.css" />

<script type="text/javascript" src="external_javascript.js"></script>
<?php endif;?>

Something similar to that untested code. Also see this:

3

Cheese is correct, you should use is_home not is_admin

4

rguy84 says:

Cheese is correct, you should use is_home not is_admin

If I do that the admin flyout menus for the icons cease to function.

I changed just the script files to see if it works.

function in functions.php

function my_scripts() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"), false, '1.6.1', true);
		wp_enqueue_script('jquery');
		// load custom scripts
		wp_enqueue_script('modernizr', get_bloginfo('template_url').'/js/modernizr-2.0.6.js', false, '2.0.6', true);
	}
}
add_action('init', 'my_scripts');

Works fine, jquery and modernizr load site wide.

Add this code to the footer.php

<?php
	wp_footer();
?>
<?php if (!is_home()):?>
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/powerSlide.js"></script>;
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scripts.js"></script>;
<?php endif;?>

Loads files in footer where I want them but still loads them site wide.

Added this to the homepage template

<?php is_home(); ?>

Still loading scripts sitewide.

Just an added note;
The home page is created by adding a new WordPress page (named Homepage) and applying a custom template (named Homepage) and setting it as the homepage in the Reading setting (Front page displays as static page (Homepage)).
The blog page is created by creating a new WordPress blank page (named Postpage) and applying the default template (index.php) and setting it as the Post page in the Reading section.

5

Sticks


<?php if (!is_home()):?>

the above line says "If the current page IS NOT the homepage, do ___. Remove the !

6

By removing the ! the scripts load on the blog page but not the page I have set as the homepage.

7

You need to provide more detail because your original post said homepage…

8

You need to provide more detail because your original post said homepage…

In the settings for reading, Front page displays as a static page. This page is named ‘Homepage’ and has a custom template applied that contains an image slider that uses jquery. I want the associated javascripts and css files for this slider to only load for this page.
I use the is_admin function to replace the onboard jquery with the one in the google library, and want it and the modernizr script to load site wide.

The page that uses the index.php file as a template is named Postpage and normally would be the home page. In the reading settings it is set as the Post page.

Hope this explains it a little better.

9

Found a solution:

  1. Left this code in the functions.php file
function my_scripts() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"), false, '1.6.1', true);
		wp_enqueue_script('jquery');
		// load custom scripts
		wp_enqueue_script('modernizr', get_bloginfo('template_url').'/js/modernizr-2.0.6.js', false, '2.0.6', true);
	}
}
add_action('init', 'my_scripts');

Added this code to the footer.php file

<?php if (is_page('Homepage')):?>
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/powerSlide.js"></script>;
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scripts.js"></script>;
<?php endif;?>

Added this code to the header.php file

<?php if (is_page('Homepage')):?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/powerSlide.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/powerSlide_theme.css" type="text/css" media="screen" />
<?php endif;?>

Just need to add wp_enqueue_script and wp_enqueue_style so the bwp-minify plugin will work with them.

10

Here’s the end result loading scripts and css files using the functions.php page

// Use jquery the right way
function my_scripts() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"), false, '1.6.1', true);
		wp_enqueue_script('jquery');
		// load custom scripts
		wp_enqueue_script('modernizr', get_bloginfo('template_url').'/js/modernizr-2.0.6.js', false, '2.0.6', true);
	}
}
add_action('init', 'my_scripts');

// To load a script only on a Page
add_action('wp_print_styles', 'enqueueMyStyles');
function enqueueMyStyles(){
    if( is_page('Homepage') ) {
         wp_enqueue_style( 'mystyle_powerSlide', get_bloginfo('template_url') . '/css/powerSlide.css');
		 wp_enqueue_style( 'mystyle_powerSlide_theme', get_bloginfo('template_url') . '/css/powerSlide_theme.css');
   }
}

// To load a script only on a Page
add_action('wp_print_scripts', 'enqueueMyScripts');
function enqueueMyScripts(){
    if( is_page('Homepage') ) {
         wp_enqueue_script( 'powerSlide', get_bloginfo('template_url').'/js/powerSlide.js', false, '1.0', true);
		 wp_enqueue_script( 'custom_powerSlide', get_bloginfo('template_url').'/js/scripts.js', false, '1.0', true);
   }
}

This loads jquery and modernizr site wide and loads the slider scripts and css only on the homepage.

Thanks to rguy84 and cheesedude for providing help.