10 Awesome Things To Do With WordPress’ Custom Fields

10 Awesome Things To Do With WordPress’ Custom Fields

Posted on 28. Jul, 2009 by Alex Denning in Theme Development

Custom fields are what turns WordPress from a blogging platform to a CMS. Want to do just about any project on WordPress but not sure it is up to the job? Custom fields are the answer. In this post, there are ten awesome things to do with custom fields in WordPress.

1. SEO your title tag (<title>)

Search Engine Optimisation, or SEO is something that a lot of bloggers get obsessed about, whilst others think it’s a load of rubbish. I’m halfway between the two – whilst I believe that you can change certain things to better SEO your content, such as adding H1, H2 etc tags in the appropriate places, I personally don’t think you should get too carried away with it. One of the things you can do though is change your title tag, and this custom field trick will let you set a custom field and it’ll appear as your title tag. Add the code below to your header.php file:

<?php
  1. $title = get_post_custom_values("Title");
  2. if ( is_array($title) ) { ?>
  3. <?php echo get_post_meta($title->ID, "Title", true); ?>
  4. <?php } else { ?>
  5. <?php the_title(); ?> | <?php bloginfo('name'); ?>
  6. <?php } ?>

Then, you can create a custom field “Title” and it’ll appear as your title! If no custom field is set then a bog-standard title is displayed.

2. Create an e-Commerce site

customfieldscsstricks

CSS-Tricks’ Chris Coyier made a screencast recently – “Advanced Uses for Custom Fields in WordPress” – in which he walks through using custom fields to make an e-Commerce site. Pretty neat.

3. Display a customised excerpt

Whilst WordPress’ the_excerpt is great, if you want to have two different lengths of excerpt, it’s not so good – the solution – a custom field! Create a custom field “excerpt_two” and then display it in your theme with the code below:

<?php echo get_post_meta($post->ID, “excerpt_two”, true); ?>
  1. <h2>4. Display a thumbnail (and auto resize it)</h2>
  2. Whilst there are a number of ways of displaying thumbnails, this is still my favourite (even if it does require the most work!). First, upload timthumb to /wp-content/themes/yourtheme/ and create an image 250px by 250px with your site’s logo and upload it to yourtheme/images/. This is the image that will be displayed if no custom field is displayed. Then, for every thumbnail, you’ll need to create it in Photoshop and upload it to your blog. Next, create a custom field ‘Image’ with the path of the image as the value of the custom field. Now for the code:
  3. <pre lang="enc__php"><?php $postimageurl = get_post_meta($post->ID, 'Image', true);
  4. if ($postimageurl) {
  5. ?>
  6. <img src="/scripts/timthumb.php?src=<?php echo $postimageurl; ?>&h=250&w=250&zc=1" alt="">
  7. <?php } else { ?>
  8. <img src="/images/no-image.jpg" alt="No image available" />
  9. <?php } ?>

5. Create a post series

This is something that I wished I’d thought of a long time ago – show other posts in the same series using not a plugin but custom fields. All you’ve got to do for this trick to work is create a custom field ‘Series’ with a link to each other post in the series. Each post must be a seperate custom field. Then, use the code below to display all the other posts in the same series! (hat off to Jeff Starr for the code)

<?php $series= get_post_meta($post->ID, 'Series', false); ?>
  1. <h3>Also in this series:</h3>
  2. <ul>
  3. <?php foreach($series as $series-post) {
  4. echo '<li>'.$series-post.'</li>';
  5. } ?>
  6. </ul>

6. Display additional information in posts

zoknowsgaming

Whilst building the new version of ZoKnowsGaming, Lorenzo (the site’s owner) and I decided we needed a way to display additional content in reviews without too much hassle. The solution? Custom fields! But not just custom fields, custom fields with custom write panels to make it even easier to enter information. Again, code below will get you something looking like the pic above. Pass microsoft certification in day! Our online training is best alternate to in personal scjp and mcp classes. You’ll need custom fields goodpoints and badpoints.

<?php if ( get_post_meta($post->ID, 'goodpoints', true) ) { ?>
  1. <span class="entry-author">
  2. <b>Plus points</b> -
  3. <?php $values = get_post_custom_values("goodpoints"); echo $values[0]; ?><br />
  4. <?php } ?>
  5. <?php if ( get_post_meta($post->ID, 'badpoints', true) ) { ?>
  6. <b>Minus points</b> -
  7. <?php $values = get_post_custom_values("badpoints"); echo $values[0]; ?>
  8. </span>
  9. <?php } ?>

7. Display additional meta information

Whilst WordPress does allow you to display a fair bit of meta info, you can never have too much; use custom fields and you can have as much meta data as you like! For example, if I wanted to say “this post is tagged x, and when this post was written, it was [weather] outside. Then I’d need the following code and a custom field ‘Weather’.

<?php the_tags('This post is tagged:' ',' ','); ?> 
  1. and when it was written it was 
  2. <?php $values = get_post_custom_values("Weather");
  3. echo $values[0]; ?> outside.

8. Save yourself using a ‘featured’ category

What with magazine themes being ‘teh most popular and teh bestest’ themes you can get at the minute, a lot of blogs will be finding themselves with a ‘featured’ category so that the most popular posts on their site can be easily displayed for viewing pleasure. Thing is, I’ve got a tip: use custom fields instead! Never have to worry about ‘Featured’ being displayed on your navigation becuase you forgot to exclude it from list_categories! The code is below, from WPRecipes. For your ‘featured’ posts, add the custom field ‘featured’ with the value 1.

<?php if (have_posts()) :
  1.     while (have_posts()) : the_post();
  2.          $customField = get_post_custom_values("Featured");
  3.          if (isset($customField[0])) {
  4.               //Custom field is set, display post info
  5.               the_title();
  6.               the_excerpt();
  7.          }
  8.     endwhile;
  9. endif;
  10. ?>

9. Get custom fields outside the loop

Another nice tip from WPRecipes - get custom fields outside the loop! Wow! Code below.

<?php
  1. global $wp_query;
  2. $postid = $wp_query->post->ID;
  3. echo get_post_meta($postid, 'customField', true);
  4. ?>

10. Automatically get the first image in a post (for the homepage etc), but not if a custom field exists

A slightly long-winded title, but this trick really is great; what it does is get the first image in a post for displaying on the homepage, but it first checks if a custom field ‘Image’ exists, and if it does, then that image gets displayed. Neat, no? You’d want to use this, say, if you were developing a magazine theme then you could give your users the option of having an image automatically resized, but if that ends up cutting off an important part of the image (ie someone’s head), then users have the option of cropping the image themselves.

The first thing to do is to add the code below to your functions.php file:

<?php
  1.  
  2. // Get URL of first image in a post
  3.  
  4. function catch_that_image() {
  5.  
  6. global $post, $posts;
  7.  
  8. $first_img = '';
  9.  
  10. ob_start();
  11.  
  12. ob_end_clean();
  13.  
  14. $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  15.  
  16. $first_img = $matches [1] [0];
  17.  
  18. // no image found display default image instead
  19.  
  20. if(empty($first_img)){
  21.  
  22. $first_img = "/images/default.jpg";
  23.  
  24. }
  25.  
  26. return $first_img;
  27.  
  28. }
  29.  
  30. ?>

A quick bit of dissection. The first line is saying if the custom field exists, paste that here. If it doesn’t then go and fetch the first image in the post and use timthumb to resize it. You’ll need timthumb installed at /wp-content/themes/yourtheme/scirpts/timthumb.php

Wrapping up

And there we have it. 10 awesome things to do with WordPress’ custom fields. Hopefully it has given you a couple of ideas on how to use custom fields, and if it has, why not share said idea with a comment below?

Related posts:

  1. Smashing Custom Fields
  2. Really Easy Custom Post Backgrounds For WordPress
  3. Using WordPress As A CMS

Tags:

Follow on Twitter! Subscribe!
Alex's Gravatar

Alex Denning is the founder of WPShout. A WordPress developer from London, Alex co-founded WPShift at the start of 2010 where he sells awesome WordPress themes.

You can find Alex on Twitter and at AlexDenning.com.

35 Responses to “10 Awesome Things To Do With WordPress’ Custom Fields”

  1. Jim Atwood

    29. Jul, 2009

    Thanks very much for this excellent article. I in fact use custom fields extensively in all my blogs and find your ideas very useful.
    .-= Jim Atwood´s last blog ..Kanji in Effect Japan =-.

    Reply to this comment

  2. Illi.Pro

    30. Jul, 2009

    Hey nice tips! i wanna to know something.. like it’s possible to create another excerpt (like in the 3rd tip – 3. Display a customised excerpt), it’s possible to create another “” style? so i can have and with differents styles, if you know it will be fantastic.

    Regards.
    .-= Illi.Pro´s last blog ..Convertir un archivo (lista de reproducción) .wpl a .m3u =-.

    Reply to this comment

    • Alex Denning

      30. Jul, 2009

      You could do something like ‘if custom field exists use that as an excerpt, if it doesn’t then use the standard excerpt.

      Reply to this comment

  3. Stuart

    30. Jul, 2009

    Great post Alex and glad to see you recovered it after yesterdays server gremlins ate it ;)
    .-= Stuart´s last blog ..Create an Options Page For Your WordPress Theme =-.

    Reply to this comment

    • Alex Denning

      30. Jul, 2009

      Me too :D . There’s still a post from last week missing that I haven’t got a copy of; if anyone has it in their RSS reader it’d be great if you could email me through the contact form.

      Reply to this comment

    • Alex Denning

      31. Jul, 2009

      Ta. Still missing a post, which is annoying, but these things happen.

      Reply to this comment

  4. FAQPAL

    05. Aug, 2009

    Wow, great post. These are some great code snippets for all bloggers.
    .-= FAQPAL´s last blog ..HOW TO: Build Your Companya4s Profile on LinkedIn =-.

    Reply to this comment

  5. Alex

    06. Aug, 2009

    Haha, I only have a thumb for my posts trough custom fields and I tweet my blog posts trough them. Thanx for the list, I will implement some on my next wp projects
    .-= Alex´s last blog ..Blog promotion: The social media alternative solution for small blogs =-.

    Reply to this comment

  6. Dave Sparks

    25. Aug, 2009

    Just working on a wordpress site at the moment and custom fields are hugely useful. If you’re building for a client I’d also look at using something like the more fields plugin (http://wordpress.org/extend/plugins/more-fields/) to control how they use them.

    Reply to this comment

  7. Arlene

    25. Aug, 2009

    This information could not have come at a better time, I am doing my first project with wordpress as the sole cms….thank you!

    Reply to this comment

  8. Comment Guidelines Violation 4

    25. Aug, 2009

    Wow I really wish I had known about these techniques when I first started building sites. Thanks for sharing, I’ve bookmarked the post!

    Dan

    Reply to this comment

  9. Module23 Werbeagentur Koblenz

    03. Sep, 2009

    Interesting snippets for WordPress users. Thanks for sharing.

    Reply to this comment

  10. martijn

    20. Oct, 2009

    does that first one really work like that? doesn’t it have to be:
    ID, ‘title’, true);
    if ($title) {
    ?>

    |

    ???
    can’t figure out where the vars post-img and postimageurl come from…

    Reply to this comment

    • Alex Denning

      20. Oct, 2009

      You’re quite right. That was me being an idiot and not changing the code from the project I copied it from!

      Reply to this comment

  11. John

    04. Jan, 2010

    Really interesting. Perhaps, Custom Fields are the most unkown functionality of wordpress.

    Reply to this comment

  12. Gary

    20. Feb, 2010

    Very useful summary of idea thanks, I think a couple could be turned into nice plugins

    Reply to this comment

  13. Matt Orley

    30. Apr, 2010

    I’ve started using dates in custom fields, and doing calculations on how many days since, till, certain events. Custom Fields let my programming side come out!

    Reply to this comment

  14. Miles Elliott

    03. Jun, 2010

    Very nice, just one thing, from number four

    <img src="/scripts/timthumb.php?src=&h=250&w=250&zc=1" alt="">

    has the wrong variable referenced for the timthumb script, it should be $postimageurl instead of $Image

    Reply to this comment

  15. matt

    23. Jun, 2010

    Best article I’ve seen on custom fields… super awesome wicked.

    Reply to this comment

  16. Gemma

    03. Aug, 2010

    Do all of these tips work with the latest version of WordPress (3.0.1)?

    Reply to this comment

  17. Marcelo Mizuno

    05. Aug, 2010

    Awesome article. Thank you Alex.

    Reply to this comment

Trackbacks/Pingbacks

  1. Reminder: Don’t Forget to Backup Your WordPress Database! says:
    July 28, 2009 at 11:54 pm

    [...] on my blog, WPShout I published ‘10 Awesome Things to Do With WordPress’ Custom Fields‘. This morning I awoke to find not a single comment on the post. I was disappointed as the [...]

    Reply
  2. Reminder: Don’t Forget to Backup Your WordPress Database! | Download E-Books Free Video Training Courses Softwares says:
    July 29, 2009 at 1:57 am

    [...] on my blog, WPShout I published ‘10 Awesome Things to Do With WordPress’ Custom Fields‘. This morning I awoke to find not a single comment on the post. I was disappointed as the [...]

    Reply
  3. 10 Dinge, die man mit Wordpress Custom Fields machen kann « Custom, Fields, Wpshoutcom, Möglichkeiten, Funktionen, Dabei, Bloggern, Wordpress « Volderette says:
    August 25, 2009 at 3:47 pm

    [...] Bloggern nicht besonders beachtet. Dabei haben sie bei WordPress einige mächtige Funktionen. Wpshout.com hat ein paar der Möglichkeiten, die man mit Custom Fields hat, zusammengefasst. Tags: blog, Custom Fields, [...]

    Reply
  4. 10 Dinge, die man mit Wordpress Custom Fields machen kann « Custom, Fields, Wpshoutcom, Möglichkeiten, Dabei, Bloggern, Wordpress, Volderette « Volderette says:
    August 25, 2009 at 3:48 pm

    [...] Wpshout.com hat ein paar der Möglichkeiten, die man mit Custom Fields hat, zusammengefasst. Tags: blog, Custom Fields, [...]

    Reply
  5. Friday Blog Scan: Things We Liked from the Week That Was | Clean Slate says:
    August 28, 2009 at 3:24 pm

    [...] if you are using WordPress to run your Website or Blog, you know how powerful of a platform it is. Here are 10 Awesome Things To Do With WordPress’ Custom Fields to help make your web destination bigger, badder & [...]

    Reply
  6. Monthly Mother Lode of MacDaddy Links: August 2009 | bkmacdaddy designs says:
    September 1, 2009 at 12:37 pm

    [...] Hacks to Encourage User Interactivity 7 examples of innovative effects and techniques in webdesign 10 Awesome Things To Do With WordPress’ Custom Fields Essential WordPress Plugin: Add To Facebook Preventing Widows in Post Titles @font-face and 15 [...]

    Reply
  7. Free WordPress (Magazine/Framework/Bloggy/Tech Blog) Theme: Biblioteca | WPShout.com says:
    September 15, 2009 at 6:00 am

    [...] 10 Awesome Things To Do With WordPress’ Custom Fields [...]

    Reply
  8. Advanced Uses of WordPress | WPShout.com says:
    November 2, 2009 at 5:02 pm

    [...] using and all the options available to you:"A Beginner Guide To WordPress Theme Development"10 Awesome Things to do with WordPress’ Custom FieldsCreating the perfect widget ready WordPress themeWordPress’ Template File Hierarchy [...]

    Reply
  9. 10 More Tips To Improve Your WordPress Theme | WPShout.com says:
    December 2, 2009 at 6:51 pm

    [...] and various other areas of the theme.4. Don’t use custom fields unneccesarilyWhilst I do love custom fields, I don’t love using them unneccesarily. If you’re making a magazine theme such as the [...]

    Reply
  10. Extend WordPress With Custom Fields - Smashing Magazine says:
    April 29, 2010 at 2:29 pm

    [...] your blog and its ranking in search engines. Enjoy!If you’d like to do some further reading:10 Awesome Things to Do With WordPress’ Custom FieldsWordPress Custom Field Tutorial, Part 1 and Part 2Custom “Read More” LinksThe [...]

    Reply
  11. Extend WordPress With Custom Fields | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more! says:
    April 30, 2010 at 10:37 am

    [...] your blog and its ranking in search engines. Enjoy!If you’d like to do some further reading:10 Awesome Things to Do With WordPress’ Custom FieldsWordPress Custom Field Tutorial, Part 1 and Part 2Custom “Read More” LinksThe [...]

    Reply

Leave a Reply

Please use your real name when commenting. Wrap code in <code> tags and make sure HTML is encoded. You can use regular HTML like <a href="... etc.

Get yours questions answered quicker

If you're using this post for paid work and have a question of any complexity then please ask at WPQuestions where you'll get a prompt response.