Did Your WordPress Custom Background Disappear After a WordPress 3.3 Upgrade?

Did Your WordPress Custom Background Disappear After a WordPress 3.3 Upgrade?

Posted by Rainey

WordPress 3.3 had many great changes, but one did catch me off guard.  I may have overlooked it, but I did not see this documented anywhere.  So, emails began trickling in as sites running themes that I developed are upgraded to 3.3.Fortunately, the fix for this problem is relatively easy.

The Problem

Before WordPress 3.3, the WP core created a new style to apply the custom background to the body tag.

This is the old way it functioned:

<style type="text/css">
body { background-color: #fc2727; }

Now, WordPress 3.3 creates a style that looks for a class (custom-background) on your body tag.

Here is the new style rendered by WordPress:

<style type="text/css">
body.custom-background { background-color: #fc2727; }

So, if you do not have this class added to your theme, you get no background image.


The Solution

Of course the easiest fix would be to add a “custom-background” class directly to your your body tag.

<body class="custom-background">

But, if you do that, you will be missing out on so many other classes that could be very useful to you (full list of these at the bottom of the post). Replacing your <body> tag with the body_class() will fix this automatically for you and is the suggested method for rendering your body tag in WordPress. The body_class() also allows WordPress to add other classes to your body tag like logged-in, home, blog, and search to name a few.

The body_class() looks like this:

<body <?php body_class(''); ?>>

But, if you are like me, you will need to add a few other classes as well.  This can be done like this:

<body <?php body_class('class-name'); ?>>

Or, if you have more than one class name, just space them as you normally would:

<body <?php body_class('class-name-1 class-name-2'); ?>>

This approach can even be used to grab stored variables for your class names.  In the example below, I am calling options that a user has selected in their theme (the theme color and the theme font) and concatenating them together with a space between them. These options could be anything predefined elsewhere.

<?php body_class(ts_get_option('ts_theme_color')." ".ts_get_option('ts_theme_font')); ?>>

List of classes that WordPress will add to the body tag:

  • rtl
  • home
  • blog
  • archive
  • date
  • search
  • paged
  • attachment
  • error404
  • single postid-(id)
  • page-id-(page_id)
  • attachmentid-(id)
  • attachment-(mime-type)
  • author
  • author-(user_nicename)
  • category
  • category-(slug)
  • tag
  • tag-(slug)
  • page-parent
  • page-child parent-pageid-(id)
  • page-template page-template-(template file name)
  • search-results
  • search-no-results
  • logged-in
  • paged-(page number)
  • single-paged-(page number)
  • page-paged-(page number)
  • category-paged-(page number)
  • tag-paged-(page number)
  • date-paged-(page number)
  • author-paged-(page number)
  • search-paged-(page number)
  • tax-(taxonomy name) (since 3.1)
  • term-(term name) (since 3.1)
  • admin-bar (since 3.1)

Hopefully this tip was useful and the cool WordPress logo above is a wallpaper available here.

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required

    Today in Web Design - Tutorials