Create A Custom Background For Wordpress

Custom backgrounds is a Wordpress theme feature that allows the users of the theme to change the style of the background. It allows the users to pick a new color or a new image for the background. When the user selects a new background Wordpress will add a new style to the body tag inside the HTML head tag like this code.

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

Since Wordpress 3.4 you have been able to use the add_theme_support() function to add additional features to your theme. These include: - post-formats

• post-thumbnails
• custom-background
• custom-header
• automatic-feed-links
• menus

add_theme_support( 'post-formats' );
add_theme_support( 'post-thumbnails' );<br></br>
add_theme_support( 'custom-background' );
<br></br>add_theme_support( 'custom-header' );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'menus' );

#Custom Background

In this tutorial we are going to look at how to use the custom background feature on your themes. To start off you need to add the add_theme_support( 'custom-background' ); to the functions.php file.

add_theme_support( 'custom-background' );

This will add a new menu item to your admin area where you can edit the background of the theme. You don't always want the user to change the background color of a design that you careful created so you can set defaults to the background values by passing in a second parameter to the add_theme_support() function.

$defaults = array(
	'default-color'          => '',
	'default-image'          => '',
	'wp-head-callback'       => '_custom_background_cb',
	'admin-head-callback'    => '',
	'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

#Example Of Using Custom Background

An example using default '#000000' background color with 'background.jpg' background image:

$args = array(
	'default-color' => '000000',
	'default-image' => get_template_directory_uri() . '/images/background.jpg',
);
add_theme_support( 'custom-background', $args );

#Custom Headers

Custom headers is another theme feature you need to turn on by adding support for it. You define this the same way as you would the custom background by using the add_theme_support() function with the parameter custom-header. The custom header feature allows you to change the image used in the theme header section and has been around in Wordpress since version 2.1. But it has only been since version 3.4 that you will use the add_theme_support() function to add custom headers to your theme like the code below.

add_theme_support( 'custom-header' );

The same as with the custom backgrounds you can define a set of defaults for the custom headers like so.

$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' => '',
);
add_theme_support( 'custom-header', $defaults );

Using these defaults you can define the default image to be used for the custom header, this can be an image saved in the theme folder and we can get to it by using the function get_template_directory_uri().

$args = array(
	'width'         => 560,
	'height'        => 120,
	'default-image' => get_template_directory_uri() . '/images/custom-header.jpg',
);
add_theme_support( 'custom-header', $args );

#Upload Your Own Header Image

Just like the custom background the site admin user can upload their own images to be used for the custom header. All you have to do is send a variable as one of the defaults when you add support for the custom header. Just define the upload parameter as true and you will be able to add your own images to be the custom header.

$args = array(
	'width'         => 560,
	'height'        => 120,
	'default-image' => get_template_directory_uri() . '/images/custom-header.jpg',
	'uploads'       => true,
);
add_theme_support( 'custom-header', $args );

To use the custom header in your theme, you need to add the function get_header_image(), this will return the URL for your custom header, so you can add this to a image tag in your theme. Open your header.php file and add the following code.

<?php 
        $header_image = get_header_image();
        if ( ! empty( $header_image ) ) { ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" rel="home">
                <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo get_bloginfo( 'name' ); ?>" />
            </a>
<?php } // if ( ! empty( $header_image ) ) 
?>