Different Uses for Custom Fields in WordPress

By Lisa Sabin-Wilson

You can use Custom Fields to define all sorts of data on your WordPress posts and pages; you’re limited only by your imagination when it comes to what kind of data you want to include.

Obviously, the possible uses for Custom Fields are endless, but here are a few ideas that you may want to try on your own site. At the very least, you can implement some of these ideas to get yourself into the flow of using Custom Fields, and they may spark your imagination on what types of data you want to include on your site:

  • Music: Display the music you’re currently listening to. Use the same method below, except create a Custom Field named music. Use the same code template, but define the key as $key="music"; and alter the wording from My Current Mood is: to I am Currently Listening to:.
  • Books: Display what you’re currently reading by creating a Custom Field named book, defining the key in the code as $key="book";, and then altering the wording from My Current Mood is: to I Am Currently Reading:.
  • Weather: Let your readers know what the weather is like in your little corner of the world by adding your current weather conditions to your published blog posts. Create a Custom Field named weather, and use the same code for the template. Just define the key as $key="weather"; and alter the wording from My Current Mood is: to Current Weather Conditions:.

If you want to get really fancy with your Custom Fields, you can also define an icon for the different metadata displays. Using the mood Custom Field, for example, you can add little emoticons (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:

  1. Visit the Posts screen on the Dashboard by clicking the Posts link on the left navigation menu.
  2. Click the title of the post that you want to edit.
  3. Add a new Custom Field by choosing Enter New link from the drop-down list and entering mood-icon in the Name text box.
  4. Click the Add Media button above the Post text box to open the Add Media window.The Add Media window opens.
  5. Click the Select Files button, and upload an image from your computer.
  6. From the Link URL text box, copy the file URL of the image you uploaded.
  7. Click the X in the top-right corner to close the Add Media window.
  8. Paste the Link URL in the Value text box for the mood-icon Name.wordpress custom field
  9. Click the Add Custom Field button.The Name and Key values are saved.
  10. Click the Update button in the Publish module.The changes in your post are saved and updated on your site.
  11. Update the function code in your template file to include the new mood icon.
  12. Follow these steps to add that code:
    1. Click the Editor link on the Appearance menu of your Dashboard.
    2. Click the content-single.php file.The content-single.php template displays in the text box on the left side of the page.
    3. Locate the code you added for the mood Custom Field.
    4. Before the closing </strong> HTML tag, add the following line of code:

      &lt;img src="&lt;?php $key="mood-icon"; echo get_post_meta($post-&gt;ID, $key, true); ?&gt;"/&gt;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. Change the $key to indicate that you’re calling the mood-icon Custom Field.

    5. Click the Update File button to save your changes.
    6. Visit the post on your site to view your new mood icon.
wordpress-aio-3e-custom-fields
Displaying your current mood with a mood icon.

The entire snippet of code you added in these steps should look like this when put together (be sure to double-check your work!):

&lt;?php if ( get_post_meta($post-&gt;ID, &apos;mood&apos;, true) ) : ?&gt;

&lt;p&gt;&lt;strong&gt;My Current Mood is:&lt;/strong&gt; &lt;em&gt;&lt;?php $key="mood"; echo get_post_meta($post-&gt;ID, $key, true); ?&gt;&lt;/em&gt; &lt;img src="&lt;?php $key="mood-icon"; echo get_post_meta($post-&gt;ID, $key, true); ?&gt;"/&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;?php endif; ?&gt;