rss

Simpler code & styling with conditional tags

11 Apr, 2008 MarkB Header, Styling

Image by disownedlight

WordPress provides an awesome way of minimizing the extra coding you might have to do on each template that you create. You’ll more than likely have a slightly different way of styling your page.php, single.php and archive.php. Thus on each of those templates you’d have to add a different class or id in order to edit the styling in your CSS. Here’s how you can make this a much simpler process…

Your header.php should include the opening tag. (If it doesn’t you’ll need to add this line of code to each of the files that have your tag)

Basically, this conditional tag says that if the current page is home, then use the following CSS class.

<? if (is_home()) { ?>class="homepage"<? } ?>

If you’re going to have no need to style the single.php and page.php templates differently, then you can tweak the conditional tag to have 2 features like so:

<? if (is_single() || is_page()) { ?>class="insidepages"<? } ?>

Once you know what templates you’re going to be using throughout your site, you can then have a conditional tag in your body that’ll style each page with a different CSS ID or class.

<body <? if (is_home()) { ?>class="home"<? } elseif (is_single() || is_page()) { ?>class="insidepages"<? } elseif (is_archive() || is_search() || is_tag()) { ?>class="archive"<? } ?></body>

This can of course be applied to any other block level element you’d like. I personally like using the body so that my coding can be as simple and neat as possible.

Leave a Reply

About The WordPress Guru

Over the last 4 or 5 years, I’ve been digging into the Wonders of WordPress. From the days when the Classic theme was the shizz until now, WordPress has gone from strength to strength both as the blogging platform of choice for many big players and as a CMS with...

Learn more »