Skip to content

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.

At this point I got slightly confused – at the top of the file it says:

This code is protected under Creative Commons License: http://creativecommons.org/licenses/by-nc-nd/3.0/

Which is completely contradictory to Woo being GPL and as the file is dependant on WordPress, I’m fairly sure it needs to be GPL too. Either way, as I see it I can still publish the code here. To be totally safe, I’m not going to “alter, transform, or build upon this work”. This does mean we’ve got some code we don’t strictly need, but it won’t have too much of a disastrous effect!

As it’s a fairly big file, you can download it here.

Once you’ve got the file, copy the whole thing into your functions.php file, making sure it goes directly after the closing ?> tag (ie ?><?php ).

We then need to trigger the meta box, which can be done with the following:

$woo_metaboxes = array(

		"image" => array (
			"name"		=> "bg",
			"label" 	=> "Background",
            "type" => "upload",
			"desc"      => "Automatically resized/enlarged but at least 1000px x 800px for it to be big enough."
		),

	);

update_option('woo_custom_template',$woo_metaboxes);   

Add that after the other code, but before the closing ?> tag. Save the file, upload it and create a new post. You’ve now got an uploader which will save images into the custom field ‘bg’.

Resizing the images

The final thing to do now is to just use timthumb to resize the images to a width of 1920px. Simple enough; download timthumb, upload it into your theme’s files and just apply the timbthumb syntax to the code in the header:


body{
background: url(<?php bloginfo('template_url'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo $bg; ?>) fixed no-repeat;
}

And as you can see, that… doesn’t work. The custom field adds http://… to the image URL which timthumb doesn’t like.

At this point, I pondered a bit, tried (and failed) at a couple of solutions so did the only thing I could; grovelled with Ben to give me a hand. Thankfully, he agreed and told me I needed to encode my URLs, which means you’ll need to change the code to this:

body{
background: url(<?php bloginfo('template_url'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo urlencode($bg); ?>) fixed no-repeat;
}

And finally

Which leaves us with a really easy to use custom background uploader. You can check it out in action on the new look Nometet! Speaking of which, I’d really appreciate it if you gave the site a look; it’s a web based video game magazine.

Alex Denning

4 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
kuku
November 2, 2011 11:06 am

hmm,realy useful thing.
thanks

Daniel
January 22, 2011 8:01 am

Hello, I’m blundering my way through building a wordpress site with this feature, but can you expound a bit on where to put the

body{
background: url(/tools/timthumb.php?w=1920&zc=1&src=) fixed no-repeat;
}

code? You say “in the header”, but where am I looking? css? php?

Thanks in advance…

Thao
November 2, 2010 8:45 am

This does look awesome. Q on the images …

– You got the size set to 1920px. So if an image is uploaded that is smaller than 1920px it gets scaled up?

flashmac
July 1, 2010 11:47 am

Brilliant. About to start major changes to my blog and this fits in beautifully.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

25 Best Free WordPress Themes (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...