Quick Tip: A 4 Minute Crash-Course in WordPress Custom Fields
videos

Quick Tip: A 4 Minute Crash-Course in WordPress Custom Fields

Tutorial Details
  • Difficulty: Basix
  • Technology: WordPress
  • Estimated Completion Time: 5 Minutes

Today’s Basix video quick tip topic comes from a question on Twitter, concerning the use of custom fields in WordPress. Luckily, as you’ll find, attaching unique data to postings is as simple as assigning a value in the “Edit Post” page, and then referencing that information with the get_post_meta() method.

Prefer to watch this video on Screenr.com?


Step 1: Create a New Post

In your local testing environment, create a new posting in the WordPress admin panel, and scroll to the bottom, until you see the “Custom Fields” widget.

Custom Fields

This section allows for a key, and a value. For example, if you aren’t taking advantage of the new “Post Thumbnail” feature, available in WordPress 2.9, and need a way to attach a thumbnail to each posting, this is where you’d accomplish that task. You could assign a key of “thumb,” and a value, which is equal to a path to the desired thumbnail. Go ahead and fill this section with some test data – anything you wish. I’ll use “difficulty” as my key,” and “hard” as the value.


Step 2: Edit Index.php

Now visit your theme, and within the WordPress loop in your index.php page, reference the get_post_meta() method.

<?php echo get_post_meta($post->ID, 'difficulty', true); ?><

This method accepts three parameters.

  • The id for the desired post. You can use $post->ID or “the_id()” to insert this value.
  • The key that you require. Remember, you can insert multiple custom fields. This is why we need to reference the key, in my case, “difficulty.”
  • A boolean, which determines whether you want the information returned as a string, or an array. As I’m echoing out my value, I’ve chosen true (or string).

Step 3: What If…

If you view run the website, you’ll see the correct value. If you went with a thumbnail path in your custom field, make sure that you echo out that string from within an IMG tag, accordingly. However, there’s one problem here; it’s possible that not EVERY single post will have this “difficulty” custom field attached, yet we’re blatantly assuming that there will be. This is inefficient. Instead, why don’t we first create an “if” statement, and determine whether our desired key exists first. Smarter right?

<?php if ( get_post_meta($post->ID, 'difficulty') ) :  ?>
   <small> <?php echo get_post_meta($post->ID, 'difficulty', true); ?></small>
<?php endif; ?>

Conclusion

Custom fields are a staple in every experienced WordPress designer’s toolbox. Learn them, and use them! Thanks for reading or watching!

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://cmtstudio.tumblr.com/ CMT Studio

    Nice tip, thanks!

    So what’s the “easier way to use thumbnails” you are mentioning? Is it timthumb that you mean or something else?

  • http://www.pryde-design.co.uk Andrew Pryde

    From a server load perspective would it not be better assign the value into a variable rather than querying the database twice?

    @Prydie

  • http://ds.laroouse.com esranull

    very nice post thanks

  • http://www.daniel-petrie.com Daniel Petrie

    Nice tip, I always wondered custom fields could be used for, but never really looked into it.

  • David Hughens

    Thanks for this easy to understand quick tip. I would love to see an in depth tutorial on custom fields with multiple examples of uses. Keep up the great work — I love Net Tuts +

  • Mampranx

    Cool, just another method on how to use WordPress Custom field, very splendid. Anyway, If you don’t mind in next quick tips, i would like to see you on how to create basic “Worpress option panel”.

    -Thanks

  • Luke

    Say i want to specify an image URL and ALT text in a single custom field to keep things organised (trying to avoid a massive list of custom fields) what would be the best way to store the URL and ALT value in one custom value field?

    Cheers

  • Damion

    Thank you for this i was just starting to use post meta and wondered how i could get rid of empty code. Thank you.

  • http://www.mybrainart.com Vasjen Katro

    Very nice tip!
    Cheers!

  • http://www.searchengineoptimization.co.uk Mike

    Custom fields have been tough task for me until i find and readymade template or theme which adds how to do guide like some photo gallery themes which adds custom field for uploaded image path etc..
    Thanks for this short but complete easy to do guide which i have bookmarked for custom modifications…

  • w1sh

    There was some kid who made a thumbnail tutorial during that screenr launch competition that went over this in his “Create a Custom WP Thumbnail” tutorial, but it’s nice to see the idea focus directly on making use of any ol’ custom field.

    GOSH JAY!

  • http://www.jordanwalker.net Jordan Walker

    Great tutorial, I always wondered about the custom fields.

  • Chris

    I wish this was on Itunes so I could watch it on my ipad. I hate having to bring my bulky lap to everywhere to look at videos.

  • http://twitter.com/aziz_light Aziz Light

    Nice Tip. One thing though, you can make this a little more DRY:

    ID, ‘difficulty’, true) ) : ?>

  • http://twitter.com/aziz_light Aziz Light

    The code from my previous comment didn’t display correctly…here it is again, wrapped in pre and code tags:


    ID, 'difficulty', true) ) : ?>

    And just in case it still doesn’t display correctly, I’ve put it on pastebin: http://azizlight.pastebin.com/BZbZUGGq

  • http://brianswebdesign.com Brian Temecula

    Wow, I can see this enabling me to insert a lot of cool stuff into posts!

  • http://contextive.com Amit

    I think it’s generally more efficient to call each function once, so a better way to do it is actually to assign a variable inside the if statement and then echo this variable instead of calling the function again (in a 10 posts page with 2 custom fields per post, the script will call “get_post_meta” only 20 times and not 40).

    
    ID, 'difficulty', true) ) != null  ) {
           echo "" . $my_custom_field . ""; 
    }
    ?>
    
    
    • http://contextive.com Amit

      by the way.. how do you post formatted code here without it being stripped down?

  • http://pipebomb.se Niklas

    Great tut, didnt actually know what to use it for before this!

  • Gavin

    What if I want to display this in my sidebar on the page. I want the user to add an image to the page and have it show in the sidebar.

    Where do i declare the custom field? If I do it in the loop then it will be shown in the flow of the page?

    Thanks

    • Gavin

      Nevermind I played with it and got it to work, if I can get it to display, the code i used is here:

      ID, 'difficulty') ) : ?>
      <img class="difficulty" src="ID, 'difficulty', true); ?>" alt="Icon for Post #" />

  • http://www.indiaseo.com sam

    Great tutorial, I always wondered about the custom fields.as this is not easy for the new users.Custom fields have been tough task for me until i find and ready made template or theme which adds how to do guide like some photo gallery themes which adds custom field for uploaded image path etc..

  • Luis Francisco

    Thanks again!! Another lesson done!
    This is the second one… some to go…

    Please, post some more!! =]

  • http://www.coresystemsusa.com Industrial computer

    I hope you never stop! This is one of the best blogs I have ever read.Please keep it up because the internet needs someone like you spreading the word.

  • oumz

    can we add multiple custom fields per post ? I thought we could but I am unable to add another custom field.. any suggestions what I might be doing wrong here

  • http://webloggerz.com/ Webloggerz

    Thanks for this free tutorial