boosten.org

Using custom fields in WordPress posts

Probably everyone has seen (and ignored) the Custom Fields (see screenshot) in WordPress when writing a post, just because the results are unknown when filling something in these fields, and one is afraid of breaking something, or, since they’re not needed anyway, why not ignore them forever.

Well, the potential uses are unlimited, so I’m going to describe some of them.

In most examples about the Custom Fields, ‘mood’ is mentioned. One could fill the Custom Field with his or her mood, and this mood could then somehow be shown on ones post. So lets create a mood.

If you’ve never used Custom Fields in your blog (and you probably haven’t, or you would not be reading this article), then the input screen looks like the one above. After filling the input fields, the screen looks like this:

And after pressing ‘Add Custom Field’ like this:

Now comes cool part number 1: if you press the publish button, the input screen changes somewhat:

The Custom Field we just created remained the same, however the ‘add new custom field’ entry contains a pulldown. If you pull it down, then you will see all Custom Fields created in this WordPress installation, in this case only ‘mood’. WordPress now knows about this Custom Field and it will present the pulldown in all posts and pages you want to create (or modify, of course). If you want to add another Custom Field (other than ‘mood’, for instance ‘hair color’ – my wife changes the color of her hair more often than other people change underwear), then you click the ‘enter new’ link. Again after publishing this Custom Field will be available in the pulldown.

If you already published the post you just modified (or created) and preview it on your site, you’ll see no difference whatsoever. WordPress internally knows about your Custom Field, but doesn’t know what to do with it.

I will change the Default Theme of WordPress to show the usage, but of course you can embed this in any theme you like. The file I’ll be changing is single.php, and I’m going to put the mood just above the meta information.

The part in single.php looks like this:

 
<p class="postmetadata alt">...</p>

and the post I just modified looks like this:

The first thing to do is to pull the Custom Field from the post. The function for doing this is get_post_meta(). This function will need three parameters: the ID of the post, the name of the Custom Field (in our case ‘mood’ – or ‘hair color’ if you’re my wife) and a boolean value, being true of false. The last parameter depends on whether get_post_meta() has to read several Custom Fields with the same name (false) or should stop at the first it encounters (true). Since we have (or want) only one mood (or hair color) this parameter will be true.

 
< ?php
  $mood=get_post_meta($post->ID, 'mood', true);
?>
 
<p class="mood">< ?php echo "Today, I'm feeling " .$mood; ?></p>
 
<p class="postmetadata alt">...</p>

What happens here: I’ve created a variable $mood, which will hold the value for Custom Field ‘mood’, which it will get from the current post ID ($post->ID). It will stop searching for ‘mood’, once it finds the first (true).

Next I echo it to the screen, preceded by “Today, I’m feeling “. The class is for styling, which I will not be doing here.

The post looks now like this:

I could have used the following construction directly:

<p class="mood">< ?php echo "Today, I'm feeling " . get_post_meta($post->ID, 'mood', true); ?></p>

but then we have a problem with posts that don’t have a Custom Field ‘mood’ configured (which is the case for all other posts I have). Take a look at another post:

That doesn’t look very pretty, does it? What we want to do is to create a default value, for the cases we didn’t define a mood we’re in.

< ?php
  $mood=get_post_meta($post->ID, 'mood', true);
  if ($mood == "") {
    $mood="unwilling to tell";
  }
?>
 
<p class="mood">< ?php echo "Today, I'm feeling " .$mood; ?></p>

Looks better, doesn’t it. So now go ahead and give all your posts a ‘mood’ Custom Field.

That wasn’t too hard, now was it?

Some advanced uses

Earlier I wrote about the three parameters get_post_meta() takes, the ID of the post, the name of the Custom Field, and either true (for one value) or false (for multiple values). In case of ‘false’ the values will be put in an array.

Suppose we wanted a list with people we want to thank for their contribution below every post. This list can consist of zero, one or more people. First we add the Custom Fields to the post:

And then add the code to single.php, just below the ‘mood-code’.

< ?php
$thanks = get_post_meta($post->ID, 'thanks', false);
 
if ($thanks) {
  echo "<h3>Special thanks to:</h3>\n<ul>";
  foreach ($thanks as $person) {
    echo "<li>".$person."</li>";
  }
  echo "</ul>";
}
?>

First we fill the array $thanks with all values (false) we find for ‘thanks’ from the current post. If the array contains no data, it’ll ignore the following part completely, and will not display anything.

If however the array contains some data, then it’ll display a title called ‘Special thanks to:’ and will query the array for every value and create an unordered list of it. This is how it looks in the default theme (of course you can add all kinds of formatting to it, you could present it in a table, or all names after another separated by commas, whatever you like):

These Custom Fields can really hold any value you like. You could have it hold urls to images, prices for your products, paths to local resources for your products.

Suppose you wanted to create a product page that holds a product you want to sell, and it could contain zero, one or more images.
To display each image, you will need a path for the thumbnail, a path for the full size picture, and a title.

You could decide to create three Custom Fields for each image, but that would be a bit cumbersome, and probably overdone. So we don’t do that, but create just one Custom Field for each image, and put the values after another, with a separator we choose. In this case we will use the vertical bar (|).

Our ‘image’ Custom Field will hold the following value:

product1-thumb.jpg|product1.jpg|Very nice product

The code for this would be:

< ?php
  $images = get_post_meta($post->ID, 'image', false);
 
  if ($images) {
    echo "<h3>Pictures</h3>";
 
    foreach ($images as $image) {
 
      $fullValue = explode ("|", $image);
 
      $thumbPath = $fullValue[0];
      $fullsizePath = $fullValue[1];
      $description = $fullValue[2];
 
      $fullsizePath = "/wp-content/media/store/" . $fullsizePath;
      $thumbPath = "/wp-content/media/store/" . $thumbPath;
 
      echo "<a href='$fullsizePath' title='$description'><img src='$thumbPath' alt='$description' class='product-thumb' /></a>";
 
    }
  }
?>

The explode function extracts the three values (separated by the vertical bar) into an array $fullValue, which then can be used to extract the individual values. The ultimate goal is to display the thumbnail, and to make it clickable to show the full size image. The description (‘Very nice product’) is used as title for the link and as alternate text for the thumbnail.

That’s all for now. Happy Custom Field.

This entry was posted on Monday, September 28th, 2009 at 8:11 pm and is filed under webpublishing. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.