Another WordPress Development Blog

Using custom background function to style any other div


Since version 3.0 wordpress developers have a new design option to play with. It’s about the add_custom_background() function , a new and comfortable way to manage your theme background without editing the css file.

To enable the custom background feature in a theme you just need to paste the add_custom_background(); command in functions.php file and you are in complete control of the background.

Today’s trick is about using the custom background css interface to style any particular div and not the actual theme background.

For this we have to do the following :
- Copy paste the code below in functions.php

function new_custom_background_cb() {
$background = get_background_image();
$color = get_background_color();
if ( ! $background && ! $color )
return;

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

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

$repeat = get_theme_mod( 'background_repeat', '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', 'left' );
if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
$position = 'left';
$position = " background-position: top $position;";

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

$style .= $image . $repeat . $position . $attachment;
}
?>
<style type="text/css">
#page { <?php echo trim( $style ); ?> }
</style>
<?php
}

The function has the same code as _custom_background_cb() function, that you can found in theme.php and is responsible with building the background style . The only change is on line #page { <?php echo trim( $style ); ?> }.

Here we just replaced the body with #page. So the generated style will be applied to the #page div (or another div that you chose) instead of body.

To call the modified function you just need to add her name as first parameters for the add_custom_background();
So add this line in functions.php and your done


add_custom_background(new_custom_background_cb,'','');

The second trick is to make the custom style sheet to be applied only on home page.

In the same function as above add if (is_home()) before the <style type=”text/css”> . Of course make sure you close the conditional tag and also you can switch back from #page to body if you want the background only for the main page.

The code will look like :

// the rest of the original function.
if (is_home()){
?>

<style type="text/css">
body { <?php echo trim( $style ); ?> }
</style>
<?php
}
}

Random Posts

Leave a Reply

One Response to “Using custom background function to style any other div”

moonpixel said on 5 November 2010 at 1:57 am

Nice one, liking your solution…