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.

You’ll need…

Achieving this thumbnail effect requires a custom field, some CSS, and ideally a screen capturing program. The custom field will capture the URL of the thumbnail image, the CSS will be used to define the exact space the thumbnail will occupy and the screen capturing program will grab the thumbnail itself.

1) Make the thumbnail

Personally, I absolutely love FastStone Capture. The full version will cost you all of $19.95 but I promise you its a purchase that’ll save you bucket loads of time. With it, you can select a marquee area of your screen and it’ll automatically save that selection as a JPG/GIF/PNG image. Of course you can use the normal print-screen feature, crop it in PhotoShop and then save it, but FastStone will do all that for you.

2) Upload it

So once you have your thumbnail image, upload it into WP. In 2.5, the ‘Add Media’ feature will upload the image and then present you with the URL to that image.

Copy the URL and then close the upload dialog. Dont insert the image or anything.

3) Save your custom field

Then create a new custom field called ‘thumb’ (or whatever you like) and copy the URL of that thumbnail image as the value of that key.

At this point, you can save your WP post and open up your code editor of choice…

4) Add the code

Open your index.php or archive.php file, find the loop and insert something like this before the_content() is called:

<div><img src="<? echo get_post_meta($post->ID, 'thumb', true) ?>" /></div>

The wrapping div around that image is there so we can CSS the thumbnail as necessary.

Note that you can also make the image a link to your article like this:

<div><a href= "<? the_permalink(); ?>" title="<? the_title(); ?>"><img src="<? echo get_post_meta($post->ID, 'thumb', true) ?>" /></a></div>

This makes simple use of the loop variables to insert the article URL and title tag of the link.

5) CSS it as necessary

Lets say that you’d like your image to be exactly 100px X 100px at all times and you’d like to float it left so the text wraps up around it to the right. Your CSS would then look like this:

.thumb {
 width:100px;
 height:100px;
 border:5px solid #efefef;
 float:left;
}

NOTE: naturally you’d want the image that you capture to be more than 100×100 so that there’s no whitespace in that div…

6) Enjoy

And thats that… Hopefully that explains it adequately Ruark?

Of course you can tailor where in your loop the thumbnail will display and how large etc it is with your CSS.

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.