In this chapter, we use the example of adding your current mood to your blog posts by using Custom Fields. But you can use Custom Fields to define all sorts of different data on your posts and pages; you're limited only by your imagination when it comes to what kind of data you want to include.
Obviously, we can't cover every possible use for Custom Fields, but we can give you some ideas that you may want to try out on your own site — at the very least, you can implement some of these ideas just to get yourself into the flow of using Custom Fields, and hopefully they can spark your imagination on what types of data you want to include on your site:
If you want to get really fancy with your Custom Fields, you can also define an icon for the different metadata displays. For example, using the mood Custom Field, you can add little emoticons (or smiley-face icons that portray mood) after your mood statement to give a visual cue of your mood, as well as a textual one. Follow these steps to add an emoticon to the mood Custom Field that you add in theprevious sections in this chapter:
Upload an image from your computer by clicking the Select Files button (see Book IV, Chapter 3 for information on uploading images).
You can see the Add an Image window in Figure 5-6.
The Name and Key values are saved.
This step saves the changes in your post and updates it on your site.
Follow these steps to add that code:
The single.php template displays in the text box on the left side of the page.
<img src="<?php $key="mood-icon"; echo get_post_meta($post->ID, $key, true); ?>" />
The <img src=“ that precedes the Custom Field code is the HTML tag used to display an image on your site. The “ /> code that appears after the Custom Field code is part of the HTML tag and it closes the <img src=“ HTML tag. We changed the $key to indicate that we're calling the mood-icon Custom Field.
You can see Lisa's mood icon in Figure 5-8.
The entire snippet of code you add in the preceding steps should look like this, when put all together (be sure to double-check your work!):
<?php if ( get_post_meta($post->ID, "mood", true) ) : ?> <p><strong>My Current Mood is: <?php $key="mood"; echo get_post_ meta($post->ID, $key, true); ?> <img src="<?php $key="mood-icon"; echo get_post_meta($post->ID, $key, true); ?>" /></strong></p> <?php endif; ?>