Add custom background in WordPress theme

custom-background

Add custom background in WordPress theme

Custom background is a WordPress feature that allows you to customize background color/image from backend. Custom background gives your blog to a nice look. You can add default color and image. For enable custom background you have to use this function in your function.php file within themeslug_setup() function.

add_theme_support( 'custom-background' );

After using this you can see the background menu option under appearance menu. Make sure you theme header file have body_class() inside body tag and wp_head(); within the head tag like this:

<body <?php body_class(); ?>>

So whenever you can add background color or image this function can generate a style within head tag and it will override your theme stylesheet. Now let me show you some functions which allows you set up default color and image.



Here is the full code:

$custom_bg = array(
	'default-color'          => '',
	'default-image'          => '',
	'default-repeat'         => '',
	'default-position-x'     => '',
	'default-attachment'     => '',
	'wp-head-callback'       => '_custom_background_cb',
	'admin-head-callback'    => '',
	'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $custom_bg);

Hope you like this article. We welcomes your question and comments.
Thanks for reading.

4 thoughts on “Add custom background in WordPress theme

  1. hello ..

    Any chance you could explain how to add a background for a page rather than a post?
    Am hoping to add individual images for various pages with opacity set so text is readable …

    thanks

  2. 3
    4
    5
    6
    7
    8
    9
    10
    11
    $custom_bg = array(
    ‘default-color’ => ”,
    ‘default-image’ => ”,
    ‘default-repeat’ => ”,
    ‘default-position-x’ => ”,
    ‘default-attachment’ => ”,
    ‘wp-head-callback’ => ‘_custom_background_cb’,
    ‘admin-head-callback’ => ”,
    ‘admin-preview-callback’ => ”
    );
    add_theme_support( ‘custom-background’, $custom_bg);

Leave a Reply

Your email address will not be published. Required fields are marked *