I bet that caught your attention! Anyone who’s played with CSS knows it does not have conditional statements.

But CSS, in a sense, is naturally conditional. By giving an element on a page a class, you can mimic conditionality.

WordPress has some very useful built in classes that can be used in that conditional sense.

Most useful,are those are called in the body tag and include: home, blog, single, archive, category and  page

The condition (i.e. what type of page) has already been identified and applied by WordPress. It’s then just a simple matter for you to use it.

For example, mabe you want a different header image for each page type but the same for all post type pages. So you’d set a default image and then over-ride it on the required pages. Such as:

body.custom.home div:#header {background:url(home image path) no-repeat:}

body.custom.page div:#header {background:url(page image path) no-repeat:}

Essentially, this code says “If home then  show home header image; else if page then show page header image; else show standard header image”

Study the body tag and its classes. You can even zero in on specific pages or posts if you know their ID.

With the power invested in you by Clay in granting you use of Headway, you can do some pretty wild things with these page identifying classes combined with leafs. Being able to pull in content from any other page is one of Headway’s super powers.

On the  UMFC development site I’ve used this technique to show a background image on the container, and a transparent png on the content.

(Bear in mind this is where I’m testing Headway to see if it works on that site, so many pages are not configured. Go to the About page or Family Day Care, to see the default layout.)

Why would you do this? Well, you probably wouldn’t need to because in Headway it is so easy you’d just set up the home page different anyway. But I did it anyway probably because I decided in this case, with such small variation,  it was easier to manage.

You can argue otherwise, but really, whether it’s the best way or not, the point of this little tutorial is about making you think more deeply and creatively about how you can manipulate page layouts in Headway to achieve more complex designs.

Questions?

Related posts:

1. Tutorial: Conditional Leafs in WordPress Headway (part 2)
2. Screencast tutorial: Styling Multiple Leafs with Custom CSS Classes in WordPress Headway
3. Tutorial: Coding a complex design using the WordPress Headway framework
4. Headway tips: Using Custom Classes in Leafs
5. Tutorial: Using Multiple Content Blocks plugin in Headway for WordPress