Smartly resolving your WordPress pages and posts JavaScript and CSS dependences

Sometimes you want to include page-specific JavaScript^w or CSS^w files and ended up in cluttered ifs and else ifs or even creating a creepy new page just for that.

Wordpress^w‘s excellent plugin infrastructure with their hooks and actions provides us a beautiful and clean form of including our JavaScript in specific pages.

In this tutorial, we will be using three WordPress functions: get_post_meta() and wp_enqueue_script() and wp_enqueue_style().

Custom Fields

Well, you may have noticed that get_post_meta() is about the custom fields and you’re just right.

We’ll be using posts and pages custom field to add scripts and stylesheet files. I’m using the keys ‘js’ and ‘css’ to JavaScript and CSS files respectively.

If you don’t know how to use custom fields, please visit the WordPress documentation on Custom Fields.

The documentation on these functions are available at WordPress documentation site:

get_post_meta

http://codex.wordpress.org/Function_Reference/get_post_meta

wp_enqueue_style

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

wp_enqueue_script

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

get_post_meta

This function is responsible by getting our custom field entries and returning them as an array.
If one or more entries are found, the array is returned with normal indexes (0..1…) and with the custom field values. If no entries are found, an empty array is returned.

Well, our return type will be always array so foreach will fit perfectly even on an empty set.

header.php file

All code described in the following examples must be placed at least one line before the wp_head() function in your header.php file. if your header.php file is missing a wp_head() call, it shouldn’t. wp_head() function does lots of important things and many plugins use it. Please consider adding it to your code.

wp_enqueue_script and wp_enqueue_style

Some plugin developers may be not aware of these beautiful functions or even how scripts and stylesheets are managed by WordPress.

All scripts and style, when properly set, are enqueued and inserted automatically when wp_head() is called. Enqueuing your scripts and style are a better way other than just hooking wp_head() and printing to the output buffer.

This assures that our scripts and styles will be included only at the wp_head() call and will not be printed out from nowhere messing out peoples templates and plugins.

NOTE: Due the printing menace of script tags and JavaScript code chunks, WP-Minify parses the ENTIRE site output in order to properly minify them.

This technique also prevents overlapping includes of twicely defined entries.

Wordpress gives us respectively wp_enqueue_script and wp_enqueue_style for enqueueing scripts and stylesheets. Both functions receive a script or stylesheet unique identifier as the first parameter and the path as second (more parameters are available, please refer to the documentation for more understanding on this subject).

As this is an automated process, I’m using as unique identifier the md5 hash of the file’s path (the custom field value).

NOTE: This solution is made for JavaScript and CSS files that follows a unique parent directory. Please refer to the examples for more explanation.

So let’s get back to our header.php file just before the wp_head() call that we mentioned before. We also remember that the custom field key for JavaScript files that we’ll be using in this example is ‘js’.

JavaScript files

The following code will use get_post_meta to get the array (empty or not) of JavaScript files that have been set through custom fields under the js folder under our template directory.

foreach($js = get_post_meta($post->ID,'js') as $jscript) wp_enqueue_script(md5($jscript),get_bloginfo('template_directory').'/js/'.$jscript);

CSS files

The following code will use get_post_meta to get the array (empty or not) of CSS files that have been set through custom fields under the css folder under our template directory.

foreach($css = get_post_meta($post->ID,'css') as $style) wp_enqueue_style(md5($style),get_bloginfo('template_directory').'/css/'.$style);

Simple huh? One line each and your problems are solved.

You may now call wp_head() and go drink your coffee!