Skip to content

10 Awesome Things To Do With WordPress’ Custom Fields

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
$title = get_post_custom_values("Title");
if ( is_array($title) ) { 
 echo get_post_meta($title->ID, "Title", true); 
 }	else { 
 the_title(); ?> | <?php bloginfo('name'); 
 }

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); ?>

4. Display a thumbnail (and auto resize it)

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:

<?php $postimageurl = get_post_meta($post->ID, 'Image', true);
if ($postimageurl) {
?>
<img src="/scripts/timthumb.php?src=<?php echo $postimageurl; ?>&h=250&w=250&zc=1" alt="">
<?php } else { ?>
<img src="/images/no-image.jpg" alt="No image available" />
<?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); ?>
<h3>Also in this series:</h3>
<ul>
<?php foreach($series as $series-post) {
echo '<li>'.$series-post.'</li>';
} ?>
</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!

<?php if ( get_post_meta($post->ID, 'goodpoints', true) ) { ?>
<span class="entry-author">
<b>Plus points</b> -
<?php $values = get_post_custom_values("goodpoints"); echo $values[0]; ?><br />
<?php } ?>
<?php if ( get_post_meta($post->ID, 'badpoints', true) ) { ?>
<b>Minus points</b> -
<?php $values = get_post_custom_values("badpoints"); echo $values[0]; ?>
</span>
<?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:' ',' ','); ?> 
and when it was written it was 
<?php $values = get_post_custom_values("Weather");
echo $values[0]; ?> outside.

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()) :
    while (have_posts()) : the_post();
         $customField = get_post_custom_values("Featured");
       	 if (isset($customField[0])) {
              //Custom field is set, display post info
              the_title();
              the_excerpt();
         }
    endwhile;
endif;
?>

9. Get custom fields outside the loop

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

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

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

// Get URL of first image in a post

function catch_that_image() {

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

$first_img = $matches [1] [0];

// no image found display default image instead

if(empty($first_img)){

$first_img = "/images/default.jpg";

}

return $first_img;

}

?>

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?

Yay! 🎉 You made it to the end of the article!
Alex Denning
Share:

33 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Nasir Hayat
October 22, 2011 3:03 am

Thanks! this is what is was looking for.

Useful Tidbits October 19, 2011 — Shelley Keith
October 19, 2011 11:29 pm

[…] 10 Awesome Things To Do With WordPress’ Custom Fields | WPShout.com […]

Giang
May 17, 2011 5:17 pm

Awesome tutorial, I will use in my blog soon <3

YeuHost.info
January 20, 2011 7:32 am

This is so useful tutorials. Example, I want to add extra “category” as 5-star, 4-star to list hotels content, I can customize it via custom_fields and add post_meta tag next to title. Right?

Salem
November 10, 2010 12:02 am

you save me with 9. point
thank you so much ..

Marcelo Mizuno
August 5, 2010 10:53 am

Awesome article. Thank you Alex.

Gemma
August 3, 2010 12:01 pm

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

matt
June 23, 2010 9:37 pm

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

Miles Elliott
June 3, 2010 11:57 pm

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

Extend WordPress With Custom Fields | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!
April 30, 2010 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 […]

Matt Orley
April 30, 2010 3:12 am

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!

Extend WordPress With Custom Fields - Smashing Magazine
April 29, 2010 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 […]

Gary
February 20, 2010 2:55 pm

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

John
January 4, 2010 6:42 am

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

10 More Tips To Improve Your WordPress Theme | WPShout.com
December 2, 2009 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 […]

Advanced Uses of WordPress | WPShout.com
November 2, 2009 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 […]

martijn
October 20, 2009 8:38 pm

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…

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

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

Module23 Werbeagentur Koblenz
September 3, 2009 6:54 am

Interesting snippets for WordPress users. Thanks for sharing.

Monthly Mother Lode of MacDaddy Links: August 2009 | bkmacdaddy designs
September 1, 2009 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 […]

Friday Blog Scan: Things We Liked from the Week That Was | Clean Slate
August 28, 2009 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 & […]

Comment Guidelines Violation 4
August 25, 2009 9:20 pm

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

Arlene
August 25, 2009 5:11 pm

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

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

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

10 Dinge, die man mit Wordpress Custom Fields machen kann « Custom, Fields, Wpshoutcom, Möglichkeiten, Funktionen, Dabei, Bloggern, Wordpress « Volderette
August 25, 2009 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, […]

Ben Lacey
March 15, 2011 2:21 pm
Reply to  Alex Denning

Good idea.
Love the post, very well written and very informative.

If you want to use custom fields in the theme files (header.php, footer.php etc) then you need to add global $posts; to the top of header.php.

Reminder: Don’t Forget to Backup Your WordPress Database! | Download E-Books Free Video Training Courses Softwares
July 29, 2009 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 […]

Reminder: Don’t Forget to Backup Your WordPress Database!
July 28, 2009 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 […]

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!