How to Enable Custom Background in WordPress 3.0 Themes

Posted on April 11th, 2010 by in Themes | 24 Comments  
How to Enable Custom Background in WordPress 3.0 Themes

WordPress 3.0 introduces a new feature called custom backgrounds for WordPress themes. This feature will give the user an ability to add custom backgrounds to their site which will give their blogs/sites a unique touch. Even though this feature is added to the core, it will only be activated if your theme supports it. In this article, we will show you how you can enable Custom Background in WordPress themes for WordPress 3.0.

Note: This article is intermediate level article focused specially for theme designers.

Video:

Text-tutorial

Simply open your functions.php file and add the following line:

add_custom_background();

Then under appearance you should be able to see an option for Custom backgrounds.

Custom Background in WordPress 3.0

The default twenty ten theme for WordPress 3.0 already has this feature enabled in it.

About

Editorial Staff at WPBeginner mainly Syed and David.

What's Next

Get WPBeginner Articles in your Inbox:

Related Posts
  1. How to Display Post Excerpts in WordPress Themes
  2. How to Add Custom Navigation Menus in WordPress 3.0 Themes
  3. Fixing the Read More Tag Problem in WordPress Static Pages
  4. How to use Thumbnails with Previous and Next Post Links in WordPress
  5. How to Hide the Sidebar on Your WordPress Home Page
Post comment as
twitter logo facebook logo
Sort: Newest | Oldest
Abhimanyu

There seems to be a problem. Just as I select the image file and click upload, it refreshes the page with no result. The 'color' thing works. And, I have tried many browsers.

Any help? Can we do it manually? As in, by some codes?

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Editorial Staff

Do it manually via CSS codes.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
The Raptor

Thank you for this. Implementing it wa actually much more simple than I initially thought

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
John

What is the default size for wordpress backgrounds? i.e. what size should images be for them to fit properly in the background.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Editorial Staff

The best image is the one that can be repeated, so you keep the page load time small. WordPress will only show the background image that fits the screen resolution of the user.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
chartinael

My custom background section doesn't have the display options. I installed 3.01 virgin.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
aleksander

Same situation here:
Fatal error: Call to undefined function add_custom_background() in /mnt/data/www/sinya/aleksander.hu/i.aleksander.hu/wp-content/themes/stylize/functions.php on line 34

what to do?
haven't upgrade yet to 3.0.0

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Editorial Staff

You MUST upgrade to 3.0 before you add this.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Lane

Hey I did what you said but i got this message

Fatal error: Call to undefined function add_custom_background() in /home/patina/ilovepatina.com/wordpress/wp-content/themes/default/functions.php on line 2

And now it won't let me sign in at all to even go into the admin.
Any advice? I need help bad...

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Editorial Staff

Did you upgrade to WordPress 3.0?

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Ed

Hey... that was cool. After my first comment, I am taken to a different page with more information about your website and commenting... how did you make that happen? Plugin?
I'd love to know more.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Editorial Staff

Its a plugin in our Recommended Plugins list. Go to our homepage and look there. :)

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Ed

It is important to note that for this to work within a theme, you must add the wp_head() after your theme stylesheet link in the theme header. This new function adds blocks with the added color/background from within the wp_head() section, and if you call your stylesheet after the wp_head(), your stylesheet will override the custom background function.

I am torn, as I tend to call my stylesheet after the wp_head() call so that I can override styles added by plugins. May need to make a separate stylesheet for plugin overrides to be called later in the header.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Pete

Do you know how we do the custom header image as well?

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Editorial Staff

Hey Pete,

Check out our newest article about Custom Header Image Panel in WordPress

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
gifer

hey thanks,btw is there any demo of it ?

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Editorial Staff

The new twenty-ten theme is the best demo example.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Pete

So how does Wordpress know how to change the background? What if my current theme already has some background css attributes? Which one over-rides the other?

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Editorial Staff

Your current theme would have to be made compatible with this feature. This is article is for theme designers who are creating themes and want to get WordPress 3.0 features in it. You would have to add the function for body class. If WordPress see that someone has updated the Custom Backgrounds page in the admin panel, then it will be prioritized. Otherwise the default background that you specify in the css file prevails.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Dustin Goerndt

Radical! I wonder, can these be done per post or page?

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Editorial Staff

With the default function NO. For that you are better of using a plugin (several exist). The way this function works is it adds styling to the overall body class, so it will be the same for the entire site.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Tweets about us: