Winnipeg Web Design

Using WordPress Custom Fields

I am going to show how to build a simple way to add a “star” rating at the bottom of a post using WordPress’ Custom Fields. The custom fields are a great way of adding extra bits of information such as paragraphs, images or content which you want to be displayed differently.

Creating a custom field

When adding a new post we want to scroll down to the area called “Custom Fields” and then add a new one. Its good to give this field a useful name as once you have added the custom field you can select it from the drop down box. Next in the value field add what your rating will be. So a value of  “3/5″ is what I used.

Displaying the Custom Field

WordPress has a useful documentation showing how to get started with the custom fields. For this custom field we want to add the following code inside the post loop.

<?php if( get_post_meta(get_the_ID(), 'rating') ){
		$rating = get_post_meta(get_the_ID(), 'rating');
		$rating = explode("/", $rating[0]);
		$good = round($rating[0]);
		$total  = round($rating[1]);

		echo "<h2>This was rated:</h2><p class='rating'>";
		if(!empty($good) && !empty($total) && ($good <= $total) && is_numeric($good) && is_numeric($total) ){
			$i=0;
			while($i < $good){
				echo "<img src='http://localhost/wordpress/wp-content/themes/default/images/stars/star_on.png'  border='0' />";
					$i++;
			}

			$i = 0;
			while($i < ($total - $good)){
				echo "<img src='http://localhost/wordpress/wp-content/themes/default/images/stars/star_off.png'  border='0' />";
					$i++;
			}
		}else{
			echo "Invalid input for the rating.";
		}

		echo "</p>";
	};
?>

To get the meta data we need to use get_post_meta(); which uses 2 (optional 3rd) values. The first is the post ID, next the key/name of the field and the last optional value is either “true” or “false” to say if you want the information returned as a string.
That script will use the post ID to check if there is any information “rating” that has been set. Next, if it has we assign it to a variable and explode it at the “/”, this means we have the two numbers for the light star and the dark star. After splitting up the rating we run a few checks to make sure that it is valid before we loop through them.

Next we run the two loops that will produce the stars by using the split data and a while loop. And then its done!

As you can see, its very easy to add extra bits of data to your post. This is just one example of how to use the custom fields.

Related posts:

1. WordPress 3.0 Custom Posts
2. Cross Browser Placeholder Text For Input Fields
3. Joomla vs. Drupal vs. Custom CMS

Written by Alex

My name is Alex Bor and I am currently a full time student. I have been building websites for about 4 years and love to build sites that will take advantage of new techniques (such as AJAX and CSS3) to make them both look nicer and be more user friendly. You can view my website or follow me on Twitter.