3

I have added the add_theme_support( 'custom-background'); function to my functions.php but the css added to the wp_head isn't the way I want it to be.

<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url('http://localhost/wordpress/wp-content/uploads/2016/05/bg_green_dark.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
</style>

I have a div as background.

<div id="bg"></div>

And I want to add custom-background to the div instead of the body.

Is there any way to do that?

8

Yes, that is possible. Take a look at the codex and you will see that you can pass arguments with add_theme_support( 'custom-background'). One of them is the callback function that generates the <style> tags: _custom_background_cb. You can pass your own function as an argument to add_theme_support.

Here is the code of the original function (retrieved from WP 4.5, please check if you read this later):

function _custom_background_cb() {
    // $background is the saved custom image, or the default image.
    $background = set_url_scheme( get_background_image() );

    // $color is the saved custom color.
    // A default has to be specified in style.css. It will not be printed here.
    $color = get_background_color();

    if ( $color === get_theme_support( 'custom-background', 'default-color' ) ) {
        $color = false;
    }

    if ( ! $background && ! $color )
        return;

    $style = $color ? "background-color: #$color;" : '';

    if ( $background ) {
        $image = " background-image: url('$background');";

        $repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
        if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
            $repeat = 'repeat';
        $repeat = " background-repeat: $repeat;";

        $position = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
        if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
            $position = 'left';
        $position = " background-position: top $position;";

        $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
        if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
            $attachment = 'scroll';
        $attachment = " background-attachment: $attachment;";

        $style .= $image . $repeat . $position . $attachment;
    }
?>
<style type="text/css" id="custom-background-css">
body.custom-background { <?php echo trim( $style ); ?> }
</style>
<?php
}

Copy this, rename it wpse228339_callback_function (or so), change the last lines where the css is printed and pass it as a callback like this:

$defaults = array(
    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => '',
    'default-position-x'     => '',
    'default-attachment'     => '',
    'wp-head-callback'       => 'wpse228339_callback_function',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );
| improve this answer | |
  • Hey cjbj, I got it working, but is there any way to remove the attachments, such as background position, etc? – J. Doe May 31 '16 at 15:04
  • Well, you can kill them effectively by removing the corresponding code in the function above. But I suppose you also don't want them to show up in the customizer? Your lead is here: wordpress.stackexchange.com/questions/58932/… – cjbj May 31 '16 at 15:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.