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