WordPress Custom Fields: Book Reviews Pt. 2

This part of the tutorial will cover making things look a little prettier. It is a more advanced PHP tutorial than any of the previous tutorials in the overall custom fields series. Basically, we will do a lot of work, but it won’t look like we’ve accomplished much. We still have to get much of the basic code out of the way first.

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.