By the end of this part of the tutorial, you may be wondering why in the hell you would go through all this trouble to display a linked image correctly and a few other things when you could’ve just as quickly typed all this in the post box. And, you are right to think this. Here are some reasons why this way can be useful:

• You can change the look of all your reviews and their custom fields without having to edit each post.
• You can pull these custom fields out to use them in other areas of the site, like a reviews page.
• You can display these things with your excerpts in your archives, categories, and search results.
• There really is no limit to what you can do with WordPress custom fields.

Although some of the “cooler” things are yet to come, we have to get the basics out of the way first.

Adding a rating system:

Now, that you’ve played around with the first part of the tutorial and you’re ready to move on, there is one thing I would like you to add to the original part of the code. Donalyza asked how she could add a rating system to her music reviews.

To add a rating system, the first thing you should do is create a Key named Rating. Then, give it a Value of your rating. For this tutorial, I’ll use a 1 – 5 rating system, but you can easily change this to 1 – 10, ABC, etc.

Open your file from the previous tutorial (home.php or single.php) and find the first code we entered:

<?php
// The book image
$image = get_post_meta($post->ID, 'Image', $single = true);

// The image alt text
$image_alt = get_post_meta($post->ID, 'Image Alt', $single = true);

// Image class (used for alignment, sizing, or styling using CSS)
$image_class = get_post_meta($post->ID, 'Image Class', $single = true);

// Book Author
$author = get_post_meta($post->ID, 'Author', $single = true);

// Outside link for book
$book_link = get_post_meta($post->ID, 'Book Link', $single = true);

// Title of the book
$book_title = get_post_meta($post->ID, 'Book Title', $single = true);

// Recommend? Yes or No
$recommend = get_post_meta($post->ID, 'Recommend', $single = true);

// Published date of book
$published_date = get_post_meta($post->ID, 'Published Date', $single = true);
?>

Add this after the “published” part, but before the ?>:

// Book Rating
$rating = get_post_meta($post->ID, 'Rating', $single = true);

At the end of this post, I’ll show you how to display your ratings.

The more complicated stuff:

I’ll walk you through displaying your image, creating a link around that image, and a few other things in this part of the tutorial. These are techniques that we’ll use later on. So, it’s best to learn them now.

Find these lines from the previous part of the tutorial and delete them. We’ll use these things, but in a more creative way.

// If there's an image
if($image !== '') {
	echo '<p><strong>Image URL:</strong> ' . $image . '</p>';
	}

// If there's image alt text
if($image_alt !== '') {
	echo '<p><strong>Image Alt:</strong> ' . $image_alt . '</p>';
	}

// If there's an image CSS class
if($image_class !== '') {
	echo '<p><strong>Image Class:</strong> ' . $image_class . '</p>';
	}

// If there's a book link
if($book_link !== '') {
	echo '<p><strong>Book Link:</strong> ' . $book_link . '</p>';
	}

Everything from this point forward relies heavily on you having an image to display with your review. This is vital to this tutorial and the code you are about to see. What we’re doing is checking to see if there’s an image and displaying it. We will add alt text, a link, link title text, and an image class. We’re interweaving all these elements together. I ran through displaying the text on screen in the previous tutorial, so you could get a feel for how things work.

Replace the code you deleted with this (this should be above the line that reads // If there’s a book title):

// If there's an image
if($image !== '') {
	echo '<p>';
	// If there's a book link
	if($book_link !== '') {
		echo '<a href="' . $book_link . '" title="';
			// If there's image alt text
			if($image_alt !== '') echo $image_alt;
			else echo the_title();
		echo '">';
		} // end if

	// Show the image
	echo '<img src="' . $image . '"';
		// If there's an image class
		if($image_class !== '') echo 'class="' . $image_class . '"';
	echo 'alt="';
		// If there's image alt text
		if($image_alt !== '') echo $image_alt;
		else echo the_title();
	echo '" />';

	// If there's a book link, close it off
	if($book_link !== '') {
		echo '</a>';
		} //end if
	echo '</p>';
	}

Yes, the code just got crazy all of a sudden. I urge you to take the time to read through this thoroughly to understand how the PHP works. It’s not really complicated, but it can be overwhelming for newcomers to look at. Feel free to ask questions on anything that’s going on in that part of the code. I tried to leave plenty of comments to help you along.

Customizing the recommendation area:

In this part of the custom fields tutorial, we’ll add an image to the “Recommend” section. You might also notice that the code is a little different from the previous tutorial, but it has now been updated. This was a slight mistake I made, and you should make sure you update it.

Scroll down to the recommendation part of your code, which looks like this:

// If there's a recommendation
if($recommend == 'yes' || $recommend == 'Yes') {
	echo '<p><strong>Recommend?</strong> ' . $recommend . '</p>';
	}
elseif($recommend == 'no' || $recommend == 'No') {
	echo '<p><strong>Recommend?</strong> ' . $recommend . '</p>';
	}
else { echo ''; }
?>

Replace it with this code:

// If there's a recommendation
if($recommend == 'yes' || $recommend == 'Yes') {
	echo '<p><strong>Recommend?</strong> <img src="/path/to/your/image/recommend-yes.gif" alt="I recommend this book!" /></p>';
	}
elseif($recommend == 'no' || $recommend == 'No') {
	echo '<p><strong>Recommend?</strong> <img src="/path/to/your/image/recommend-no.gif" alt="Only touch this book if your life depends on it!" /></p>';
	}
else { echo ''; }

You’ll need to upload an image for your “Yes” and “No” recommendations. You’ll also need to change the path to the image in the above code.

Displaying your ratings:

Now that you’ve given your book, album, movie, game, or whatever a rating, you’ll want to display it. Instead of the common if/else statement, we’ll use a PHP switch statement to execute this (this works even better if you have a 1 – 10 rating system.

Below the last code we added for the recommendations, add this code:

// If there's a rating
if($rating !== '') {
	echo '<p><strong>Rating: </strong>';
	switch ($rating) {
	// If the rating is 0
	case 0:
		echo $rating;
		break;
	// If the rating is 1
	case 1:
		echo $rating;
		break;
	// If the rating is 2
	case 2:
		echo $rating;
		break;
	// If the rating is 3
	case 3:
		echo $rating;
		break;
	// If the rating is 4
	case 4:
		echo $rating;
		break;
	// If the rating is 5
	case 5:
		echo $rating;
		break;
	// Else
	default:
		echo 'No rating.';
		break;
		}
	echo '</p>';
	}

Looks pretty generic huh? Not a lot of pizazz? That’s OK. You can use the same image technique we used above for book recommendations. Instead of echo $rating;, you can echo an image. You’ll need to create different images for each rating.

The CSS:

I won’t bother with a lot of CSS in this tutorial, but I do want to share one thing. For the custom field Key that’s named Image Class, I’ve given it a value of left. In my “style.css” file, I float this image to the left so that the following text will wrap around it. Here’s the code I use:

.left {
	float: left;
	margin: 0 10px 5px 0;
	}

What does it look like?

Here’s an image of what my review looks like:

The end of part 2 of the tutorial:

You can arrange each element how you like. You can put all the review information after the post content, before the post content, before the image, or wherever. Do what you like. This is the time when you should tinker with how you want your reviews to look on the screen. Add CSS classes to things to style them how you want. Add extra custom fields for other useful bits of information that you’d like to add.

In the next part of the tutorial, I’ll cover what I call the “cool” stuff. I’ll show you how you can use these custom fields outside of home.php and single.php to create a more unique blog.

If you’ve noticed any errors in the code, please be sure to let me know. Subscribe to the feed to know when the next part of the tutorial rolls around. Feel free to ask any questions and/or suggest anything you’d like to see added to the tutorial.

Have you ever wanted to write book, movie, music, or other type of review and archive them effectively, add extra information, and make reviewing them a little cooler? In this part of the series, I’ll cover many ways to accomplish this, while leaving you with many options to add your own twist to it. I’m using book reviews as an example, but you can easily change this to any type of review.

This is actually a series within a series. There will be several parts to the using custom fields to create book reviews entry into the overall series.

Now, that’s enough of an introduction. Let’s get on with putting this thing together.

Today, we’ll set up the code that we’ll be using later. This is a little bit of a refresher course on the basics of custom fields.

The setup:

The first thing you need to do is create a new post. I’m going to review the book I, Robot by Isaac Asimov. You can find the particular version I’m using at its Amazon page. Choose anything you’d like. Now, add a new category to this post named “Book Reviews.”

Write your review, add your tags, and whatever else you might normally do for your posts. Now, we’ll create our custom fields.

The custom fields:

We’ll use several different custom fields for this tutorial, but you can add as many as you’d like to customize your reviews. The custom field Keys that we’ll create are these: Author, Book Title, Image, Image Alt, Image Class, Book Link, Published Date, and Recommend. (Remember that custom field Keys are case-sensitive.)

This is what your setup should look like:

• Key: Value
• Author: Author of the book
• Book Title: Title of the book
• Image: URL of an image of the book
• Image Alt: Alt text for the image
• Image Class: Use a class for personal styling of image
• Book Link: Link to an outside source for the book (maybe an Amazon page)
• Published Date: Date the book was published
• Recommend: Write Yes or No on whether you recommend this book

Here’s an image of what my custom field setup looks like:

So, you should upload an image of your book to follow this tutorial. Now, our review is written and our custom fields are ready.

The code:

Today, we’re only going to pull the custom fields from the database and make sure everything is working correctly. There’ll be no styling or anything super-cool, but we’ll get the basics out of the way. Open index.php (you should also use this code in single.php).

Under this code:

<?php while(have_posts()) : the_post(); ?>

Add this:

<?php
// The book image
$image = get_post_meta($post->ID, 'Image', $single = true);

// The image alt text
$image_alt = get_post_meta($post->ID, 'Image Alt', $single = true);

// Image class (used for alignment, sizing, or styling using CSS)
$image_class = get_post_meta($post->ID, 'Image Class', $single = true);

// Book Author
$author = get_post_meta($post->ID, 'Author', $single = true);

// Outside link for book
$book_link = get_post_meta($post->ID, 'Book Link', $single = true);

// Title of the book
$book_title = get_post_meta($post->ID, 'Book Title', $single = true);

// Recommend? Yes or No
$recommend = get_post_meta($post->ID, 'Recommend', $single = true);

// Published date of book
$published_date = get_post_meta($post->ID, 'Published Date', $single = true);
?>

Basically, what this does is pull each custom field from the database and set it to a PHP variable. This is important because we’ll use the variable a lot in the future, and we want to keep the code as easy to manage as possible. The shorter variable names makes this possible.

Now, above this code:

<?php the_content(); ?>

Add this:

<?php
// If there's an image
if($image !== '') {
	echo '<p><strong>Image URL:</strong> ' . $image . '</p>';
	}

// If there's image alt text
if($image_alt !== '') {
	echo '<p><strong>Image Alt:</strong> ' . $image_alt . '</p>';
	}

// If there's an image CSS class
if($image_class !== '') {
	echo '<p><strong>Image Class:</strong> ' . $image_class . '</p>';
	}

// If there's a book title
if($book_title !== '') {
	echo '<p><strong>Title:</strong> ' . $book_title . '</p>';
	}

// If there's a book link
if($book_link !== '') {
	echo '<p><strong>Book Link:</strong> ' . $book_link . '</p>';
	}

// If there's a published date
if($published_date !== '') {
	echo '<p><strong>Published:</strong> ' . $published_date . '</p>';
	}

// If there's an author
if($author !== '') {
	echo '<p><strong>Author:</strong> ' . $author . '</p>';
	}

// If there's a recommendation
if($recommend == 'yes' || $recommend == 'Yes') {
	echo '<p><strong>Recommend?</strong> ' . $recommend . '</p>';
	}
elseif($recommend == 'no' || $recommend == 'No') {
	echo '<p><strong>Recommend?</strong> ' . $recommend . '</p>';
	}
else { echo ''; }
?>

This will give you a list of the various custom fields that you’ve created. I hope you can understand a little bit about what’s happening behind the scenes here by looking at the a text display of your custom fields.

Here’s what the output on my page looks like:

That’s the end of this part of the tutorial. I want you to start thinking about what other Keys you might want to add. Do you want to add a rating system? Hardback and/or paperback release dates? Links to other outside sources? There are limitless options here.

Some other things I’ll cover are putting this all together, creating pretty archives, a page for all your book reviews, and other various uses.

Please share your thoughts and subscribe to the feed to know when the next part of the tutorial comes out.

This is a tutorial on how to make your blog or website header image clickable with valid XHTML. This is assuming that you’re using a CSS background image for your header or that you want to.

I was recently designing a theme that I wanted to add a clickable header image to, but had forgotten the best way to accomplish this task. So, I quickly searched Google and thought I found an easy way to do this with the WordPress clickable header tutorial, but quickly realized that it wasn’t valid XHTML. Many other tutorials showed this same example as well.

Basically, they were wrapping the <a> element around the <h1> element. This is bad. Very bad. CSS can do so much. Why ruin its beauty with poorly structured HTML?

After playing around with the CSS for a while, I came up with a solution.

First, you obviously need a header image. For the sake of this tutorial, the width and height of this image will be 350px by 90px. You can change the values in the CSS to match with your header image. Add this code to your header file or wherever your header image will go.

XHTML

<div id="header">
<h1>
<a href="/index.php" title="Blog Title"><span>Blog Title</span></a>
</h1>
</div>

Now, we need to style this thing.

CSS

#header {
	float: left;
	width: 100%;
	}
#header h1 {
	float: left;
	margin: 0;
	padding: 0;
	width: 350px;
	}
#header h1 a {
	padding: 0;
	margin: 0;
	width: 350px;
	height: 90px;
	display: block;
	background: url(images/header1.gif) no-repeat top left;
	}
#header h1 a span { display: none; }

These CSS values aren’t going to be exact all the time. Some things can change depending on your layout. Your positioning, height, width, margin, and padding are all variables that may need to change. The most important things are these lines:

#header h1 a {
	width: 350px;
	height: 90px;
	display: block;
	background: url(images/header1.gif) no-repeat top left;
	}

Giving the link (which has a background image) a width, height, block display, and adding the image are the things you must do.

That should pretty much do it. If you have any problems, please let me know through the support forums. Otherwise, enjoy using your valid XHTML clickable header image.

You can also use this technique to make any element clickable with a background image, not just header images.