Using WordPress Custom Fields to Create a Review System

Tutorial on Using Custom Fields in WordPress

A standard WordPress post contains various amounts of data, such as the post title, categories, keyword tags and a featured image. But did you know that you can add a whole range of meta-data to each post that you can manipulate in any way you like using Custom Fields?

Image Source: WerbeFabrik – Pixabay.com / License: CC0 Public Domain

What Are Custom Fields?

Custom Fields can be used to add additional pieces of information to any post, page, or even a custom post-type, which can be displayed via the Loop, such as within your index.php file.

Custom fields are stored using a Name/Value combination, each name can be assigned a value, and you can manipulate these values in multiple ways, just like you can using a database, but without the hassle of learning to master complex database queries.

Enabling Custom Fields

Since WordPress 3.1, custom fields have been tucked away behind the Screen Options tab at the top of the various Edit pages. Simply check the Custom Fields checkbox to enable the area, which will become visible directly below your post contents (by default).

A Simple Custom Field

Let’s create a really simple custom field in WordPress, assign a value to it and display it within our posts. Enter a name for your custom field in the Name field, and give it a value by entering some text within the Value field, like shown in this image:

Click the Add Custom Field button once you are happy with your new custom field, complete the process by Publishing or Updating your post.

Displaying Custom Fields in WordPress

We now have a value assigned to a custom field in WordPress with the name of Overview, which we can display within our posts by adding this code within your theme’s loop:

the_meta();

This will create an unordered list of all custom fields that have a value assigned to it for the post currently being viewed. So if you had multiple custom fields that all had values assigned to them, they would all be displayed in a list. You can also display a single custom field using something more specific instead:

get_post_meta($post_id, $key, $single);

Let’s quickly explain the above code, $post_id is the ID of the post, to obtain the ID of the current post being viewed simply use $post->ID.

$key is the name you gave the custom field, in this example it is Overview, and $single accepts a boolean value of either true or false, if set to false (or if not set at all), the custom field will be returned as an array which is useful if you have multiple custom fields with the same key.

For this example, we will set $single as true, which will return a single value. The code for this example would look like this:

get_post_meta($post->ID, 'Overview', true);

Assign it to a variable (in this case $overview) so you can echo the contents of the chosen custom field, like so:

The possibilities are endless as you’re able to manipulate this extra data in many ways to create some very impressive results. Let us take a look at some cool things you’re now able to achieve.

Calculations

Perhaps you have multiple custom fields, each assigned a numeric value such as a price, and you need to add them together to achieve a Total figure. We can calculate the total figure using this sample code:

This assigns the value of the price1 custom field to the $total variable, and adds the values of the other price custom fields to the variable using the += operator. We can then output the total of these custom fields like so:

echo $total;

With this example in mind, you’re able to add cool features to your WordPress theme like a simple rating system for a review site, let’s take a look at how we could do that shall we?

Review Site Rating System

Perhaps you run a technology online magazine and want to add a simple rating system to your reviews, you can achieve this using just a few custom fields. Let’s start by adding 5 new custom fields to a post that we will be using to rate a product based on different criteria and assign a numeric value to each field out of 100, like so:

We can now calculate an average of the above custom fields as seen in the following example:

Now we have an average of the 5 custom fields stored in the $average variable, which by default, may contain an unwanted decimal place. We can use basic PHP math functions to round-up or down the value before storing it within the $average variable, just replace the last line of the above code with your preferred choice of:

Using the above sample values from the image, we should now have a value of either rounded 81 using the floor() function, or rounded 82 using the ceil() function, and without any math functions we’ll have a value of 81.2.

So how can we put all of this together?

Using a child theme of the TwentySixteen theme as an example, we can implement this simple rating system in no time at all and the outcome will look like this:

This creates a new function that modifies the function that displays your post contents by inserting a file that contains our ratings code. The file we referenced above, using the get_template_part() function, needs to be created and put in the correct location.

Create an empty PHP file called content-ratings.php and put it in a newly created folder called template-parts. Now we can add the code responsible for displaying the ratings and average score values, copy and paste the code below into the content-ratings.php file we just created.

The above code makes the calculation we talked about earlier by adding all 5 custom fields together, and then dividing by 5 to obtain an average score, which is stored within the $average variable. Then we add a simple HTML structure that outputs our values, which enables us to use CSS to style the ratings in a way that matches the TwentySixteen theme’s existing style.

To Wrap It Up

We have used existing styles taken from the parent theme and percentage-based widths to ensure maximum compatibility between browser widths, and of course mobile devices. There we have it, with just a few lines of code we have implemented a simple rating system that looks good and adds additional functionality to your posts, just by making use of custom fields in WordPress.

WordPress Hosting

Some awesome websites powered by MH Themes

Magazine WordPress Themes by MH Themes

This is an additional demo of MH Magazine WordPress Theme which shows how you could use this magazine theme for a website about traveling, sightseeing, city or holiday trips. With this flexible magazine theme you can create beautiful travel online magazines, personal blogs about your journeys or professional websites about traveling.

This is an additional demo of MH Magazine WordPress Theme which shows how you could use this magazine theme for a fancy lifestyle online magazine or modern and dynamic news website. MH Magazine empowers you to handle a lot of content and present your articles, images and videos in a nice, organized and beautiful way.

This is an additional demo of MH Magazine WordPress Theme which shows how you could use this magazine theme for websites related to music, bands, concerts or else. This flexible magazine WordPress theme allows you to create cool dark colored websites to present rock bands, new albums or inform about upcoming concerts and events.