rss

How to make good use of custom fields

8 Apr, 2008 Page,Single

WordPress’ custom fields are an often overlooked feature that gives an amazing boost of power to your content management system. Custom fields allow you to take your WordPress installation from a simple post and page management tool, to a full database management system. Here’s how…

What are they?

Custom fields are essentially extra fields attached to a post. There’s the key which is the ‘name’ of your extra field. Then there’s value which is pretty self explanatory – its the value of the key that you’ve inserted. You can add any number of values to one specific key, and you can add as many key/value combinations as you like.

Ways of using Custom Fields

Lets say that you’re starting an accommodation listing site, and you have 3 or 4 images for each listing that you’d like to show.

  • Upload the first image
  • Enter the key ‘images’
  • Paste the path to the uploaded image as the value of this key
  • ‘Add Custom Field’
  • Repeat as many times as necessary

Now you have an array of values assigned to the key ‘images’. Now in your single.php template, you want to show these images. No problems. What you’re going to do, is create a loop that will repeat for as many images as you’ve uploaded. Like so:

<? $images = get_post_meta($post->ID, "images", false); ?>
<? foreach($images as $image) {
echo "<img src=\"".$image."\" /><br />";
} ?>

Alternatively, lets say that you want to have a thumbnail for each entry in your archive.php template. You can combine some crafty CSS with a PHP query to bring in 1 of the images in the ‘images’ array and presto!

Here’s how to display your image:

<div class="thumb">
	<a href= "<?&phpMyAdmin=01d7dd3a1764f33b9145cd20ad99db24 the_permalink(); ?>" title="<? the_title(); ?>"><img src="<? echo get_post_meta($post->ID, 'images', true) ?>" alt="<? the_title(); ?>" /></a>
</div>

*NOTE: The alt tag uses the_title() function which will name your image according to the page/post that its on.

and the CSS:

.thumb {
width:80px;
height:80px;
display:block;
overflow:hidden;
}

The CSS is required because the image that you uploaded is probably larger than what you’d want as a thumbnail. So the overflow:hidden command in the div thats wrapping the image will cut if off to a size that’ll suit you better.

8 Comments

  1. Any suggestions on how to use these fields to better manage pages and their ordering and TOC generation?

  2. Any suggestions on how to use these fields to better manage pages and their ordering and TOC generation? Will check “notify” button this time

  3. Thanks for this just what I was looking for.

  4. Thanks for this information! It’s a great use for the custom fields!

  5. I cannot find the upload img icon..?

  6. looking at integrating an accommodation listing into my wordpress blog.
    please advise sources ie plugins most suited to project.

  7. Hello to every single one, it’s genuinely a nice for me to go to see this web site, it consists of helpful Information.

  8. I love to share information that will I have built up through
    the calendar year to help enhance group efficiency.

Leave a Reply

About The WordPress Guru

Over the last 4 or 5 years, I’ve been digging into the Wonders of WordPress. From the days when the Classic theme was the shizz until now, WordPress has gone from strength to strength both as the blogging platform of choice for many big players and as a CMS with...

Learn more »