Image Courtesy Michelle Chance-Sangthon

If you’re not a fan of using a WordPress SEO plugin to manage your page title’s etc, then there’s a very good way to do this yourself by using WordPress Conditional Tags.

Essentially what you’re doing is adding an if/else statement that caters for your different template types.  Your standard title tag might look something like this:

<? bloginfo('name'); ?> | <? bloginfo('description'); ?>

This would make the title of your webpage be the title of your site, followed by a pipe “|” and then the description of your site (as entered in your WordPress settings). However the problem with this is that your other pages are then not optimized using that page or posts title. What you want to do then, is make conditional statements that give a unique title on each page. This is the code you’re going to use:

<title>
 <? if ( is_home() ) { ?><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
 <? if ( is_search() ) { ?>Search Results | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_author() ) { global $wp_query; $curauth = $wp_query->get_queried_object(); ?>Author Archives | <?php echo $curauth->nickname; ?> | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_single() ) { ?><?php wp_title(''); ?> | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_page() ) { ?><?php wp_title(''); ?> | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_category() ) { ?><?php single_cat_title(); ?> | Archive | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_year() ) { ?><?php the_time('Y'); ?> | Archive | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_month() ) { ?><?php the_time('F Y'); ?> | Archive | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_day() ) { ?><?php the_time('d F Y'); ?> | Archive | <?php bloginfo('name'); ?><?php } ?>
 <? if ( is_404() ) { ?>Page not found...<?php } ?>
<? if (function_exists('is_tag')) { if (is_tag()) { ?><?php single_tag_title("", true); ?> | Tag Archive | <?php bloginfo('name'); ?><?php } } ?>
</title>

What you have now is a page title that is setup to display a unique title for each of your main WordPress templates.

Have you tried a different method? Let us know in the comments.

The basics

You’re basically going to setup a number of if/else statements in your template where you want your header image to appear. The final statement will be an else statement so that if none of the above rules apply, it’ll degrade so that you’ll always have a header image on your page.

You’re going to create a custom field that has the name of the image that you want to use as a header image. You don’t have to add the full path to the image. Since you’re uploading your custom image in the WordPress uploader, it’ll always end up in the same folder and so the path to the image will be entered in the template.

The how-to

So firstly create your image, and upload it to your page.

Then add a custom field called “header” and put the name of the file as the value of the field.

Then open up your template where you want your image to appear and add the following PHP – tailored to work as you need it to…

<? if (get_post_meta($post->ID, 'header', true)) { ?>
	<img src="<? bloginfo('url'); ?>/wp-content/uploads/<? echo get_post_meta($post->ID, 'header', true) ?>" alt="<? bloginfo('name'); ?>" />
<? } else { ?>
	<img src="<? bloginfo('template_directory'); ?>/images/header.jpg" />
<? } ?>

So what you’ve now done, is tell the template to check if the custom field “header” has a value. If it does, then use that value to display your image. However, if the custom field is empty, then it’ll degrade to the second default image that you specify.

And presto: you can now use your WP admin to control header images on each page. This is also a good way to do it because now your client can update/add his header images on his own without having to bug you.

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.