Wednesday, November 10, 2010

Changing Headers with WordPress body_class()

WordPress 2.8 introduced a new function — body_class() — that attaches a list of classes to the element according to what type of page is being displayed. These classes can be used — in conjunction with your theme’s stylesheet — to display different headers on different page types.

Let’s assume your header markup looks something like:

<body <?php body_class(); ?>>
<div id="header">
<div id="headerimg">
<h1>
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>
<div class="description"><?php bloginfo('description'); ?>
</div>
</div>
</div>

And your current CSS for the header looks like:

#header {background: #73a0c5 url(images/header.jpg) no-repeat left top;}

<body <?php if (function_exists('body_class')) body_class(); ?>>


#header { 
background-color:#73a0c5;
ackground-image:url(images/header.jpg;
background_repeat:no-repeat;
background-position:left top;
}

body.category #header url{background-image:url(images/header2.jpg;}

No comments:

Post a Comment