Here are 3 awesome ways to use Wordpress's custom fields.

FYI: If you want an easy way to include default custom fields into your Write panel, try Rhymed Code's Custom Field GUI. If you have trouble with the download on his site, check out this comment for the fix.

1. A Custom Read More

Bryan Veloso's new Avalonstar design is a true work of art. While looking around the new site I saw that he has custom "Read More" messages. I thought this would be cool to have it change on a per-post basis, so I found a quick way to do this using custom fields in Wordpress (Bryan uses Django, not Wordpress).

<?php $custommore = get_post_meta($post->ID, 'custom_more', true); ?>
<?php if (!$custommore) { $custommore = 'Read More &raquo;'; } ?>
<?php the_content($custommore); ?>

All you need to do is replace your usual the_content template tag with this code. Then when you write a post, create a new custom field with the key of custom_more.

2. Awesome Thumbnailed Recent Posts

Gizmodo has a very cool feature within their header that shows their recent posts that can be replicated in Wordpress using custom fields.

First, create a thumbnail for each of your last 5 posts (and every subsequent post going forward). Upload it and then paste it's location into a new custom field with a key called post_thumbnail.

Next, create a new Loop somewhere in one of your template files that pulls this thumbnail in and displays it in an unordered list. Something like this:

<ul class="thumb_recent" >
<?php query_posts('showposts=5'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $thumbnail = get_post_meta($post->ID, 'post_thumbnail', true); ?>
	<li>
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
		<img src="<?php echo $thumbnail; ?>" alt="<?php the_title(); ?>" />
		<span><?php the_title(); ?></span></a>
	</li>
<?php endwhile; endif; ?>
</ul>;

This example also requires a little bit of CSS to make it look right, so add this to your stylesheet and you'll be all set!

View the Awesome Thumbnailed Recent Posts Example

ul.thumb_recent {
	list-style:none;
	margin:30px 0 0 0;
	padding:0;
	}
	
ul.thumb_recent li {
	float:left;
	margin:0 5px 0 0;
	position:relative;
	}
	
ul.thumb_recent li img {border:3px solid #7BA2C7;}
ul.thumb_recent li a:hover img {border:3px solid #666;}
ul.thumb_recent li span {
	text-decoration:none;
	display:none;
	text-align:left;
	position:absolute; 
	top:-15px;
	left:0px;
	width:400px;
	color:#666;
	text-transform:uppercase;
	font-family:arial;
	font-size:11px;
	}

ul.thumb_recent li a:hover span {display:block;}

3. Post Specific CSS Overrides

A Brief Message definitely has a unique look and feel to it. Each page has subtle differences that are done by including a unique stylesheet for each post. Wordpress can offer the same type of flexibility by using a custom form to create an internal style sheet for each post.

Firstly, create a custom field called post-css. For its value, paste your new CSS. Here is an extremely simple example:

body { background:#333333 !important; }

Note the !important. Some have argued that it is not necessary, but I feel that it is better to be safe than sorry in this case. The fact is that if the new CSS is declared below the one you are trying to overwrite in the same document, the last declared value should always take precedence.

The next step is to insert that custom field CSS into the header.php file. In that template file, find the line that declares your CSS stylesheet, and paste this code below it.

<?php if (is_single()) { ?> 
                                                             
<?php while (have_posts()) : the_post(); ?> 
                                         
<?php $newcss = get_post_meta($post->ID, 'post-css', true); ?>

<style type="text/css">   
                                                                                       
  echo $newcss;

</style> 

<?php endwhile; ?> 
                                                                       
<?php rewind_posts(); ?> 

<?php } ?>