Title: custom headers – Make WordPress Themes

---

#  Tag Archives: custom headers

 [  ](https://profiles.wordpress.org/chipbennett/) [Chip Bennett](https://profiles.wordpress.org/chipbennett/)
2:58 pm _on_ April 6, 2012     
Tags: [3.4 ( 4 )](https://make.wordpress.org/themes/tags/3-4/),
custom backgrounds, custom headers   

# 󠀁[Updating Custom Backgrounds and Custom Headers for WordPress 3.4](https://make.wordpress.org/themes/2012/04/06/updating-custom-backgrounds-and-custom-headers-for-wordpress-3-4/)󠁿

When WordPress 3.4 is released, the old implementation methods for [custom backgrounds](https://codex.wordpress.org/Custom_Backgrounds)
and [custom image headers](https://codex.wordpress.org/Custom_Headers) via [`add_custom_background()`](https://codex.wordpress.org/Function_Reference/add_custom_background)
and [`add_custom_image_header()`](https://codex.wordpress.org/Function_Reference/add_custom_image_header)
will be [deprecated](https://core.trac.wordpress.org/ticket/20249), in favor of 
a much simpler – and much more powerful – implementation method, using [`add_theme_support()`](https://codex.wordpress.org/Function_Reference/add_theme_support).
Here’s how to update your existing Themes to use the new implementation.

## Custom Backgrounds

Old method:

> `add_custom_background();`

New method:

> `add_theme_support( 'custom-background' );`

(Admit it: that was easy, wasn’t it?)

Now for the fun part: `add_theme_support( 'custom-background', $args )`. What’s 
that: `$args`, you say? Yes! This method accepts an arguments array. Here are the
defaults:

>     ```
>     $defaults = array( 
>     	'default-image' => '',
>     	'default-color' => '',
>     	'wp-head-callback' => '_custom_background_cb',
>     	'admin-head-callback' => '',
>     	'admin-preview-callback' => ''
>     )
>     ```
> 

Defining a default background image or default background color just became dead-
simple:

>     ```
>     add_theme_support( 'custom-background', array(
>     	// Background color default
>     	'default-color' => '000',
>     	// Background image default
>     	'default-image' => get_template_directory_uri() . '/images/background.jpg'
>     ) );
>     ```
> 

You may notice that the arguments array also includes the same callbacks that have
always been available for custom image headerHeader The header of your site is typically
the first thing people will experience. The masthead or header art located across
the top of your page is part of the look and feel of your website. It can influence
a visitor’s opinion about your content and you/ your organization’s brand. It may
also look different on different screen sizes. implementation, so you also have 
more control over the front-end style definitions as well as the admin display.

## Custom Headers

Old method:

>     ```
>     // Define default header image constant
>     define( 'HEADER_IMAGE', get_template_directory_uri() . '/images/headers/default.jpg' );
>     // Define header image width constant
>     define( 'HEADER_IMAGE_WIDTH', 1000 );
>     // Define header image height constant
>     define( 'HEADER_IMAGE_HEIGHT', 198 );
>     // Define header text constant
>     define( 'NO_HEADER_TEXT', false );
>     // Define header text color constant
>     define( 'HEADER_TEXTCOLOR', '000' );
>     // Turn on random header image rotation by default.
>     // Requires HEADER_IMAGE to be null
>     add_theme_support( 'custom-header', array( 'random-default' => true ) );
> 
>     // Add Theme support
>     add_custom_image_header( $wphead_cb, $adminhead_cb, $adminpreview_cb );
>     ```
> 

New method:

>     ```
>     add_theme_support( 'custom-header', array(
>     	// Header image default
>     	'default-image'			=> get_template_directory_uri() . '/images/headers/default.jpg',
>     	// Header text display default
>     	'header-text'			=> false,
>     	// Header text color default
>     	'default-text-color'		=> '000',
>     	// Header image width (in pixels)
>     	'width'				=> 1000,
>     	// Header image height (in pixels)
>     	'height'			=> 198,
>     	// Header image random rotation default
>     	'random-default'		=> false,
>     	// Template header style callback
>     	'wp-head-callback'		=> $wphead_cb,
>     	// Admin header style callback
>     	'admin-head-callback'		=> $adminhead_cb,
>     	// Admin preview style callback
>     	'admin-preview-callback'	=> $adminpreview_cb
>     ) );
>     ```
> 

Again: that was easy, wasn’t it?

Just to clarify, here are the old-constant/new-array-key equivalents:

>     ```
>     HEADER_IMAGE		=> 'default-image'
>     HEADER_IMAGE_WIDTH	=> 'width'
>     HEADER_IMAGE_HEIGHT	=> 'height'
>     NO_HEADER_TEXT		=> 'header-text'
>     HEADER_TEXTCOLOR	=> 'default-text-color'
>     ```
> 

All of the same callbacks are supported, exactly as before.

For reference, here is the complete defaults array:

>     ```
>     $defaults = array(
>     	'default-image' => '',
>     	'random-default' => false,
>     	'width' => 0,
>     	'height' => 0,
>     	'flex-height' => false,
>     	'flex-width' => false,
>     	'default-text-color' => '',
>     	'header-text' => true,
>     	'uploads' => true,
>     	'wp-head-callback' => '',
>     	'admin-head-callback' => '',
>     	'admin-preview-callback' => '',
>     );
>     ```
> 

As you can see from the defaults array, this new implementation adds some new functionality:
flexible headers. See [Amy Hendrix’s excellent write-up](http://sabreuse.com/flexible-headers-in-wordpress-3-4-themes/)
for more information on this feature.

[#3-4](https://make.wordpress.org/themes/tags/3-4/), [#custom-backgrounds](https://make.wordpress.org/themes/tags/custom-backgrounds/),
[#custom-headers](https://make.wordpress.org/themes/tags/custom-headers/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fthemes%2F2012%2F04%2F06%2Fupdating-custom-backgrounds-and-custom-headers-for-wordpress-3-4%2F%23respond&locale=en_US)