**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:
- The code can easily be unhooked and removed
- The code makes setting defaults easy, which is not part of WordPress, which is perfect for Child Themes
- A few filters to customize even further
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]
this code with default bgimage don’t work , do you know why ? I was placed this in function.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;
}
”
first part code is works perfect !
PS . my modification in code
$defaults[‘default_img’] = CHILD_URL.’/images/bg.png’;
Hey, this sounds pretty fantastic, I’m trying to understand as I’m not advanced with code enough to really get what you’re doing here.
I am trying to make custom backgrounds on separate pages of the Genesis child associate.
Does this allow custom background images for separate pages on a child theme?
example: page id48 uses background1.jpg, page id57 uses background2.jpg and on and on?
Thanks for any help you might offer.
Ryan
Hello Ryan,
Yes, and I would use my Genesis Custom Backgrounds plugin and filter the output. You would do this by something like this:
[php]
add_filter( ‘gcb_output’ , ‘wps_child_filter’, 10, 3 );
function wps_child_filter( $output , $bgimage , $bgcolor ) {
global $post;
$bgimage_old = $bgimage;
switch( $post->ID ) {
case 12:
$bgimage = ‘my-special-img-1.png’;
break;
case 13:
$bgimage = ‘my-special-img-2.png’;
break;
default:
$bgimage = ‘my-default-img.png’;
break;
}
// Replace old image with the new one
$new_output = str_replace( $bgimage_old, $bgimage, $output );
return $new_output;
}[/php]
Of course this code is untested, and written rather quickly, but it should work. Please let me know how it turns out (with a link)!