WordPress Custom Fields: Book Reviews Pt. 1

Finally, another part in the WordPress custom fields tutorial series. This time, we’re stepping it up a notch though. We’re going to take custom fields to another level. I hope you’re prepared. We’ve covered some basic things thus far, and that’s all you need to know to be prepared.

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.