Per-post custom backgrounds in WordPress

Recently I needed to have a category where each post in the category had a different background.  Wordpress doesn’t have something specifically for that – it’s a rather obscure need, really.  It’s not everyday that you need to put the tartan for each Scottish clan on each clan’s post.  Last year I did it a little differently – I had a single page with multiple articles in a table, and put the tartan image in the <td> for each section.

However, the customer needed a bit more flexibility this time – each clan needed it’s own post for various reasons.

I COULD have just added a div inside the post and make it the background image in the div, but for some reason I really didn’t like doing it that way – it sort of feels “un-Wordpresslike”, and should be something I can either define with a plugin, or using metatags and a quick change to a theme.  I went for the latter – a plugin isn’t quite universal enough, since some themes do things ever so slightly different.

First, I made a change to two file – archive.php and single.php.  Archive.php handles displaying an entire category’s posts, and single.php displays a single post.  To make the same changes I did, scroll down to:

<div class=”entry”>

It could be slightly different depending on what theme you are using.  Now, change that to:

<div class=”entry” <?php if(get_post_meta($post->ID, “imageBackground”, “true”)) {
echo(‘style=”background-image: url(‘ . get_post_meta($post->ID, “imageBackground”, “true”) . ‘);”‘);
}
?>

>

What this does is add a conditional in the middle of the div – you’ll notice the div isn’t closed properly before the <?php portion – it’s closed after the script runs. Change that in both archive.php and single.php (or the equivalents in your theme).

Now for the second part – in any post you want a custom background for your post, add imageBackground as a custom metatag, and in the value section of the metatag, add the path to the image you want to use, like this:

In any post that you don’t define a meta tag, nothing extra happens, so no worries there.  In any post that you define imageBackground, it uses the background.  Simple 🙂  A quick example:

Not the prettiest background textures in the word – in fact, I need to replace them with new ones this year (last year it made a little more sense to use the dark, muddled colors, but with things bordered and brightened up this year it doesn’t work as nicely, and I need them to be brighter.

But the idea works – and for anyone who hasn’t played with custom metatags in wordpress it shows off a quick and simple way to make use of ’em. get_post_meta($post->ID, “yourmetatag”, “true”) will generally pull your meta tag to play with inside of a template (well, I’m simplifying a bit – inside of the ‘loop’ in WordPress. $post->ID, for instance, only works when you have a post currently loaded. Read up on the loop at the WordPress site sometime to get a better idea about that 🙂