Impress Lab

Posted on August 20, 2008 - by Impress Lab

Using Custom Fields in WordPress

Design WordPress

Custom Fields add additional functionality while simplifying posting in WordPress. A Custom Field is essentially routinely used information that you would like on all your blog posts. For example, consider that you have a blog about books. At the bottom (or top) of the content of the post, you want to list the ISBN Number, Author Name, and Publishing City.

Using Custom Fields, you can designate these ‘fields’ (i.e. ISBN_Number, Author_Name, and Publishing_City) in your Write Post screen under Custom Fields.

To better illustrate, consider the book blog that needs fields for the aforementioned information.

1. Create Custom Field Keys

To start, open a new Write Post page in your WordPress backend. Scroll down to Custom Fields in the left column.

A Custom Field includes two parts: the Key and its corresponding Value. The Key is basically the part that is consistent among all blog posts, whereas the Value is unique. For our example the Keys would be:

ISBN_Number

Author_Name

Publishing_City

To create our first Custom Field, enter “ISBN_Number” in the Key field. In the Value field, enter “123-456-292x” (make believe ISBN number). Click “Add Custom Field when done.

Warning: Avoid using spaces in the Custom Field key.
Tip: The Value can include HTML code as well.

You can do this for all Author_Name and Publishing City as well. For this example, we use:

ISBN_Number: 123-456-292x

Author_Name: John Richards

Publishing_City: New York City, NY

You can add these Custom Fields to all your blog posts.

Tip: Previously used Keys are now listed in the dropdown “- Select -” box.

2. Add Custom Fields in WordPress Template

Now that your blog posts have Custom Fields assigned, you need to place PHP code in your WordPress templates to actually display the Custom Fields. Must often, you will need to edit your “single.php” template as this displays the actual blog posts where we will place the Custom Fields.

The Custom Fields should be placed within your WordPress post Loop. In your single.php template, find The Loop. You will most likely see the following code somewhere that actually displays the blog post content:



<?php the_content(‘<p>Read the rest of this entry.;</p>’); ?>

Each Custom Field can be displayed with the following code, replacing “custom_key” with the Key (i.e. ISBN_Number, Author_Name, and Publishing_City).



<?php $custom_key = get_post_meta($post->ID, ‘custom_key’, true); ?>

<p><b>Key Name:</b> <?php echo $custom_key; ?></p>

To illustrate, consider the code for ISBN_Number:



<?php $ISBN_Number = get_post_meta($post->ID, ‘ISBN_Number’, true); ?>

<p><b>ISBN Number:</b> <?php echo $ISBN_Number; ?></p>

This will display the ISBN Number when the blog post is viewed:

ISBN Number: 123-456-292x (or whatever Value you specified for that exact blog post)

Suppose you want to display the three Custom Fields immediately before the post content:



<h2><?php the_title() ?></h2> /* Blog Post Title */

<?php $ISBN_Number = get_post_meta($post->ID, ‘ISBN_Number’, true); ?>
<p><b>ISBN Number:</b> <?php echo $ISBN_Number; ?></p>

<?php $Author_Name = get_post_meta($post->ID, ‘Author_Name’, true); ?>
<p><b>Author Name:</b> <?php echo $Author_Name; ?></p>

<?php $Publishing_City = get_post_meta($post->ID, ‘Publishing_City’, true); ?>
<p><b>Publishing City:</b> <?php echo $Publishing_City; ?></p>

<?php the_content(‘<p>Read the rest of this entry &raquo;</p>’); ?> /* Blog Post Content */

To learn more about Custom Fields, visit the WordPress documentation on Custom Fields, or post comments for additional help.

This entry was posted on Wednesday, August 20th, 2008 at 8:40 am and is filed under Design, WordPress. 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.

12 Comments

We'd love to hear yours!



  1. Visit My Website

    August 20, 2008

    Jake said:

    Thanks for describing this! I shall give this a try soon. Seems pretty easy and useful.



  2. Visit My Website

    August 20, 2008

    Mark Dallas said:

    how do you use it with images? As in having an image as the custom field? thanks



  3. Visit My Website

    August 20, 2008

    Impress Lab said:

    Mark,
    Use the following code:

    < ?php $custom_key = get_post_meta($post->ID, ‘custom_key’, true); ?>



    Visit My Website

    August 20, 2008

    Mark Dallas said:

    thanks. that did the trick. I love Custom fields!!



  4. Visit My Website

    August 28, 2008

    ResumePress Free WordPress Theme | Impress Lab said:

    [...] ResumePress makes heavy use of Custom Fields, making it easy to update. The only setup that is needed is to create Categories [...]



  5. Visit My Website

    August 28, 2008

    Dgold said:

    Why would you need to make custom field keys have no_spaces? (You have a red warning message saying that.) The WordPress Codex doesn’t say that, and I’ve always had them with spaces.

    You need to use spaces because when you display the custom field, it shows the key. You want it to be readable. I think you should use the key “Author Name” not “Author_Name”, or at least, it doesn’t matter.

    If there’s a reason I have not thought of, please say?

    Thanks for the article.



  6. Visit My Website

    August 28, 2008

    Impress Lab said:

    Dgold,

    You may in fact use spaces, such as “Author Name,” as your keys. The only issue is that you may be more suspect to mistypings etc when actually using the custom fields in your templates.

    That said, if you were designing a site for a client, it may be better to use spaces from a readability standpoint. In this case the client will most likely not be editing the templates, so as long as you set it up you should be fine.

    However, for designing a WordPress site for personal use, in which case you may even be tweaking the design quite a lot, custom fields without spaces would minimize mistakes. For our site we are constantly making small, coding changes - these changes may result in accidentally breaking apart a key value for example.

    The choice between spaces and no spaces is a personal choice. From a readability standpoint you are correct. From a design and structure standpoint it may depend more on the designer.

    Great question Dgold. It are these types of questions that are not answered on the Codex or in tutorials that are at the least interesting to know.



  7. Visit My Website

    August 28, 2008

    Impress Lab said:

    Followup to Dgold’s question about spaces in Custom Field keys

    According to the WordPress Codex example, you can use spaces in keys:

    “We’ll add two custom fields, one called “Currently Reading” and the other “Today’s Mood”. The following instructions will demonstrate how to add this information to a post using Custom Fields.

    1. After you have written your post, scroll down to the area titled Custom Fields.
    2. To create a new Custom Field called “Currently Reading”, enter the text “Currently Reading” (without the quotes) in the text entry field titled Key.
    3. The newly created Key should now be assigned a Value, which in our case is the name of the book currently being read, “Calvin and Hobbes”. Type “Calvin and Hobbes” in the Value field, again without the quotes.
    4. Click Add Custom Field button to save this custom information for that post. ”

    Link: http://codex.wordpress.org/Using_Custom_Fields



  8. Visit My Website

    August 28, 2008

    Dgold said:

    Thanks for the replies! I do love custom fields and I have wanted to learn more and understand it better for years. It seems like an untapped area of WP. This discussion is helpful. In my experience, like the Codex, which is where I learned it, spaces are ok. But like you said, make sure you copy the same spaces into your template functions, as needed, when you go to display the custom fields in your post.

    That example you reposted from the Codex brings something else to light, as well as spaces: special characters. The key “Today’s mood” has an apostrophe. I don’t really know 100% if special characters and spaces might cause problems or not. Personally I would avoid putting something like & ampersand in the custom field key. It just seems risky to me that it might be rendered differently in another setting. I might make my guideline as “Make the custom field key something that you can remember exactly when you go to insert code in your theme later. Keep it simple. Avoid unusual characters.”

    However, like you said, even HTML is cool in the Value field. That’s a great feature. You can put something like a hyperlink, or the HTML to display an image, in your Value — and then display this easily in your theme, around your post. This opens up a world of possibilities.

    Here’s my next question though. The one thing I really wish for in Custom Fields is to make a multiple-select checkbox area, very much like the Categories selecting area on Write Post. I would have 1 pre-determined custom field Key, and 5 pre-determined custom field Values. The post author could select 1 or more Values. For example, KEY: “Favorite Outdoor Activity”, VALUES: (Choose one or more): “Hiking,” “Soccer,” “Rock climbing,” “Disc Golf,” “Swimming”.

    And I would use the normal custom field function to display an Array on the post. So the post would say, This Author’s Favorite Outdoor Activities are: Hiking, Swimming.

    I’ve tried 2 plugins for this and neither was suitable. They offered a radio button (select 1 of the 5 options), but not a multi-select (check 1 or more of these options).

    Thanks again for prompting this thread.



  9. Visit My Website

    August 29, 2008

    Impress Lab said:

    Both spaces and special characters can be used in custom fields. But like you mention Dgold special characters are tricky. Do you use &, or & for example?

    I would recommend not using special characters. For example, if you wanted to use a key called “Today’s Reading,” why not just use “Reading” as the key. Then, when you display it in the template, just use

    < ?php $Reading = get_post_meta($post->ID, ‘Reading’, true); ?>

    Today’s Reading: < ?php echo $Reading; ?>

    This was you can avoid using special characters and even spaces without any lose in functionality or simplicity.

    There is no easy way to have a custom field use a dropdown box for its values. You’d either have to type in “Swimming” or “Hiking” each time, or you can try using the FreshPost plugin:

    http://wordpress.org/extend/plugins/fresh-page/

    This plugin will allow you to create your own “Write __” admin page. For example, WordPress already has a Write Post and Write Page. You can now create Write Whatever and populate it with what fields you need.

    Is this the plugin you used?



  10. Visit My Website

    August 29, 2008

    Dgold said:

    That latest code suggestion you put is very worthy as well. Thanks again.

    About the plugins, I have tried and compared Fresh-Page (now called Flutter), More Fields, and rc:Custom Fields GUI.

    Flutter is extremely ambitious and touches many other areas besides the Write Post page. It has an impossibly cumbersome set-up, and in the end it didn’t change my Write Post page. It just added a new Write tab, that I could name whatever, such as “Contribute A Post”. And then the custom fields I wanted were not beautifully displayed. Another problem is that Flutter conflicts with the plugin Get Custom Fields which I also have in-use live on my site (it conflicts because Flutter attempts to incorporate Get Custom Fields, but I didn’t want to change my whole theme to suit Flutter unless I knew it would be my solution). In short it had way too many problems. In favor of Flutter, this was the only plugin of the 3 that allowed the Checkbox List style of input (Choose 1 Or More From The List!). I did test it, and it actually worked. So I know this feature could be implemented in other plugins (or coded by hand, if I knew the right code).

    More Fields - the backend interface is much more simple. This plugin would be good except it doesn’t allow the Checkbox List style of input (for multiple-selecting values).

    rc: Custom Fields GUI - was a very good and simple plugin. I have used it for years. It actually still works with WP 2.6. Unfortunately the author hasn’t updated the plugin, but it’s not broken. It just lacks a backend (you have to edit a text file which is OK with me), and it doesn’t offer the Checkbox List style of input.

    Again, just to be clear about my needs: WordPress custom fields WILL allow multiple values for one key, on one post. So you can have the KEY “Favorite 3 Fruits” and offer the choice of values Apple, Orange, Kiwi, Strawberry, Grape, Banana.

    In comparison the normal “Drop Down List” and “Radio Button” styles of input, which are offered in all 3 plugins, are made for one value per one key. “Choose one of the following”. Example, KEY = “How Good”, and values are Bad, Good, Better, Best.

    Flutter and More Fields have another twist on this: the checkbox that simply returns the value “on” or “off” (can also be used for true/false).

    The situation is this: WordPress allows the input type I want. But the author has to understand the obscure WP Custom Fields interface. The author has to know how to use that. It’s not easy, especially try explaining “If you want 3 favorite fruits, then just set the Favorite Fruits key 3 times and type in your different values.” That’s too hard. The 3 plugins all offer the solution of making Really Obvious and theoretically beautiful input fields on the Write Post page, that every author will see, before you hit Publish. So you’ve got your TITLE, your POST writing area, and then right under that you can customize nice things like FAVORITE FRUITS, and it will have a beautiful checkbox list.

    Flutter can make this kind of input, but unfortunately if you study that plugin it has crazy problems that make this solution not attractive right now. Maybe someday. Meanwhile we have a plugin from 2005-2007 (custom fields gui) that is a great foundation — someone should update it (please). And we have a runner-up, More Fields, also a good plugin that would work for me if 1 more feature was added.

    Hope this helps someone else who’s searching. Also the above plugins might work differently for someone else, with another set-up, different WordPress, different PHP version, etc. This is just from my personal experiments recently. I am grateful to all the plugin authors and the writer of this post.



  11. Visit My Website

    September 9, 2008

    boilr said:

    this is very helpful. is there anyway to incorporate the custom image variable into a sidebar recent posts list? in other words, can you show the 10 most recent post titles with a custom image in front of it on the sidebar?

    thanks in advance!



Leave a Comment

Here's your chance to speak.

  1. Name (required)

    Mail (required)

    Website

    Message