Genesis Framework — Add a Conditional Script or Stylesheet

I’ve been trying to conditionally add scripts on a per-page basis for a website I’m developing, and came across a great way to add them to my theme’s function file.

The Scenario

Image may be NSFW.
Clik here to view.

Genesis Framework script settings.

So, you’ve just come across an awesome jQuery script, or a great css framework you want to use on only one post or page, but you’ve got a problem.

You could add the script or the stylesheet to the scripts section of the Genesis Framework settings page, as shown to the left, but that means the script/stylesheet will be loaded site-wide. That’s not good if you’re trying to decrease page load speeds, which is now more important than ever with Google using page loading speeds as a part of their ranking algorithm.

With that in mind, you’re left with three solutions to conditionally add a script or a stylesheet to a post or page.

More below the jump.

1. Using the Built-In Genesis Option

Though not advertised as such, Genesis comes with the option built-in. All you need to be able to conditionally add your script or stylesheet is to not be using an SEO plugin.

With the Genesis SEO settings enabled, you’ll be able to add a custom script or stylesheet in the “Custom Tracking/Conversion Code” box at the bottom.

Image may be NSFW.
Clik here to view.

Unfortunately, this only gives you the option to output the script to the site’s head, but it’s quick, and means you don’t have to get your hands dirty with any custom code.

2. Enqueue the Script/Stylesheet in your Functions File

Making use of the Genesis Framework hooks, alongside WordPress Enqueue Script and Enqueue Stylesheet functions, and WordPress Conditional Tags, you can create a function which is triggered only on certain pages.

For example, If I want to register and load a script so that it only appears on the home page I would add the following to my theme’s function.php file, immediately before the closing ?> tag.

add_action('genesis_meta', 'do_something');
function do_something() {
 if(is_home()) {
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js');
    wp_enqueue_script( 'jquery' );
 }
}

Here’s a breakdown of what we’re doing:

1. Creating the action.
2. Creating the function.
3. Telling the function to only do something on the site’s homepage.
4. Registering a new script.
5. loading the newly registered script.

If you want to add a stylesheet, simply use wp_register_style and wp_enqueue_style instead.

3.  Using a Custom Page Template

Much like the above, create a function and then load it. But instead of needing to use a conditional tag to select where the page is loaded, it will only work on pages where the template is in use.

For example below is the Genesis Framework blog template, which has been modified by calling the Prototype javascript library.

<?php
/**
 * Template Name: Blog
 * This file handles blog post listings within a page.
 */

add_action('genesis_meta', 'do_something');
function do_something() {
 if(is_home()) {
    wp_enqueue_script( 'prototype' );
 }
}

genesis();

Any subsequent page using the blog template will now also be loading the Prototype javascript library.

That concludes this Genesis Framework tutorial, if you’ve got any questions, feel free to ask in the comments section below.