Kriesi.at – new media design

How to use WordPress Custom Fields

WordPress gives an author the ability to add extra data to each written post and page. This data is called meta-data and is stored in custom fields.

These fields are really flexible in use and make it possible for developers and theme-authors to create stunning sites, far beyond from normal blog design.

In case you have never noticed it: to access these fields just head over to the write post/page site down to the Advanced Options Tabs. There you will find  the Custom Fields Tab which looks something like this:

Custom fields consist of two parts: A key and a value.

There are different options to display those fields, the one thing they all got in common: you have to call them inside the loop.

<?php the_meta(); ?>

This is the easiest way to display the data. The template tag automatically puts the entire meta-data into a CSS style called post-meta. The key is in a span called post-meta-key.

All of this is showcased in an unordered list:

<ul class='post-meta'>
<li><span class='post-meta-key'>mood:</span> happy</li>
<li><span class='post-meta-key'>Weather:</span> fine</li>
</ul>

You might want to use these custom informations in a more sophisticated way then displaying unordered lists with your mood and the current weather. Especially if you want to display a post in a way that doesn't remind the visitor of a typical blog post, custom fields come in very handy.

Just take a look at my porfolio page, or if you want to see a whole site based around custom fields, head over to BestWebGallery. Each post is stuffed with a lot of meta data which is used to display the posts in an unique way.

To display the data in a superior way we use the function

 get_post_meta($post_id, $key, $single);

The parameters we need to pass are explained fast:

  • $post_id is the ID of the post which stores the meta data. Most of the time it is the current post and we use: $post->ID
  • $key is a string containing the name of the meta value you want.
  • $single can either be true or false. If set to true then the function will return a single result, as a string. If false, or not set, then the function returns an array of the custom fields.This is needed if you have different $keys with the same name. We will set this to true for our example.

So lets say we have a custom field named "image" which contains the URI to the image:

we could easily display this image the following way:

<?php $image = get_post_meta($post->ID, 'Image', true); ?>

<img src="<?php echo $image; ?>" alt="" />

There are many ways to use custom fields, another one would be to add  a different class to some of your posts:

<?php $additional_class = get_post_meta($post->ID, 'class', true); ?>

<div class="my_post <?php echo $additional_class;?> ">
the_content();
</div>
?>

The possibilitys are nearly endless, so let your creative juices flow and enhance your site with custom fields ;)

Add to Digg Add to del.icio.us Add to StumbleUpon Add to technorati

Responses to “How to use WordPress Custom Fields”

  1. Aleks July 10th, 2008 at 2:05 am

    Excellent tutorial! I was thinking of starting up a webcomic, but could never wrap my head around how to dynamically automate the alt-text for each individual strip. This has solved my problem. I thank you. ^_^

  2. Josh July 13th, 2008 at 5:43 am

    Great post. I tried but am not clear about one thing. Let us say I create a field with post#1 with an image, and write the php code on the index page. Works fine. Let us say I want the same image to go with post #4. Obviously, I'll choose the same key from the drop down list while in #4. I tried this, and it gives me an error ("An unidentified error has occurred."). On the other hand, if I create a new key/value for post#4, it works fine. My understanding was that one field would be good to go with as many posts as one wants. Am I missing something? I am using WP 2.5.1/

    Thanks for your guidance,
    Josh

  3. Kriesi July 13th, 2008 at 8:57 am

    If you want to use the same image in post #4 you have to choose the same key AND fill in the same value for this key since the key is stored for each post separately.

    another more complicated solution would be to always call the same key/value pair in your template file:

    instead of $post->ID you would fill in the posts number. This way each function call would retrieve the same image:
    < ?php $image = get_post_meta(1, 'Image', true); ?>

  4. UncleLar July 19th, 2008 at 7:49 am

    How would the query differ if I wanted to pull the custom fields from the current page?

    In other words, is there a get_page_meta function and is $page->ID the current page?

  5. Kriesi July 20th, 2008 at 3:06 pm

    The query for getting posts and pages is the same, always use get_post_meta.

  6. UncleLar July 20th, 2008 at 10:44 pm

    Thanks

  7. Per August 14th, 2008 at 1:14 pm

    Great, simple tutorial that gave me the entire code I needed to get going, not just bit and pieces. Thanks,

  8. Joe August 17th, 2008 at 10:22 pm

    This is probably one of the most under utilized features within wordpress, which is really a shame because as you say it add a ton of possibilities. The information here is certainly easy to follow and I hope inspires many to take that step into wordpress custom fields. Thanks.

  9. Yannick August 20th, 2008 at 1:15 am

    I want to create pages that will includes post titles from a certain category that I put in the custom field below. But it's not working, I'm only getting articles that as no category assigned to it.

    Here's the line of code:

    <?php query_posts("cat=ID, 'category_name'); ?>&showposts=10"); ?>

    What am I doing wrong?

    Thanks!

  10. Heath August 20th, 2008 at 3:07 am

    I am unable to create a custom field in any of my posts. As soon as I click on "Add Custom Field" I too get the follow error message, "An unidentified error has occurred". I believe the problem started with the 2.6 update. I now upgraded to WP 2.6.1 and the problem still exists. I need to add "thumbnail" custom fields to my posts to display the post images on my home page. Please advise: http://www.HeathDixon.com

  11. Heath August 20th, 2008 at 8:04 pm

    Ok… Here's the solution if any one else experiences this problem:

    Most likely your "wp_postmeta" table in your SQL database is corrupt. It will look something like this:

    "SQL query:
    SHOW KEYS FROM `wp_postmeta` ;
    MySQL said:
    #145 – Table './databasae/wp_postmeta' is marked as crashed and should be repaired"

    Usually tables can be repaired from phpMyAdmin in the MySQL databases, but if not, open a support ticket and your host admin should be able to repair it for you.

    Issue resolved!

  12. Andrei September 17th, 2008 at 8:17 am

    I'm just starting to experiment with the concept of custom fields. However, when I try to call the_meta, I get nothing displaying. Using just the simplest php the_meta I get the starting and ending UL but no list items! Nada.

    And yes, I have input a custom key and value…

    What could I be missing?

  13. Andrei September 17th, 2008 at 8:28 am

    I figured it out.. I'm just a little dense looking at the wrong Page…

  14. Web Design Manchester October 22nd, 2008 at 10:08 am

    Yannick,

    This is the code your after

  15. mike November 10th, 2008 at 11:22 pm

    Do you know how to then transfer the value of a custom field from page to page? I can do it by appending it to the url, but was looking for something more elegant like setting a cookie.

    Example: You land on page yellow, the custom value is yellow, and then the whole site is yellow page to page. You land on page orange, the custom value is organge, the whole site is orange page to page.

  16. SubmitMyPage January 4th, 2009 at 1:06 am

    Thanks.

  17. tara February 27th, 2009 at 1:22 am

    I have added the following lines after

    ID, 'Image', true); ?>
    This is a image: <img src="" alt="" />

    Now this will be executed in every post, also post which doesn't have a image set. So the string This is a image will be in every post.

    How do I create an If for this?

  18. JG March 9th, 2009 at 6:02 am

    Hi,
    Silly question, when using this code

    ID, 'Image', true); ?>

    <img src="" alt="" />,

    When actually entering in the values would I just enter in both the URL and well as the alt text respectively in the value field to get them to show?

  19. JG March 9th, 2009 at 6:04 am

    Part ofthe code got cut off put basically I was asking about the image code you provided.

  20. Josh April 8th, 2009 at 5:22 pm

    I am the dumbest of everyone leaving a comment… where do I put the code? As in, which file… I create a custom key on the Post Page, for example "Related Links". Then, I add a value, which is a hyperlink.

    So, how do I tell the post to include this?! On the Wordpresss Codex, it tell me to use , but I don't know which file to place this in. I'm assuming I'm supposed to go to Appearance->Editor, then choose a file…

    Any help would be appreciated!

  21. Kim April 9th, 2009 at 8:41 pm

    Josh:

    Ur supposed to put it in the index.php file which is main index template in apperance/editor and it has to be within the loop. Depending on where you put it it will show up in different places

  22. kash April 23rd, 2009 at 6:41 pm

    Hi there,

    Thanks for the tutorial – iam very very new to this and trying to get my head round it!

    If I want to display the custom fields in a set of search results, how is this possible?

    The cusotm fields are:

    Headspace Advertiser
    Salary.

    I thought it would be

    ID, 'Headspace Advertiser', true); ?>

    ID, 'Salary', true); ?>

    … but that doesnt work

    Any help gratefully appreciated

    Cheers,

    Kash

  23. Jim B. June 19th, 2009 at 9:01 pm

    instead of $post->ID you would fill in the posts number.

    This explains why it did not show up on all post, but what is meant by the "post number? Is that at the end of the permalink like ?p=99 so I would put 99 in where you put 1 above.

    Thanks

    JIM

  24. Edward Palomo June 24th, 2009 at 1:42 am

    The very tutorial that I need! Thank you!

  25. Blessing July 8th, 2009 at 9:07 pm

    I've been searching for info on this stuff for hours, really, and this is absolutely the best tutorial i have found!! Thanx for takin the time!!

  26. Jun July 11th, 2009 at 4:04 pm

    Great post, just recently post in my blog, I'm wondering how to use wordpress custom fields, I tried lo search in google I found your site and read your post about custom fields, that's really a wonderful yet very simple tutorial.

    Thanks a lot

    Jun

  27. toure August 12th, 2009 at 5:32 pm

    Thanks for the code.
    Is there a way to add multiple images by putting an array in this code?
    Again thanks for any help

  28. Lugaluda September 22nd, 2009 at 11:16 pm

    This is very helpfull. I've used it on one of my site and works perfectly. Just what I needed. Thanks and keep on posting informative articles like this one.

  29. Jeff October 8th, 2009 at 8:41 pm

    Is there a way to add alt text to a custom field image?

  30. Sim December 13th, 2009 at 8:25 pm

    Hi i'm trying to sort something out and i think that Custom Fields is my answer but i'm not quite sure of the finer details.

    I'm trying to use the custom fields to change the gallery ID value in my single post template.

    src="http://localhost:8888/wp-content/plugins/nextgen-smooth-gallery/nggSmoothFrame.php?galleryID=1&

    Thanks
    Sim

  31. Pedro Gomes December 24th, 2009 at 4:27 am

    I´me trying to use custom fields in a new website, however i´d like to know a litle thing

    Where is that suppose to put those codes? I tried to put them on the post (cause i have that plugin "Exec-Php" but it retrieves a single 0…

    I can paste the code here if it helps you helping me xD

  32. Xander January 4th, 2010 at 8:35 am

    Great article :) Thank you for sharing :) It helped me out greatly with an ongoing project :)

  33. Shawn Hooghkirk January 15th, 2010 at 4:32 pm

    Amazing.

    You have just made something that seemed so complex, so easy. Plus, I didn't have to install a plugin.

    Thank you so much!

Trackbacks

  1. pligg.com
  2. Кэширование в WordPress (1/3)
  3. Wordpress Custom Fields | How To Blog
  4. 10 Custom Fields Hacks For WordPress | How-To | Smashing Magazine
  5. Custom Fields Hacks For WordPress « N3T.ir - Web Resources, Web Design News & Tips, Open Source
  6. Custom Fields Hacks For WordPress | jeremiahnellis.com/design_life
  7. Custom Fields Hacks For WordPress « Best Design Content
  8. Custom Fields Hacks For WordPress | B Studio
  9. Grumpy Git . org » Blog Archive » Custom Fields Hacks For WordPress
  10. Custom Fields Hacks For WordPress | The Scripts Zone
  11. Weekly roundup 7-12-2009 « Resonant Chaos
  12. Sumit-Online.de » Blog » Wie du Custom Fields benutzen kannst
  13. Custom Fields Hacks For WordPress | Benzing Technologies | Web Design, Web Hosting, Online Marketing | 866.980.2369
  14. BSoA 2
  15. Places you can learn how to set up cool stuff using Wordpress custom fields | Design strike
  16. Custom Fields Hacks For WordPress | 9Tricks.Com - Tips - Tricks - Tutorials
  17. Blogging in a new way « Ankit’s Weblog
  18. Advanced Power Tips For WordPress Template Developers - Smashing Magazine
  19. Advanced Power Tips For WordPress Template Developers « Tech7.Net
  20. Advanced Power Tips For WordPress Template Developers – Upon A Star
  21. Custom Fields « Netxm’s Blog
  22. 11 Most Common Wordpress Posts | New 2 Wp

Leave a Reply