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

UPDATE 5/26/08: I upgraded my membership directory to Wordpress version 2.5.1. There were little to no problems, so this tutorial is still completely valid for creating a membership directory with Wordpress.

UPDATE: This is a repost of a guest post I made earlier this year over at WPDesigner. I am reposting it here because of the neglect that has taken place recently over at WPDesigner. I will only be responding to questions on this article from now on. Thank you for your understanding. (FYI: My WPDesigner guest post was an unpaid one, so I am in no way stealing from anyone here…)

This article was written by Chris Cagle.

Do you want to create a moderated membership directory that showcases your member's information? Do you want it to be flexible, be very little work after initial setup, and use a world-class open source platform that you are already familiar with?

Your first thought might not be to use Wordpress for such a project, but since it already has an extremely easy way to accept, moderate and update registrations - it's a perfect candidate.

In this tutorial I will show you how I built a successful membership directory using nothing more than a standard Wordpress 2.3+ install and 2 very powerful plugins.

The Plugin Installs

The heart of the site is powered by two plugins.

First, use the WP User Manager plugin from Dealsway to add new fields to the user profiles. The install and setup is pretty straight forward - just activate the plugin and add any new fields you want via it’s own admin section. The information entered in these fields will become the information that will create the member's "homepage."

Secondly, we use the famous Role Manager plugin which restricts what your members can do once they are logged into your site. This is important because in order for a member to be granted their own author page, he or she needs to have made at least one post.

In my case, I didn't want my members to have the ability to post anything, just to only fill out their profile information. To get around this, I used the Role Manager plugin as-is, but changed the Author role to only have the rights Publish Posts and Read. (The Hide Dashboard capability you see in the screen shot is a function of the IWG Hide Dashboard plugin. It was an easy way to clean up the admin panel for my members.)

Setting Wordpress Options

After you have installed all the plugins, we need to get Wordpress ready for your new registrations.

In your Admin panel, under options, set your New User Default Role to Subscriber. This ensures that a member won't be given an author page until you "approve" and manually move them to the Author role. (A Subscriber can't make posts, an Author can.)

Once a member has registered and filled out all the appropriate profile information, we need to "approve" that member. We do this by simply moving that member into the Author role and making a post on his or her behalf. I want each approved member to have made a post in order to create the New Member Feed [example]. To post on behalf of that member, choose that member's name out of the dropdown list in the Post Author section in the sidebar before publishing their post.

This post doesn't need to be anything spectacular. On Pittsburgh Designers, I simply write "This business has been added as a member. Please visit their Design Profile."

There are other ways of doing this to make it slightly simpler, but I do it this way because I want to use Wordpress's default feed as a New Member Feed.

Your membership management duties are now done.

Creating the Author Page

All that's left now is the need to create the author.php template to display all this new member profile information that the WP User Manager plugin allowed us to accept.

For the sake of this tutorial, we only added 2 new fields to the member profile page: business_name and business_owner.

At the top of the author.php template we will add this code. Hint: Each new field you add will need to be declared here.

<?php
/*
Template Name: Author Template
*/
global $wp_query;
$curauth = $wp_query->get_queried_object();
$key="wpum_"."business_name";
$business_name = get_usermeta($curauth->ID, $key);
$key="wpum_"."business_owner";
$business_owner = get_usermeta($curauth->ID, $key);
?>

Now right below that, in the body section of your template, we are going to add this data and markup to display it in a structured way:

<?php get_header(); ?> 
<div id="bodycontent" > 
	<div class="bodytext" > 
		<h2><?php echo $business_name; ?></h2> 
		<p>The owner of this business is <?php echo $business_owner; ?></p> 
	</div> 
</div> 
<?php get_sidebar(); ?> 
<?php get_footer(); ?>

The next step is to also show some of the default fields that the member entered within their profile. I only want to show the member's website address and About the user section, so we modify our template to look like this:

<?php get_header(); ?>
<div id="bodycontent" >
	<div class="bodytext" >
		<h2><?php echo $business_name; ?></h2>
		<p>The owner of this business is <?php echo $business_owner; ?></p>
		<p>Website: <a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url;?></a></p>
		<p>About the Business: <?php echo $curauth->description; ?></p>
	</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Hint: A full list of $curauth-> calls can be viewed in the Wordpress Codex.

Lastly, we want to do some basic error checking.

What would happen if the member didn't put anything in the business_owner field? In this case, we can just wrap that line in an if statement (…or any variable we want to protect against being blank):

<?php if ($business_owner != null) { echo "<p>The owner of this business is ".$business_owner."</p>"; }; ?>

Listing your Members

So how do you list all of your approved members? It is as simple as adding the wp_list_authors to any template file. This is the customized version of that function I use:

<?php
wp_list_authors('hide_empty=1&show_fullname=0&optioncount=0&exclude_admin=0'); 
?>

Tutorial Wrapup

This tutorial was based on my experiences in building the Pittsburgh Designers community into a thriving, local membership directory for creative types. Mosey on over to the site and take a peek for yourself how what a finished project like this can look like.

You can download the complete finished author.php template here.

About the Author

Chris Cagle is a freelance web designer from Pittsburgh, PA, whose projects include Pittsburgh Designers and AdClustr.

WP-SocialCount is a Wordpress plugin that displays the number of adds/saves from within a social network for any particular URL. Since this plugin allows you to specify the URL that you want to pull the data for, it means that you can display any social number for any URL of your choosing. We also attach no style to the data the plugin returns - so you are free to style and use the data in any way you see fit.

Download

Download latest stable version from Wordpress Extend

Installation

1. Upload wpsocialcount.php to your wp-content/plugins/ folder.
2. Backup your Wordpress Installation. I don't forsee any problems, but since this install creates a new db table, it's better to be safe than sorry.
3. Activate the plugin.
4. Go to Options->WP-SocialCount to set some of the variables for the plugin (not required for basic usage).
5. Add the template tag shown below into your theme's template files.

Usage

Template tag syntax:

<?php wpsocialcount('social-network', 'data-format', 'url'); ?>

• social-network: [required] Either 'delicious' or 'digg' for now
• data-format: [required] The type and format of the data you want
  • data-format options for Del.ico.us
    • link - Echos the link to add the URL to Del.ico.us. Also includes the amount of 'saves' if available.
    • empty - Returns the amount of 'saves' of the specified URL.
  • data-format options for Digg
  • link - Echos the link to digg the URL. Also includes the amount of diggs and comments if available.
  • comments - Returns the amount of 'comments' of the specified URL.
  • diggs - Returns the amount of 'diggs' of the specified URL.
• url: [required] Use full URL including 'http://'

Examples

Demo Page. Also, visit adClustr. In the top right it shows a customized version of a Del.icio.us link.

Requirements

• Only tested on Wordpress 2.3.2+, but there is no reason it should not work on any versions of WP 2.0 or above.
• PHP 5.2.0 or greater for need of JSON support.

FAQ

• Can it work with other social networks?
  I am in the process of adding more API support as I find the time and code for it.

• What can I do with this?
  You can create and customize any "Add my post to Del.icio.us", "Stumble This" or "Digg This" badge that your mind can possibly create with CSS. This plugin gives you complete control over the add-to link's appearance.

• Can I add more than one wpsocialcount function to my templates?
  Yes. As far as I can tell, there is no limit on the number of wpsocialcount tags that can be added to any one theme. However, certain sites will throttle your website's usage of it if it believes you are abusing the API with too many queries in too short of a timeframe. This plugin tries to stop this from happening by caching the data it fetches into a database table and only checking for updates at most once an hour.

Version Changelog

• Ver 0.4 - March 12th, 2008 - Added support for StumbleUpon. Added administration panel in Wordpress to collect values needed for StumbleUpon usage and other variables. Update: StumbleUpon must have caught on, and this now does not work.
• Ver 0.3 - Not released to public. Added support for Digg. Also added database caching to try and prevent del.ico.us from throttling users.
• Ver 0.2 - Not released to public. Changed to pull data from Del.icio.us api. Plugin now requires PHP 5.2.0 because of it's support of JSON.
• Ver 0.1 - Not released to public. It was a plugin that hacked the Del.icio.us bookmark count from the tagometer badge that Del.icio.us provides.

Credits

These are some of the places I used for help when creating this plugin. I owe a big 'Thank You' to everyone on this list!

• Joost de Valk - For help with understanding the del.icio.us JSON code
• SplitBrain - For help in getting around the whole no-StumbleUpon api thing
• Digg API - Much better documented than any other api so far