64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).
Advertisement

Utilizing Custom Fields to Create Review Boxes

by
Gift

Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

Reviews are perhaps one of the greatest powers of blogging in terms of authority. When done properly (with hard work and consistent information), review blogs are arguably the most profitable category in the blogosphere. But every blog has to offer a solid design in their posts, including reviews. In this post, we're going to talk about how to build the perfect review box, since review boxes are probably the first part readers check before reading a review.


What We're Going to Build

As an example, we're going to create a review box for a movie.

Let's take one of my favorite movies of all time, The Pursuit of Happyness. We're going to display the following information about the movie:

  • Name: The Pursuit of Happyness
  • Year: 2006
  • Director: Gabriele Muccino
  • Writer: Steve Conrad
  • Stars: Will Smith, Jaden Smith, Thandie Newton
  • Genre: Biography, Drama
  • Runtime: 117 minutes
  • Storyline: Based on a true story about a man named Christopher Gardner. Gardner has invested heavily in a device known as a "Bone Density scanner". He feels like he has made these devices. However, they do not sell as they are marginally better than the current technology at a much higher price. As Gardner tries to figure out how to sell them, his wife leaves him, he loses his house, his bank account, and credit cards. Forced to live out in the streets with his son, Gardner is now desperate to find a steady job; he takes on a job as a stockbroker, but before he can receive pay, he needs to go through 6 months of training, and to sell his devices.
  • (Let's not forget that we need an image.)

Important: This information is borrowed from The Internet Movie Database.


Step 1 Preparing the Custom Meta Box to Fill in the Data

We're going to hold the data as custom field values, but adding custom fields manually for each review can be such a pain. Because of that, we're going to create a neat custom meta box to save our data as custom fields.

First, we need to use the add_meta_box() function to build the meta box and create a callback function:

The callback function will create the input fields to hold our data. I think we can use a texarea for the "storyline" field and text input fields for everything else:

Then, we need to create the function to make WordPress save the input values as custom fields:

Done!

To find more information about creating custom meta boxes (and what these lines of code actually mean), you can read this fantastic article written by Christopher Davis and published on Wptuts+.

Step 2 Building the Function to Show the Review Box

Now that we covered how to set the information, we need to learn how to get the information. If you worked with custom fields before, this is going to be easy since we're just going to fetch custom field values.

WordPress has an easy-to-use function for getting custom field values:

We need to load custom field values into some HTML code, so it would be wise to think about the HTML now. I'm thinking something like this:

And if we put them together, we'll have our function ready!

The CSS

Of course, you can style your review box any way you like. If you don't feel like it, you're welcome to use ours:

If you want to float the review box to left or right, don't forget to add the float:left; (or float:right;) declaration for .review-box. You can even center it by changing the margin:10px; declaration into margin:10px auto;.

Step 3 Creating the Shortcode to Echo the Function

We know how to set the info, we know how to get the info... Now it's time that we show the info! :)

We can always add the box automatically at the end (or at the beginning) of the post like this:

But what if we want to include the box inside the post? That's where my favorite part comes in handy: shortcodes!

This step would be even easier than the previous one, since we actually done all the work to load the review box. All we have to do is call the function as a shortcode like this:

Here's what you'll have if you follow the steps above exactly as they're written:

A screenshot of our example review box

Wrapping Up

These review boxes could be used for loads of different reviews like software, websites, books, TV shows and so on. Or, if you can get creative, you can even use them in regular blogs just to have fun!

Some Articles to Check

To fully understand the code and even to improve it, you should read some other articles of Wptuts+:

Is there anything you'd like to improve or do you have an idea? Share your thoughts with us by commenting below.

Advertisement