Saturday, 8 June 2013

Add theme support for Custom Background

custom_background_theme_support_for_wordpress
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 :
  add_custom_background();
 endif;
}

// 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;
}
</style>

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

4 comments:

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

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

      Delete
  2. Really Nice Information,Thank You Very Much For Sharing.
    Wordpress Development Company

    ReplyDelete