Wordpress theme custom background feature doesn't edit the background correctly

1
votes

I'm building a custom Wordpress theme and I'm trying to add the ability to use a custom background through the admin panel. I used the example given here in the WP codex. I'm using WordPress 3.5.2

I am getting the background option and it all appears to work fine until I actual view the page. I have noticed that it adds an internal style which refers to a body with class name "custom-background" but the body's actual class is "customize-support". When I adjust these using Chrome's debug it applies the correct styling so is it a bug in a Wordpress function somewhere? I've tried to find where it would give the body that class but can't find anything.

functions.php from theme

    <?php
/*
 * Adds the custom header option to the theme
 */
function addthemeoptions(){
    //Default values of the header image
    $header_defaults = array(
    'default-image'          => '%s/images/header.png',
    'random-default'         => false,
    'flex-height'            => false,
    'flex-width'             => false,
    'default-text-color'     => '',
    'header-text'            => false,
    'uploads'                => true,
    'wp-head-callback'       => '',
    'admin-head-callback'    => '',
    'admin-preview-callback' => '',
);
    //Adds the support to use custom header images
    add_theme_support( 'custom-header', $header_defaults );

    $background_defaults = array(
    'default-color'          => '#000000',
    'default-image'          => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $background_defaults );
}

//Execute our custom theme functionality
add_action( 'after_setup_theme', 'addthemeoptions' );

?>

generated style in head

<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #0a0a0a; }
</style>

body tag from debug

<body class=" customize-support" style>

Thanks in advance

Edit: I've found a temporary fix to just add the correct class value into my header.php where body tag is opened but I feel there should be a more complete solution as I'm hard-correcting something that should be generated correctly by a function in WordPress?

3
wordpressbackgroundthemes
using some framework ? - Shumail
No framework just modified the example given in the WP codex - rosscooper

3 Answers

3
votes

Your body tag inside header.php should look: <body <?php body_class(''); ?>>

0
votes

i had the same problem and i found in the codex custom background in the last line : ** To override this default behavior, you would have to provide a replacement for the _custom_background_cb() function. **

so i tried to over ride it by coding my own function my_custom_background_cb like this:

$args_background = array(
        'default-image'          => '',
        'default-preset'         => 'default', // 'default', 'fill', 'fit', 'repeat', 'custom'
        'default-position-x'     => 'center',    // 'left', 'center', 'right'
        'default-position-y'     => 'center',     // 'top', 'center', 'bottom'
        'default-size'           => 'auto',    // 'auto', 'contain', 'cover'
        'default-repeat'         => 'repeat',  // 'repeat-x', 'repeat-y', 'repeat', 'no-repeat'
        'default-attachment'     => 'fixed',  // 'scroll', 'fixed'
        'default-color'          => '#fff',
        'wp-head-callback'       => 'my_custom_background_cb',
        'admin-head-callback'    => '',
        'admin-preview-callback' => '',
    );
    add_theme_support( 'custom-background', $args_background);
    function my_custom_background_cb() {
        echo '<style>';
        //your custom css
        echo '</style>';
    }

i'm now working on how to remove the backround color control from the default colors section.

Edit: okay, in customizer.php just remove the default color section and add yours like this:

// removing the default color sections from customizer
    $wp_customize->remove_section('colors');
    // colors Options Section
    $wp_customize->add_section('sec_colors', array(
        'title'         => esc_attr__('Colors Options', 'yourtheme'),
        'description'   => sprintf(__('Colors Options for theme', 'yourtheme')),
        'priority'      => 60,
    ));

then add your custom colors settings and controls. it works with me, hope to you too. Happy Coding

Edit 2: sorry for the second edit :D , but i found that we need to replace the default wp-head-callback function with our custom function custom_custom_background_cb 'as i found a bug', i also deleted all codes related to color as we created our color options like this:

function custom_custom_background_cb() {
        // $background is the saved custom image, or the default image.
        $background = set_url_scheme( get_background_image() );
        if ( ! $background )
            return;
        $style ='';
        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
    }

Happy Coding Again

-1
votes

I had this problem, had just a <script type="text/javascript> opened, missing </script