Saturday, 8 June 2013

Add theme support for Custom Background

add_theme_support - custom_background

Custom Background in your WordPress Theme is a theme feature that allows you to change the background color or add background image to the Theme.

add_theme_support( 'custom-background' );
This code simply adds a menu item under Appearance in WordPress Dashborad. This code need to be placed in functions.php or any other file linked with functions.php

// Register Theme Features
function custom_theme_features()  {
 global $wp_version;

 // Add theme support for Custom Background
 $background_args = array(
  'default-color'          => '#7a7a7a',
  'default-image'          => get_template_directory_uri() . '/images/background.jpg',
  'wp-head-callback'       => '_custom_background_cb',
  'admin-head-callback'    => '',
  'admin-preview-callback' => '',
 if ( version_compare( $wp_version, '3.4', '>=' ) ) :
  add_theme_support( 'custom-background', $background_args );
 else :

// Hook into the 'after_setup_theme' action
add_action( 'after_setup_theme', 'custom_theme_features' );

How Custom Background works.
The important thing to make this feature work is to add wp_head before the closing </head> tag in your theme header.php. If this is missing the custom background theme support will not work.
This code generates a style in the Head of the theme like this.
<style id="custom-background-css" type="text/css">
body.custom-background body.custom-background {
 background-color: #7a7a7a;
 background-image: url('images/background.png');
 background-repeat: repeat;
 background-position: top left;
 background-attachment: scroll;

Same way add theme support for header works in the presence of wp_head tag.


  1. wow.. is it only use in genesis? or with any framework/theme?

    1. in any WordPress theme or framework. you can test on localhost with different frameworks.