10 Awesome Things To Do With WordPress’ Custom Fields

WPShout

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.

customfield

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

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="/wp-content/themes/NomeMag/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "Image", true); ?>
&h=250&w=250&zc=1" alt="">
<?php } else { ?>
<img src="/wp-content/themes/NomeMag/images/wpshoutlogo.jpg" alt="WPShout.com | No image available" />
(don't have a line break, just so it's readable)
<?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. You’ll need custom fields goodpoints and badpoints.

<?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.

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()) :
    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?

You should follow me on Twitter

Related Posts

Awesome SEO With Custom Fields

WPShout


Display Quotes From A Random Post

How To: Display Quotes From A Random Post in WordPress


WPShift

18 Comments - Add Yours!

  • Jim Atwood wrote on July 29, 2009 at 12:28 pm | Permalink

    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 =-.

  • Illi.Pro wrote on July 30, 2009 at 3:47 am | Permalink

    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 =-.

    • Alex Denning wrote on July 30, 2009 at 7:55 am | Permalink

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

  • Stuart wrote on July 30, 2009 at 2:17 pm | Permalink

    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 =-.

    • Alex Denning wrote on July 30, 2009 at 6:36 pm | Permalink

      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.

    • Alex Denning wrote on July 31, 2009 at 4:59 pm | Permalink

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

  • FAQPAL wrote on August 5, 2009 at 2:37 am | Permalink

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

  • Alex wrote on August 6, 2009 at 11:37 am | Permalink

    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 =-.

  • Dave Sparks wrote on August 25, 2009 at 1:57 pm | Permalink

    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.

    • Alex Denning wrote on August 25, 2009 at 5:05 pm | Permalink

      Or even better, read WPShout’s latest tut and build ‘more fields’ into your WP theme.

  • Arlene wrote on August 25, 2009 at 5:11 pm | Permalink

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

    • Alex Denning wrote on August 25, 2009 at 6:11 pm | Permalink

      Not at all! Glad you liked it :D . Be sure to grab the RSS feed for future updates.

  • Comment Guidelines Violation 4 wrote on August 25, 2009 at 9:20 pm | Permalink

    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

  • Module23 Werbeagentur Koblenz wrote on September 3, 2009 at 6:54 am | Permalink

    Interesting snippets for Wordpress users. Thanks for sharing.

  • martijn wrote on October 20, 2009 at 8:38 pm | Permalink

    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…

    • Alex Denning wrote on October 20, 2009 at 8:43 pm | Permalink

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

  • John wrote on January 4, 2010 at 6:42 am | Permalink

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

  • Gary wrote on February 20, 2010 at 2:55 pm | Permalink

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

Post a Comment

Please take not of the comment policy.

Your email is never published nor shared.

*
*
User Gravatar