Really Easy Custom Post Backgrounds For WordPress

As I’ve mentioned before, I’ve been having great fun with the new Nometet.com design. It’s now sporting a feature that allows the author to set a custom background for the post just by uploading an image. This image doesn’t even need to be the correct size; that’s all done on the fly. Uploading isn’t hard either; I’ve implemented an uploader that sits inside a meta box so the hardest bit is choosing the image! In this post we’ll have a look at how it’s done.

The uploader we’re going to be using later saves the image URL to a custom field, so first we’re going to get the custom field set up so that all you have to do is input a URL into the custom field and it gets displayed as the background. As I’ve shown before, it’s fairly easy:

<?php
$bg = get_post_custom_values("background");
if ( is_array($bg) ) { ?>

<style type="text/css" media="screen">

body{ background: url(<?php echo $bg ?>) fixed no-repeat; }

</style>

<?php } ?>

But that still means you’ve got to resize the image and copy out the URL into a custom field.

Custom meta uploader

We need an uploader in a meta box. When I was first pondering how to do this, I remembered that WooThemes use(d to use?) them in their themes. So I opened up one and lo and behold, there was a file admin-custom.php (under /functions). This is the bit used for the uploader and other custom meta boxes.