As it turns out, there is a major problem with the art direction plugin. Using it with any caching plugin will result in a crazy epic meltdown of your site. Without too much gory detail, in trying to cache my blog CSS-Tricks, I tried all the major caching plugins (DB Cache, WP Super Cache, W3 Total Cache) and ultimately it would trash my WordPress database and serve up white pages. Very not good. The happy ending is that Frederick Townes from W3 Edge and creator of the W3 Total Cache plugin helped me out by patching the art direction plugin and getting CSS-Tricks cached with W3 Total Cache. I would love to release the updated code, but it’s not my code to release. We managed to get in touch with the original author, who said he planed to eventually update it but didn’t sound too particularly interested in the patch.

SO, with that extensive backstory, what is a poor fellow to do if they want to apply custom CSS to pages TODAY? Couple ideas, read on.

style-XXXX.css

One of my “WordPress Wishes” was that you could drop an appropriately named CSS file into a theme and it would recognize it and apply itself to the proper post. For example, /art-direction/style-XXXX.css, where XXXX is the ID of the post.

Reader Hassan commented with a cool idea for the functions.php file:

function artStyle() {
    global $post;
    if (is_single()) {
        $currentID = $post->ID;
        $serverfilepath = TEMPLATEPATH.'/art-direction/style-'.$currentID.'.css';
        $publicfilepath = get_bloginfo('template_url');
        $publicfilepath .= '/art-direction/style-'.$currentID.'.css';
        if (file_exists($serverfilepath)) {
            echo "<link rel='stylesheet' type='text/css' href='$publicfilepath' media='screen' />"."\n";
        }
    }
}
add_action('wp_head', 'artStyle');

I tested it out and it works great. To use it, simply create a new folder called “art-direction” in your theme. Then to style any particular Post or Page, just drop a file in that folder named style-XXXX.css where XXXX is the ID of the Post or Page. When that Post or Page loads, WordPress will look for a file of that name. If it exists, it will load in in the head section.

Custom Panel

Reader Kerrick Long commented another cool solution. Similar to the Art Direction plugin, this adds an input area below the main content writing area. For the functions.php file:

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}

Custom CSS Write Panel

As written, it’s more limiting than the Art Direction plugin as it is for CSS only rather than “anything” (e.g. JavaScript), although that would be a fairly trivial adjustment to what gets echoed out. The Art Direction plugin also allowed the CSS to be applied in other places the post might be output, for example, archives pages, whereas this does not. But to be honest, I never used that anyway.

And so…

Two pretty sweet and totally function solutions by Digging Into WordPress readers. Awesome. Huge thanks to Hassan and Kerrick! I would also love to see the Art Direction plugin updated as well, if nothing else, because I’m sure people download that plugin every single day from the plugin repository and have caching going on their blogs and end up in the same sore spot I was.

© 2010 Digging into WordPress | Permalink | 29 comments | Add to del.icio.us | Post tags: CSS, Design, functions, header