Site icon WP Smith

How to Add Custom Background Support to a Genesis Child Theme and Set an Easily Changed Default Background

**UPDATE: Since writing this post, I have updated this code to be a plugin with everything. Please feel free to check it out: Genesis Custom Backgrounds.**

I believe it would be really great if Genesis would support custom backgrounds (forum post). Anyways, the newly developed backgrounds (dark, light), while not part of core, could be easily integrated into ANY child theme.

While I am not sure that this will become part of the Genesis core, and if I had to place a bet, I would bet against me. However, the benefits of this code, are as follows:

To install the code, simply paste the following in your functions.php, or download the file at the end of the post.
[php]<?php
/**
* Enables Genesis support of custom backgrounds
*
* @author Travis Smith
*
* @uses add_custom_background() calls standard, filterable callback
* @uses apply_filters() filters callback
*
*/
function genesis_custom_background() {
global $genesis_settings;

$genesis_settings[ 'cb_default' ] = ''; //assuming this will be placed with the other defaults
$cb = apply_filters( 'genesis_custom_background_args' , 'genesis_do_theme_background' );
add_custom_background( $cb );
}
add_action( 'init' , 'genesis_custom_background' );

/**
* Outputs custom backgrounds inline
*
* @author Travis Smith
*
* @uses $genesis_settings for custom background default image
* @uses apply_filters() filters defaults
*
*/
function genesis_do_theme_background() {
global $genesis_settings;

$defaults = array(
'default_img' => ( isset( $genesis_settings['cb_default'] ) ) ? $genesis_settings['cb_default'] : '', //url, e.g., PARENT_URL . "/images/bg/gray/gray-1.png
'bgimage' => get_background_image(),
'bgcolor' => get_background_color(),
);
$defaults = apply_filters( 'genesis_background_defaults' , $defaults );

extract( $defaults , EXTR_SKIP );

// begin output
$output = "<style type='text/css'>n";

if( !empty( $bgimage ) ) {
$background_styles = 'background-image: url('' . get_theme_mod( 'background_image' , '' ) . '');'
. ' background-repeat: ' . get_theme_mod( 'background_repeat' , 'repeat' ) . ';'
. ' background-position: top ' . get_theme_mod( 'background_position_x' , 'left' ) . ';' . 'background-attachment: '. get_theme_mod( 'background_attachment' , 'scroll' );
$output .= "body { " . $background_styles . "); } n";
}

if( !empty( $bgcolor ) ) {
$output .= "body { background-color: #" . $bgcolor . "; }; n";
}

// for child themes to set a default bg img
if( !empty( $default_img ) && empty( $bgcolor ) && empty( $bgimage ) ) {
$output .= "body { background: url('" . $default_img . "'); }n";
}
$output .= "</style>";

echo apply_filters( 'genesis_background_output' , $output , $output, $bgimage , $bgcolor , ( isset( $background_styles ) ) ? $background_styles : '' );
}
[/php]

This would be used by child themes as such:
[php]<?php
add_filter( 'genesis_background_defaults' , 'genesis_custom_background_childdefault' );
function genesis_custom_background_childdefault( $defaults ) {
//change the URL to whatever you'd like
$defaults['default_img'] = CHILD_URL . '/images/bg/gray/gray-1.png';

return $defaults;
}[/php]

If you wanted to include the StudioPress backgrounds, they are released to GPL and can be placed in any child theme folder. So feel free to download them (dark, light).

To download this file, click here: [download id="15"]. Then place it in your child theme folder and include the following in your functions.php file. Assuming you place it in a lib folder within your child theme...
[php]require_once(CHILD_DIR.'/lib/wps-genesis-custom-backgrounds.php');[/php]