Get our posts emailed to you with our monthly newsletter, subscribe here.

Every one who uses WordPress for there blog will have no doubt at some point noticed the section labelled ‘Custom Fields’. Now be honest, how many of you use this feature on your Website? or how many of you at least understand what it does? The feature is infact very handy and with a few simple steps, it can really make your WP Theme stand out, but there are many who don’t take advantage of it!

Hopefully if your reading this you have some understanding of how WordPress works, and fingers crossed you are aware of the WP Loop that pulls your posts to display on your site. If you are not familier with the Loop then this page will be very usefull to you in your quest to conquer WordPress (http://codex.wordpress.org/The_LoopClick).

You can define a custom field for each post and set its value to be anything, for example, a URL of an image you want to display, a URL of a site you wish to link to, or just some random text. Okay, this may not make sense yet, but the easiest way to explain, is to show you how I use the Custom Fields on Self Conclusion.

So first things first, where do I use these ‘Custom Fields’ on my site? Well when you visited my blog you will have noticed the featured section of at the top of the page just below the Twitter section. This currently displays three posts, along with an image, and a short excerpt of what it contains. Custom Fields are used here to display the Image for that particular post. You may be wondering why can’t I just call the images I want to display manually and change them as and when I write a new feature post? Well this method isn’t as effecient removes some of the dynamicness (not sure if that is a word by the way) of your site. Lets face it, we use WP to allow us to manage our content better!

How do we do it then Stu? Well it is really easy, first you need to assign a custom field, in my case a link to a thumbnail image that I want to display above the post title and excerpt.

In the Custom Field section you have two options that require your attention, the Key and the Value. The Key can be anything, but its a good idea to keep it fairly simple as you need to call it later on, try call it something relevant. Think of the Key value as a variable name, so for this example I will call it post_image because suprise suprise I am going to be using it to display the post image! (clever I know). In the Value field you need to put whatever it is you want to display, in this example a URL which links to an image. Once you have filled in both parts, click on ‘Add Custom Field’.

Custom Fields in Admin Area

Next we need to ammend the WP loop to include this new field on your site. Before I implemented an image to my feature posts, I just had the Loop pulling the Title and the Excerpt, and my code looked like this…

[php] <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="feature">

<p class="feature-title"><a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></p>

<p class="feature-preview"><?php the_excerpt(); ?></p>

</div>

<?php endwhile; ?>
[/php]

We need to add a bit of code for the custom field. The key part is the get_post_meta part, because this calls the custom field and outputs what you set in the WP Admin area, in this case it will output http://designwoop.com/images/posts/image1.jpg. Notice the post_image, this needs to be set to the name of your custom field which you should have set earlier. Finally, we need to place the code around an image src tag to ensure the image is displayed on the page, see below…

[php] <img src="<?php echo get_post_meta($post->ID, "post_image", true); ?>"
alt="Permanent Link to <?php the_title(); ?>" />
[/php]

Very simple indeed! Now when I add this bit of code into my WP Loop you get the following…

[php] <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="feature">

<img src="<?php echo get_post_meta($post->ID, "post_image", true); ?>"
alt="Permanent Link to <?php the_title(); ?>" />

<p class="feature-title"><a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></p>

<p class="feature-preview"><?php the_excerpt(); ?></p>

</div>

<?php endwhile; ?>
[/php]

Here is what you see on screen in my case…

Well thats about it for now, but let me know if this has come in handy for anyone. It really is a simple process and so easy to implement on your website. If you have used custom fields on your WordPress site then leave a link in the comments.

Posted by Stu Greenham

Stu Greenham is a Web Designer / Developer who lives in Hull (North East England) and works for the web agency.

20 Comments

  1. This is just what I have been looking for in a new theme that I am building, Thanks!

  2. Great post, I completely agree that custom fields are always overlooked and never used enough… and you break it down in such a simple, straight forward way. Good show!

  3. Pretty awesome post. I just stumbled upon your website and wanted to say that I’ve genuinely liked reading your blog posts. I’ll opt-in for your feed and I hope you publish another post again shortly!

    1. Thank you for taking the time to leave your kind words :)

  4. I just started learning PHP and THANK YOU!

    Very easy-to-follow-guide!

    Thumbs up!

    Reply

  5. […] This plugin simply creates a short URL using Lessn when a post is published and saves it to a custom field that can then be displayed on your post page wherever your […]

  6. Great tutorial!

  7. Hi Stu,
    Nice post. I am totally not tech savvy but I think I understand at least 70% of it. Why I chanced into your blog is because I am trying to find a way to place Javascript or Java Applets onto the post of my WordPress. I searched Google thoroughly and have tried many methods but it won’t work. Then there is someone who said placed the codes below into the WP Theme and use the Custom Filed to call it ( that’s why I am here ):

    ID, ‘js’, false);
    if (!empty($js_array)) {
    echo ”;
    foreach ($js_array as $js) {
    echo $js;
    }
    echo ”;
    }
    ?>

    Can you advise me how to use the custom field to call up this feature to allow Java in my post?
    Thanks!!

  8. I just started learning PHP and THANK YOU!

    Very easy-to-follow-guide!

    Thumbs up!

  9. Thank you thank you thank you! Huge help! You + custom fields help= superstar!

    1. @Erica – Thank you glad I could be of help! :)

  10. Hi

    I have been learining to use WP to make good CMS’s. With the release of WP 2.8 and now your good description of Custom fields hopefully I can make them even better…

    Thanks

    1. @Svrdesign – Thanks for your kind words! Glad I could help!

  11. […] Self Conclusion¬†has posted a great article on how to work with custom fields.¬† You will need to have some knowledge of WordPress and some basic knowledge on coding. […]

  12. This is a great writeup! I have a daunting challenge that doesn’t appear to have an answer. Is it possible to use custom fields in static PAGES (not posts) and then return the values in a separate static page (outside of the loop)?

    For example, i’ve created 10 static pages of my favorite books. these won’t change any time soon, if at all. I am then creating a rolled up page using the custom values of 3 items (URL for thumbnail image, Title, Author).

    Is there example code to use within the index.php file that would only apply for this rollup page?

    Thank you!

  13. Nice post, on my previous site design I had a “page header” with custom help text at the top of each page.

    I blogged about the process at http://www.developinstyle.com/?p=40.

    Custom fields are one of the most powerful, yet, underused areas of WordPress imo, good to read informative posts regarding them.

    Mark

  14. This was extremely helpful and clear. Thank you!

  15. […] Working with Custom Fields in WP | Self Conclusion Custom Fields make life easier in WP – Here is some explination (tags: Tutorials wordpress howto) […]

  16. this is honestly, the best explanation/example I’ve read on using WP custom fields. And I’ve been using them for a while

Comments are closed.