Justin Tadlock » Custom Fields

Custom Fields For Feeds: WordPress Plugin

Justin Tadlock — Sun, 27 Jan 2008 20:07:38 +0000

Description: This puts images or videos into your feeds through the use of custom fields. You can alter the custom field Keys and what is displayed.
Version 1.0.1 Beta
License: GPL
Download Plugin (8023)

About this plugin

One of the things I wanted to accomplish in the custom fields tutorial series is adding the custom fields to the feed. So, if you’re reading this post through your feed reader, I hope there’s an image at the top of this post. If not, I suppose something went wrong. If you’re not reading this in a feed reader, then I suggest you subscribe to the feed now.

After completing work on the Structure theme, I decided that I needed to figure this thing out at some point. The theme uses multiple custom fields to display content on the site. In part, this plugin was made for that theme.

I only came up with this idea after I ran across Matt Mullenweg’s plugin, Adsense for Feeds, the other day. Basically, I took that script and made it display custom fields instead of ads.

Right now, it’s still in beta, and I’m sure I’ll work on it more. I just wanted to put this out there for those using the theme. Other than those using my themes, I’m sure this might come in handy if you like tinkering with PHP or use a lot of custom fields on your site.

The plugin was created to be modified. There’s no clear way to make this a “one-size-fits-all” plugin because I have no way of knowing what or how you’d want to display your content in your feed.

Using the plugin

You need to upload the “custom-fields-for-feeds” folder to your WordPress plugins folder. Then activate it from your WordPress administration panel.

To use this plugin out of the box, you must do a few things. First, you must know how to use custom fields. This is imperative.

The plugin will display one of four different items. Each one of these are Keys. Note that custom field Keys are case-sensitive. This is the order of the list the plugin checks for the custom fields. If one is used, then the others aren’t displayed.

Video
Image
Feature Image
Thumbnail

To use the “Video” custom field and if you’re not using one of my themes, you need to look at this tutorial on adding videos. It explains a lot.

If you’re using “Image,” “Feature Image,” or “Thumbnail,” it wouldn’t hurt to follow this tutorial on adding images to posts. I go into detail on how to accomplish this.

I’ll assume from this point that you know how to use WordPress custom fields.

To add a video (YouTube, Google, MetaCafe, etc.) to your feed using custom fields, you need to create a Key named “Video.” Give it a Value of the video’s “embed URL.”

To add an image, give it a Key of “Image,” “Feature Image,” or “Thumbnail.” The Value should be the “URL of the image” you want to use.

There’s also the option of adding alt text to your images. The Keys are:

Image Alt
Feature Image Alt
Thumbnail Alt

Just give them a Value of the alt text you want for the image.

The plugin will display the video or image at the beginning of the post in your feed. There’s also a smaller sample file that you can play around with.

Final thoughts

I’d like to push this plugin a little farther, give users the ability to display custom fields in various different ways. Right now, I want to allow users of my Structure theme to have their custom fields displayed in their feeds.

Please do not ask me questions about how to use custom fields on this post. This plugin is for those that already know how to use custom fields. If you want to learn how to use them, read these articles:

Using custom fields guide from the WordPress Codex.
Tutorial series on using custom fields.

Feel free to push this plugin to its limits. This is really just a starting point. I’d love to hear your ideas on how to develop this plugin into something more powerful.

Once I click the “Publish” button, we’ll see if this thing is working. I hope my image shows up in your feed reader.

Update: The plugin definitely works.

How to add videos to your WordPress sidebar

Justin Tadlock — Fri, 25 Jan 2008 14:50:53 +0000

YouTube has become a bit of a phenomenon on the Internet, and everyone’s rushing to embed videos into their blogs. This is actually a fairly neat thing, especially if you blog a lot about videos or have videos that will emphasize the importance of your posts.

In my last two themes, Structure and Visionary, I created a block that displays the latest video from a category titled “Video” on the front page of the site. Take a look at a live demo that uses the code in this tutorial.

The technique I’ll show you here is completely valid XHTML and works with every browser I could think to test it on. In the example, we’ll use a YouTube video, but there are a number of video sites that you can use this technique on. This tutorial assumes that you are somewhat familiar with XHTML, PHP, CSS, YouTube, and WordPress. You must also be writing a post because we’ll need to use its custom field functionality.

For the sake of this tutorial, we’ll put our video in the sidebar of the theme. You can, of course, put the video wherever you want later.

Find your video

This is obviously the most important step in the process. The example I’ll use is from YouTube. You can check out the Sweatin’ video and use it as an example.

Once you’ve found your video, you need to get the embed URL. On the video’s page, you see a section titled “Embed.” You need to copy that code (see the highlighted portion of this image from our YouTube video):

The embed code that you copied should look like this (yes, it’s a mess):

The only part of that code we need is the URL you see in there (notice the missing “&rel” at the end):

http://www.youtube.com/v/FE_XpRmtcJw

Now, hold on to that for later.

Write your post

The next thing you want to do is write a post about your video. That’s the entire reason you’re doing this, right? When you’ve finished your post, you need to create a custom field. This part is fairly simple.

At the bottom of the “Write Post” screen there is a section labeled “Custom Fields.” There are two things you can input, Key and Value. The drop-down list is for custom fields you’ve already used. In the Key input box, type “Video” (make sure you capitalize “Video” because custom fields are case-sensitive).

In the Value input box, type “http://www.youtube.com/v/FE_XpRmtcJw.” Yes, that’s the URL of the video you want to use.

Click the button “Add Custom Field” and you’re done, at least with the posting part. Of course, we still have to code this thing.

The code

As I said earlier, we will put our code in the sidebar, but you can place it in many different places. First, open “sidebar.php” in your favorite text editor. The code we’ll input will probably have to be integrated into whatever type of menu system you have in your sidebar.

Now, you’ll lay down the framework.

Next, we need to query the posts and begin the loop. In our query, we call for the latest video in the “video” category. You could easily change this to query videos by tag by changing “category_name=video” to “tag=video.”

have_posts()) : $my_query->the_post();

We will grab the custom field information and display the post title after that.

// Get the "Video" custom field Key as an array (displays single Value in the video block)
	$video = get_post_custom_values($key = 'Video');
?>

Now, for the bread and butter of this application — a valid XHTML video embed. We check to see if there’s a custom field Key named “Video” with a Value. If there is, the video is displayed. You can also change the width and height of the video player in this part.




" style="width: 290px; height: 242px; border: none; padding: 0; margin: 0;" id="video-block-">


All that’s left to do now is to add a little error checking code and close off the loop.  This will make sure you’ve added some type of  Value to the custom field  Key of “Video.”
// If there is no Value for the custom field Key "Video"
else {

// echo error checking to check custom field errors
	echo 'Did not add a video URL to the custom field  Key of "Video"';
	echo '';

	} // endelse
?>
 

Save “sidebar.php.”  That’s it for the most part.  You might want to consider a few style rules to make it look a little prettier.
Stylesheet
Open “style.css” to add some CSS rules for your extra video feature.  Here’s a starting point, but you’ll have to edit it to fit your needs.  This code is meant to work with the code above.  So, if you’ve changed the width and height of your player, you might have to accomodate.
.video {
	display: block;
	float: left;
	overflow: hidden;
	width: 288px;
	margin: 0 0 10px 0;
	padding: 2px 5px 10px 5px;
	text-align: center;
	}
.video div {
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	display: block;
	}
object { padding: 0; margin: 0; }
The finished product
I hope by now that you haven’t had too many headaches getting this to work.  Here’s an example of how this should look in a completed sidebar.

We’re completely finished now.  I hope you’ve enjoyed this tutorial and add a video section to your site today.  Be sure to  subscribe to the feed to get more WordPress tutorials.



WordPress Custom Fields: Book Reviews Pt. 2
Justin Tadlock — Tue, 20 Nov 2007 21:59:36 +0000
This part of the  tutorial will cover making things look a little prettier.  It is a more advanced PHP tutorial than any of the previous tutorials in the overall custom fields series.  Basically, we will do a lot of work, but it won’t look like we’ve accomplished much.  We still have to get much of the basic code out of the way first.
By the end of this part of the tutorial, you may be wondering why in the hell you would go through all this trouble to display a linked image correctly and a few other things when you could’ve just as quickly typed all this in the post box.  And, you are right to think this.  Here are some reasons why this way can be useful:

You can change the look of all your reviews and their custom fields without having to edit each post.
You can pull these custom fields out to use them in other areas of the site, like a reviews page.
You can display these things with your excerpts in your archives, categories, and search results.
There really is no limit to what you can do with WordPress custom fields.

Although some of the “cooler” things are yet to come, we have to get the basics out of the way first.
Adding a rating system:
Now, that you’ve played around with the first part of the tutorial and you’re ready to move on, there is one thing I would like you to add to the original part of the code.   Donalyza asked how she could add a rating system to her music reviews.
To add a rating system, the first thing you should do is create a  Key named  Rating.  Then, give it a  Value of  your rating.  For this tutorial, I’ll use a 1 – 5 rating system, but you can easily change this to 1 – 10, ABC, etc.
Open your file from the previous tutorial (home.php or single.php) and find the first code we entered:
ID, 'Image', $single = true);

// The image alt text
$image_alt = get_post_meta($post->ID, 'Image Alt', $single = true);

// Image class (used for alignment, sizing, or styling using CSS)
$image_class = get_post_meta($post->ID, 'Image Class', $single = true);

// Book Author
$author = get_post_meta($post->ID, 'Author', $single = true);

// Outside link for book
$book_link = get_post_meta($post->ID, 'Book Link', $single = true);

// Title of the book
$book_title = get_post_meta($post->ID, 'Book Title', $single = true);

// Recommend? Yes or No
$recommend = get_post_meta($post->ID, 'Recommend', $single = true);

// Published date of book
$published_date = get_post_meta($post->ID, 'Published Date', $single = true);
?>
Add this after the “published” part, but before the  ?>:
// Book Rating
$rating = get_post_meta($post->ID, 'Rating', $single = true);
At the end of this post, I’ll show you how to display your ratings.
The more complicated stuff:
I’ll walk you through displaying your image, creating a link around that image, and a few other things in this part of the tutorial.  These are techniques that we’ll use later on.  So, it’s best to learn them now.
Find these lines from the previous part of the tutorial and delete them.  We’ll use these things, but in a more creative way.
// If there's an image
if($image !== '') {
	echo 'Image URL: ' . $image . '';
	}

// If there's image alt text
if($image_alt !== '') {
	echo 'Image Alt: ' . $image_alt . '';
	}

// If there's an image CSS class
if($image_class !== '') {
	echo 'Image Class: ' . $image_class . '';
	}

// If there's a book link
if($book_link !== '') {
	echo 'Book Link: ' . $book_link . '';
	}
Everything from this point forward relies heavily on you having an image to display with your review.  This is vital to this tutorial and the code you are about to see.  What we’re doing is checking to see if there’s an image and displaying it.  We will add alt text, a link, link title text, and an image class.  We’re interweaving all these elements together.  I ran through displaying the text on screen in the previous tutorial, so you could get a feel for how things work.
Replace the code you deleted with this (this should be above the line that reads  // If there’s a book title):
// If there's an image
if($image !== '') {
	echo '';
	// If there's a book link
	if($book_link !== '') {
		echo '';
		} // end if

	// Show the image
	echo '';

	// If there's a book link, close it off
	if($book_link !== '') {
		echo '';
		} //end if
	echo '';
	}
Yes, the code just got crazy all of a sudden.  I urge you to take the time to read through this thoroughly to understand how the PHP works.  It’s not really complicated, but it can be overwhelming for newcomers to look at.  Feel free to ask questions on anything that’s going on in that part of the code.  I tried to leave plenty of comments to help you along.
Customizing the recommendation area:
In this part of the custom fields tutorial, we’ll add an image to the “Recommend” section.  You might also notice that the code is a little different from the previous tutorial, but it has now been updated.  This was a slight mistake I made, and you should make sure you update it.
Scroll down to the recommendation part of your code, which looks like this:
// If there's a recommendation
if($recommend == 'yes' || $recommend == 'Yes') {
	echo 'Recommend? ' . $recommend . '';
	}
elseif($recommend == 'no' || $recommend == 'No') {
	echo 'Recommend? ' . $recommend . '';
	}
else { echo ''; }
?>
Replace it with this code:
// If there's a recommendation
if($recommend == 'yes' || $recommend == 'Yes') {
	echo 'Recommend? ';
	}
elseif($recommend == 'no' || $recommend == 'No') {
	echo 'Recommend? ';
	}
else { echo ''; }
You’ll need to upload an image for your “Yes” and “No” recommendations.  You’ll also need to change the path to the image in the above code.
Displaying your ratings:
Now that you’ve given your book, album, movie, game, or whatever a rating, you’ll want to display it.  Instead of the common if/else statement, we’ll use a PHP switch statement to execute this (this works even better if you have a 1 – 10 rating system.
Below the last code we added for the recommendations, add this code:
// If there's a rating
if($rating !== '') {
	echo 'Rating: ';
	switch ($rating) {
	// If the rating is 0
	case 0:
		echo $rating;
		break;
	// If the rating is 1
	case 1:
		echo $rating;
		break;
	// If the rating is 2
	case 2:
		echo $rating;
		break;
	// If the rating is 3
	case 3:
		echo $rating;
		break;
	// If the rating is 4
	case 4:
		echo $rating;
		break;
	// If the rating is 5
	case 5:
		echo $rating;
		break;
	// Else
	default:
		echo 'No rating.';
		break;
		}
	echo '';
	}
Looks pretty generic huh?  Not a lot of pizazz?  That’s OK.  You can use the same image technique we used above for book recommendations.  Instead of  echo $rating;, you can echo an image.  You’ll need to create different images for each rating.
The CSS:
I won’t bother with a lot of CSS in this tutorial, but I do want to share one thing.  For the custom field  Key that’s named  Image Class, I’ve given it a value of  left.  In my “style.css” file, I float this image to the left so that the following text will wrap around it.  Here’s the code I use:
.left {
	float: left;
	margin: 0 10px 5px 0;
	}
What does it look like?
Here’s an image of what my review looks like:

The end of part 2 of the tutorial:
You can arrange each element how you like.  You can put all the review information after the post content, before the post content, before the image, or wherever.  Do what you like.  This is the time when you should tinker with how you want your reviews to look on the screen.  Add CSS classes to things to style them how you want.  Add extra custom fields for other useful bits of information that you’d like to add.
In the next part of the tutorial, I’ll cover what I call the “cool” stuff.  I’ll show you how you can use these custom fields outside of home.php and single.php to create a more unique blog.
If you’ve noticed any errors in the code, please be sure to let me know.   Subscribe to the feed to know when the next part of the tutorial rolls around.  Feel free to ask any questions and/or suggest anything you’d like to see added to the tutorial.



WordPress Custom Fields: Book Reviews Pt. 1
Justin Tadlock — Thu, 15 Nov 2007 22:51:06 +0000
Finally, another part in the  WordPress custom fields tutorial series. This time, weâ€™re stepping it up a notch though. Weâ€™re going to take custom fields to another level. I hope youâ€™re prepared. Weâ€™ve covered some basic things thus far, and thatâ€™s all you need to know to be prepared.
Have you ever wanted to write book, movie, music, or other type of review and archive them effectively, add extra information, and make reviewing them a little cooler? In this part of the series, Iâ€™ll cover many ways to accomplish this, while leaving you with many options to add your own twist to it. Iâ€™m using book reviews as an example, but you can easily change this to any type of review.
This is actually a series within a series. There will be several parts to the using custom fields to create book reviews entry into the overall series.
Now, thatâ€™s enough of an introduction. Letâ€™s get on with putting this thing together.
Today, weâ€™ll set up the code that weâ€™ll be using later. This is a little bit of a refresher course on the basics of custom fields.
The setup:
The first thing you need to do is create a new post. Iâ€™m going to review the book  I, Robot by Isaac Asimov. You can find the particular version Iâ€™m using at its  Amazon page. Choose anything youâ€™d like. Now, add a new category to this post named â€œBook Reviews.â€
Write your review, add your tags, and whatever else you might normally do for your posts. Now, weâ€™ll create our custom fields.
The custom fields:
Weâ€™ll use several different custom fields for this tutorial, but you can add as many as youâ€™d like to customize your reviews. The custom field  Keys that weâ€™ll create are these: Author, Book Title, Image, Image Alt, Image Class, Book Link, Published Date, and Recommend. (Remember that custom field  Keys are case-sensitive.)
This is what your setup should look like:

 Key: Value
Author: Author of the book
Book Title: Title of the book
Image: URL of an image of the book
Image Alt: Alt text for the image
Image Class: Use a class for personal styling of image
Book Link: Link to an outside source for the book (maybe an Amazon page)
Published Date: Date the book was published
Recommend: Write Yes or No on whether you recommend this book

Hereâ€™s an image of what my custom field setup looks like:

So, you should upload an image of your book to follow this tutorial. Now, our review is written and our custom fields are ready.
The code:
Today, weâ€™re only going to pull the custom fields from the database and make sure everything is working correctly. Thereâ€™ll be no styling or anything super-cool, but weâ€™ll get the basics out of the way. Open index.php (you should also use this code in single.php).
Under this code:

Add this:
ID, 'Image', $single = true);

// The image alt text
$image_alt = get_post_meta($post->ID, 'Image Alt', $single = true);

// Image class (used for alignment, sizing, or styling using CSS)
$image_class = get_post_meta($post->ID, 'Image Class', $single = true);

// Book Author
$author = get_post_meta($post->ID, 'Author', $single = true);

// Outside link for book
$book_link = get_post_meta($post->ID, 'Book Link', $single = true);

// Title of the book
$book_title = get_post_meta($post->ID, 'Book Title', $single = true);

// Recommend? Yes or No
$recommend = get_post_meta($post->ID, 'Recommend', $single = true);

// Published date of book
$published_date = get_post_meta($post->ID, 'Published Date', $single = true);
?>
Basically, what this does is pull each custom field from the database and set it to a PHP variable. This is important because weâ€™ll use the variable a lot in the future, and we want to keep the code as easy to manage as possible. The shorter variable names makes this possible.
Now, above this code:

Add this:
Image URL: ' . $image . '';
	}

// If there's image alt text
if($image_alt !== '') {
	echo 'Image Alt: ' . $image_alt . '';
	}

// If there's an image CSS class
if($image_class !== '') {
	echo 'Image Class: ' . $image_class . '';
	}

// If there's a book title
if($book_title !== '') {
	echo 'Title: ' . $book_title . '';
	}

// If there's a book link
if($book_link !== '') {
	echo 'Book Link: ' . $book_link . '';
	}

// If there's a published date
if($published_date !== '') {
	echo 'Published: ' . $published_date . '';
	}

// If there's an author
if($author !== '') {
	echo 'Author: ' . $author . '';
	}

// If there's a recommendation
if($recommend == 'yes' || $recommend == 'Yes') {
	echo 'Recommend? ' . $recommend . '';
	}
elseif($recommend == 'no' || $recommend == 'No') {
	echo 'Recommend? ' . $recommend . '';
	}
else { echo ''; }
?>
This will give you a list of the various custom fields that youâ€™ve created. I hope you can understand a little bit about whatâ€™s happening behind the scenes here by looking at the a text display of your custom fields.
Hereâ€™s what the output on my page looks like:

Thatâ€™s the end of this part of the tutorial. I want you to start thinking about what other  Keys you might want to add. Do you want to add a rating system? Hardback and/or paperback release dates? Links to other outside sources? There are limitless options here.
Some other things Iâ€™ll cover are putting this all together, creating pretty archives, a page for all your book reviews, and other various uses.
Please share your thoughts and  subscribe to the feed to know when the next part of the tutorial comes out.



WordPress Custom Fields: Listing A Series Of Posts
Justin Tadlock — Thu, 01 Nov 2007 20:55:42 +0000
This is an updated version of this article.  If you’re looking for the older version, see page 2.
Do you write long series of posts?  Do you have a bunch of articles that definitely need to be linked together?  This WordPress custom fields technique will allow you to do that without a lot of hassle.  Basically, this is a simple, customized related posts script.  It checks to see whether a post is in a series, then lists all the posts in the series.
The WordPress custom fields tutorial series uses this code for listing posts.  You can scroll to the bottom of this entry to see what the outcome looks like.
The reason I’m writing this tutorial is precisely because of the WordPress custom fields series.  After three posts, and going back to each previous post to add a link to the new post, I realized that this was only going to get more tedious and time-consuming each time I wrote another article in the series.  So, this idea was born from that.
How to set up your posts
You’ll probably want more than one post.  This is a series after all.
Create a custom field key called Series first.  Give it a unique custom field value.  You should give every article in the series this exact same key and value.
This is all you have to do on the Write Post screen.
Adding the series function
Open your theme’s functions.php file and paste this code into it.
ID, 'Series', true);
	if($series) :
		$args = array(
			'numberposts' => -1,
			'meta_key' => 'Series',
			'meta_value' => $series,
		);
		$series_posts = get_posts($args);
		if($series_posts) :
			$class = preg_replace("/[^a-z0-9\\040\\.\\-\\_\\\\]/i", "", $series);
			$class = strtolower(str_replace(array(' ', ' '), '-', $class));
			echo '' . __('Articles in this series') . '
';
			foreach($series_posts as $serial) :
				if($serial->ID == $post->ID)
					echo '' . $serial->post_title . '';
				else
					echo 'post_title) . '">' . str_replace('"', '"', $serial->post_title) . '';
			endforeach;
			echo '';
		endif;
	endif;
}
?>
Add your function to your single post template
You can add this to single.php and/or page.php.  If your theme has a hook after posts/pages, you can even hook it to that with without touching a template file (ask your theme author about this).
So, open your file and add this somewhere in it before the call for comments_template(), preferrably somewhere within the Loop.

That’s it, and you’re done.  Just save everything and check out your series list at the end of posts within that series.  You can create as many of these as you like.
Final thoughts
Now, that should do it.  You can always tweak this script to better apply to your needs.  There are also some other uses you can extract from this article.
I’m already loving this because I won’t have to go back to the previous three posts in this series just to link back to this article.  Life is much simpler now.
As always, remember to  subscribe to the feed to stay updated on the WordPress custom fields tutorial series.  I have a few more ideas up my sleeve and am ready to post them as soon as I finish testing.
Let me know if you liked this tutorial.  I’m always open to feedback and looking for new ideas to implement.



WordPress Custom Fields: Adding Images To Posts
Justin Tadlock — Sat, 27 Oct 2007 07:37:07 +0000

This tutorial will explain how to add images to your posts using WordPress custom fields.  It is the third part of the  Using WordPress Custom Fields Series.  This tutorial assumes you at least know what XHTML, PHP, CSS, and WordPress are.  Plus, you should know how to input a custom field “Key” and “Value” and  upload images.
The example I’m basing this tutorial off of is  Dosh Dosh.  If you notice, he adds an avatar-sized image to each post.  I don’t know whether he uses a technique like I’m about to explain or adds each image to the “Post” box.
Why use custom fields to add images to posts?
There are two main reasons for this.  Typically, when a blogger adds an image to a post, he or she will simply upload the photo and add the picture in the posting textarea.

You can display images when using excerpts.
You can pull the image out from just about anywhere and use it how you like.

Most WordPress theme archive, category, and search templates display post excerpts, and even some home pages.  Why not display a custom image for each post?  This technique will allow you to do that.
If you take a look at my WordPress Themes page, you can see how I pull an image out of a custom field.  Of course, I created a plugin with some added features for that particular page.  But, it shows you how information can be pulled out of custom fields to be used elsewhere on the blog.
Upload images and create Keys and Values:
The first thing you need to do is upload an image.  For the sake of this tutorial, I will assume these images are thumbnailed-sized, such as ones that you might see on a message board or at Dosh Dosh.  You can, of course, do as you like when it comes to sizing your images.
Now, create a Key named “Thumbnail.”  Give it a Value of the URL of the image you uploaded (ex: /wp-content/uploads/image.gif).
Create a key named “Thumbnail Class.”  Give it a Value of “thumbnail-class” or anything that you can use to style in your stylesheet (style.css).
You can also create alt text for your image.  This is optional.  Create a Key named “Thumbnail Alt” with a Value of “Describe your image.”  If you don’t do this, the alt text will default to the post title.
Now, for the code:
You can use this code in any of your templates (index.php, single.php, category.php, archive.php, etc.).  Open one of those files in your text editor of choice (I’m editing index.php in Notepad).
After:
if(have_posts()) : while(have_posts()) : the_post();
Add this:
// check for thumbnail
$thumb = get_post_meta($post->ID, 'Thumbnail', $single = true);
// check for thumbnail class
$thumb_class = get_post_meta($post->ID, 'Thumbnail Class', $single = true);
// check for thumbnail alt text
$thumb_alt = get_post_meta($post->ID, 'Thumbnail Alt', $single = true);
Basically, this just retrieves your custom field information for each post that will be displayed by the loop.  When it retrieves the custom field Key and Value, it assigns it to a PHP variable.  This is important because it’ll make the coding later cleaner and we only have to retrieve the information once for each post.  (Also note that this is the technique I’ll use on later tutorials, unless I come up with an even better way to accomplish this.)
Before (in the same file):

or

Add this code:

	
	"
	class=""
	alt=""
	/>
	

This code outputs the image right before your content is displayed.  Pretty simple, huh?  You can obviously add other things like width and height using custom fields or set a width and height for all images.  What I will show you next is how to do this with your “thumbnail-class” instead.
Open style.css file from your theme folder and add this code:
.thumbnail-class {
	float: left;
	width: 100px;
	height: 100px;
	margin: 0 15px 0 0;
	}
.left {
	float: left;
	margin: 0 15px 0 0;
	}
The class “left” is the default in case you forget to input a “Thumbnail Class” custom field Key.  Obviously, how to style your image is up to you.  Play around with it, have some fun, and see what you can come up with.  You can also do away with the entire “Thumbnail Class” custom field and just input the class in the XHTML.  I prefer to leave “Thumbnail Class” open, in case I want to style or align individual thumbnails differently.
That’s pretty much it.  You can do a lot with this.  For example:

Add a link around the displayed thumbnail to a larger image, another page, or the single.php page.
List posts by just their image.
Creat kick-ass archive and search pages.

As I’ve said before regarding custom fields, their only limit is your imagination.  Follow this tutorial series by  subscribing to the feed.  If you have anything you would like to see done and think it might be possible with custom fields, let me know because I’m always looking for more things to play around with.



Using WordPress Custom Fields: Introduction
Justin Tadlock — Wed, 24 Oct 2007 21:03:08 +0000
I decided a couple of weeks ago that I wanted to do an ongoing tutorial series with WordPress custom fields.  At first, I thought I’d simply write a complete guide, but that idea seemed daunting.  It seems far easier to break down the guide into individual posts in a series.  Instead of writing a general guide, I will write detailed tutorials on specific and practical uses for custom fields.
I’ve been using custom fields for various tasks on this site for a while.  A few places you can see some custom field uses on this site are:

On the  Reading page, you can see all of my book reviews pulled into a nice organized list.  Under each book’s title is the author’s name.
My  Projects page, there is a list of several subpages.  For each subpage, there is an image, title, and description.  This list of subpages is made possible by custom fields.

These are fairly simple examples, and this tutorial series will cover more advanced uses later in the series.  Mostly, I will cover what I think are practical uses of custom fields.  Of course, suggestions are always welcome.  So, if you want something specific, but can’t figure out how to do it, don’t hesitate to ask.  This is a learning experience just as much for me as it is for you.
What are custom fields?
Custom fields are additional information that you can add to your posts and pages.
The good starting point is checking out WordPress’  Using Custom Fields.  It’s a very basic tutorial, but will give you some idea of what custom fields are.  The Undersigned has a  good tutorial also.  Neither of these tutorials cover a lot of uses, and I think that’s why many people don’t know what to do with custom fields — there are not enough detailed tutorials.
The truth is that  you can do pretty much anything you want with custom fields.  Your imagination is your limit.
Basic Usage:
The first thing you need to know is where to input custom fields.  On “Write Page” or “Write Post” in the WordPress Dashboard, there is section at the bottom of the page that lets you input as many custom fields as you want.  Here is a screenshot:

There are two different things you can input into a custom field — “Key” and “Value.”  It doesn’t get much simpler than that.
What it is a Key and Value?  The Key is the name of the custom field and the Value is simply the value you want to give to that name.  For example, you might write book reviews and want to add some additional information like the book’s author or  publisher, give it a link through your Amazon Affiliate membership, create a star rating system with images, or a multitude of other bits and pieces.
What do I do with this information?  You can pull this information out in posts, on other pages, into sidebars, or wherever.
To give a list of your book reviews in alphabetical order with the author’s name, you could create a custom field with a Key named “author” and a Value of “The Author’s Name” for several posts, or reviews.  After writing these reviews and putting them into your “Book Reviews” category, you would put together a page called “Book Reviews” or create a category-specific template for your “Book Reviews” category.
Here’s how you would list each book review (category=27 would need to be changed to your “Book Reviews” category ID):




ID, "author", $single = true);
	if($author !== '') {
	echo 'by ' . $author;
	} ?>



This is pretty basic, but I hope you’re getting some kind of an idea what custom fields are and what you might can do with them.  I don’t want to give too much away on the Book Review use yet because I will definitely write a full-blown tutorial on how to add cool information to reviews.
Now, that you’re warmed up a bit, stay tuned by  subscribing to the feed or bookmarking this page for future reference.  I will link all the articles in the custom field tutorial series for WordPress here.



Using WordPress Custom Fields: Subtitles
Justin Tadlock — Tue, 16 Oct 2007 18:55:33 +0000
This article, or series of articles, is long overdue.  I’ve been using custom fields to make “little” fixes around this site for a while now.  They are probably the most powerful feature of WordPress, yet the least used.  Maybe that’s because they’re hidden away at the bottom of the “Write” page.  I want to share some of the things I’ve learned with you.  Maybe I’ll even learn a thing or two while doing it.
This is the first post in what I hope to be an ongoing series of how to use  WordPress’ custom fields.  The inspiration for finally getting my butt in gear and writing the first post was Nick La’s post,  WordPress Theme Hacks.
This post will serve as a quick tutorial on a simple use of custom fields.  I will later get more in depth with the “why” and “how” of using these things.  So, to get your feet a little wet…
Today, I will show a simple solution to fixing your title tags (those words at the top of your Web browser when you visit a site).  This will also help a little in optimizing your site for SEO.  Basically, we’re going to create a subtitle to each post or page we create.  This subtitle will be displayed with the title at the top of the browser.
The first thing you need to do is open “header.php.”  Simple enough, right?  Find:


We will only be working between the title tags today.
Nick gives us a nice starting point in fixing your title tags.  Here is the code:

Obviously, you can play around with this a little and do what you like with it.  Now, we will figure out how to optimize for SEO by inputting extra information with custom fields.
Save your copy of “header.php.”  Open your WordPress dashboard and go to “Write Post” or “Write Page.”  After writing your post, scroll down to the box labeled “Custom Fields.”  Add a new “Key” named “subtitle.”  Write your subtitle in the “Value” box.

Now, you are almost ready to see your efforts in all their beauty.  Open “header.php” again (it should still be open).  Below the last  echo wp_title(''); add the following code on the next line.
$subtitle = get_post_meta
($post->ID, 'subtitle', $single = true);
if($subtitle !== '') echo ': ' . $subtitle;
This code pulls your custom field key of “subtitle” out and displays it on whatever pages have a subtitle.  Your final code should look like this:
ID, 'subtitle', $single = true);
	if($subtitle !== '') echo ': ' . $subtitle;
}
?>
Yes, simple, yet useful.  You don’t need a plugin for this task.  You can see how I’m putting it to use on this page.  The title is “Using WordPress Custom Fields,” and the subtitle is “A series of tutorials on WordPress’ most powerful feature.”
I hope you continue to follow this series, as I hope to continue to learn and develop.   Subscribe to my feed to keep updated or bookmark this page because I’ll provide a link here to the next tutorial.  In the next article, I will talk more about what custom fields are and why we need to use them.
Do you have any ideas on what would make a useful function using custom fields, but you’re just not sure how to implement it?



Cleaning Up Your WordPress Blog & Other Extreme Sports
Justin Tadlock — Sun, 30 Sep 2007 13:33:27 +0000
With the summer ending and the autumn chill in the air, which is actually quite nice, I felt that it was time to do some major housecleaning.  No, not by breaking out the mop and broom—but my brain, fingers, keyboard, and sheer force of will (I should probably break out the mop and broom too, but I’ll save that for another day).
So, you wanna clean up your WordPress blog?  Here are six tips that I think might help.  These are recent updates to my blog that have motivated me to get back to blogging on a regular schedule.


A New WordPress Theme
If you haven’t updated your theme in a while, say for at least the last six months or year, maybe your look’s getting a little stale.  Since I haven’t updated my theme since  March, I felt it was time for something fresh.  My regular readers will automatically notice the new look.  Do you like it?  I call it Harmony because I was trying to balance dark and light.
Maybe you don’t want to scare off anyone with a completely new theme.  You could possibly tweak some of the files, add something extra, to your blog.  It’s always best to freshen things up a little every now and then.  Change the colors, font size, or header image.


Unclutter Your Blogroll/Links
This section can easily get unruly if you don’t pay careful attention to it.  Before I dared touch my  links page, I cleaned my favorites/bookmarks folder on my computer.
Get rid of those sites that you never visit anymore.  Remove sites that no longer exist.  I finally just started erasing everything.  It felt liberating.  Your site have music in the background?  Delete.  8,000 icons in your sidebar?  Delete.  Haven’t updated in the last few months?  Layout looks like something from a six-year-old’s geocities page?  Delete.  Delete.  (I must point out that after a while, I almost went insane.  Several times, my browser crashed because of the blogs I was going through.  Yes, those sites were deleted.)
After organizing my favorites, I easily updated my  links.  I added all the links from my favorites and deleted those that were no longer of use to me.  I made two categories:  Blogroll and Dailies.  You might want to organize these in another manner, but some kind of organization is key.


Clean Out Your Plugins Folder
I probably had 50 plugins in my plugins folder while using less than 10 (I do a lot of testing).  With the release of  WordPress 2.3, this shot to the top of my to-do list.
The new tags feature allowed me to get rid of Bunny’s Technorati Tags.  Canonical URLs and Pretty URLs let me delete the No WWW and Permalink Redirect plugins.  So, you should definitely clean out those unused plugins.  Make room for the next plugins you might want to use.


Add Fresh Features
It’s important to keep adding new features to your blog as time passes on.  Give your readers a little something extra.
With the advent of the tags feature, I needed to update my theme a little.  Now on each page’s single post, I have added a tags section near the bottom of the post.  I also have a nifty little  Tags page, which is basically just a tag cloud.  I also have a new  Topics page.
Maybe you’ve been waiting for a moment to implement that cool, new plugin you’ve found, but haven’t gotten around to it.  That was the case when I added  Flickr RSS,  Paged Navigation, and  Related Posts.  The latter two gives users easier access to older content on my site, and I think that’s ultimately what I wanted to do when looking for new plugins.


Learn To Use Custom Fields
Custom fields are a powerful feature of WordPress, but I rarely hear of anyone using them.  You can automate so many things that you usually input every time you write a post.  Plus, there are many other cool things you can do with them.
I’ve always used custom fields on my  reading page to return a book author’s name.  However, I wanted to do a little something more.  Look at any post in my  Book Reviews and you will notice a few things immediately.
Take, for example, my  Review of Thomas L. Friedman’s  The World is Flat.  At the top left of the post, there is an image.  It doesn’t look like much, but there’s a lot of information along with that image.  I used custom fields to display the image, alt text, link to Amazon’s page, and size and alignment of the image.  Now, each time I write a new book review, I don’t have to write all that code.  It’s automatically generated for me.  I just input information into the custom field boxes.  If you want a detailed “how-to” article on this, I plan on writing one in the next few days.


Update Your Pages
We’re constantly updating our blog by writing new posts, putting fresh content out there.  But, sometimes we forget about our pages.  By definition they are “static,” and many times, users don’t return to them after the first view.  Some people never write anything more than an About and Archives page, which is all right if that’s your cup of tea.
I, however, have a lot of content that doesn’t belong in blogs posts.  I recently revamped the  Projects section of this blog.  I used custom fields to display an image and description of each subpage.  Sure, it’s only a new look, but it adds a little bit to the blog.
Whatever you decide to do, keeping new content in your pages is also important.  If users see that you rarely update pages, then they probably won’t return to them when you do actually update them.


Keeping your WordPress blog updated, not just in blog posts, but in other areas as well, can sometimes be a daunting task.  However, it is something that needs to be done every now and again.  Readers like the blogger who “goes the extra mile” or “gives “110%” to their blog.
Updating your blog can also motivate you.  I feel like a new blogger now.  Like that first day I started my  Expage almost five years ago, which was lost because their servers crashed.  I just want to write and write and write and…
So, give your WordPress blog the cleaning that it deserves.  Your readers will like it better.  You will feel better.  Do you have any useful tips to add?  I’d love to hear your ideas.