Meta-templating in WordPress: Appending Local Javascript and Stylesheets using Global Variables
Saturday, April 11th 2009In the last post, I talked about how we could make more efficient sidebars in WordPress by using a get_widget() function. In our ongoing war against WordPress if conditionals, I'd like to show you how I make my header.php more flexible through "meta-templating." With a simple for-loop in the header.php and footer.php, we can append stylesheets and javascripts specific to a template. The end result? A cleaner header.php and no if conditionals.
The CSS Autoappender
First things first: we need a for-loop that will append stylesheets to the <head> of each template. We will declare a global array, $local_stylesheet that we can use later in our template. In the header.php, right after your stylesheet
tag, put the following for-loop:
global $local_stylesheet;
if ($local_stylesheet) {
for ($i=0; $i < sizeof($local_stylesheet); $i++) {
echo '<link rel="stylesheet" href="'.get_bloginfo('template_url').'/'.$local_stylesheet[$i].'" type="text/css" media="screen" />';
}
}
Now you can save your local stylesheets in your theme's folder. (Although, as we'll see later on in this series, the goal is to have as few stylesheets as possible so that we can score well when we test of blog for performance using YSlow.)
The Javascript Autoappender
Next, we need to put a for-loop in our <footer>, where we'll append each external javascript. We append our javascripts in the footer because it improves performance to load javascript after the page has loaded. Right before the wp_footer(); call in footer.php, put the following:
global $local_js;
if ($local_js) {
for ($i=0; $i < sizeof($local_js); $i++) {
// if the array contains a js with an http://, display the whole path
if (stristr($local_js[$i],"http://")) {
echo "\n ";
echo '<script type="text/javascript" src="'.$local_js[$i].'"></script>';
} else {
echo "\n ";
echo '<script type="text/javascript" src="'.get_bloginfo('template_url').'/scripts/'.$local_js[$i].'"></script>';
}
}
}
Now we can put all our javascripts within the /scripts/ folder in our theme's folder (you can organize them within subfolders if you wish). Notice that in our javascript autoappender, we check our global array, $local_js to see if any of the scripts are being appending from outside the website. If any of the variables in the $local_js array has "http://" in the value, then we don't look inside the /scripts/ folder in our theme's folder and instead point to the absolute path on the web.
Using Our Autoappenders in the Templates
Now that we have the arrays $local_js and $local_stylesheet declared in our header, we can use them in our templates. This code goes right before get_header(); in your template, like so:
/**
* @package WordPress
* @subpackage Your Theme's Name
*/
/*
Template Name: Name of Template
*/
global $local_stylesheet;
global $local_js;
$local_stylesheet = array("name-of-stylesheet.css","another-css.css");
$local_js = array('subfolder/name-of-javascript.js','another-javascript.js','http://www.domain.com/an-offsite-script.js');
Voila! Now you can append as many local stylesheets to your header.php and local javascripts to your footer.php as you want, on a template-by-template basis.
