64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).
Advertisement

Modifying Custom Background Feature for Any HTML Element You Want

by
Gift

Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

In the recent new WordPress version, WordPress has added some new features such as Custom Background, Custom Header, etc, you can see this in action in the Twenty Eleven theme. The Custom Background will add a CSS snippet that effects the <body> element's background, what if you only want this feature to effect another element you specify? Maybe the <header>, <content>, or <footer> elements or another HTML tag.


Find Out Something

In this tutorial, I use Twenty Eleven (in WordPress version 3.4) as a demonstration. Below is a function that handles the Custom Background feature for this theme, I found it in functions.php file:

And it was declared in the theme.php file under the wp-includes directory:

We can see the add_theme_support is used without passing the value of wp-head-callback parameter (except for default-color) that means the default callback function will be called. In this case, that is _custom_background_cb. It was also defined in theme.php file:

Notice anything? Yes, the CSS snippet we need in the end of function.


What We Need to Do

In your functions.php file, you add following code:

All you need is to replace body.custom-background with the CSS selector you need. The Custom Background feature will only change the background of the element that you define, not the whole site. These snippets also work with old WordPress versions (3.0 or earlier). All done!

We're basically mimicking the built-in functionality, but tweaking it to suit our own needs.

That's it! Hope you like that quick tip, I would appreciate any comments.

Update: This tutorial has been updated to fix the mistakes mentioned in the comments below. If you notice any other errors, please let us know!

Advertisement