Learn Custom Fields in Wordpress

Wordpress is jam-packed with some great features out of the box, and has been developed to make customization simple. However, Wordpress started out as a blogging CMS, and still has a way to go before some features are one-click or drag-n-drop easy. One such feature, custom fields, are a powerful and great tool to make your WP theme a little more creative. However, to take advantage of custom fields, you’ll need to get dirty with the code.

What are Custom Fields?

Custom fields are a predefined function within the WP system. All you have to do is pass a parameter to the function to receive data back. Though there is great documentation for custom fields in the Wordpress Codex, to a new coder, this documentation can be overwhelming. Instead, let’s breakdown and look at a very specific piece of the function..

So hypothetically, let’s say you want a thumbnail in the beginning each post on your homepage (take a look at my homepage to see the layout I’m referring to). Thumbnails and images are important for blogs to break up the content and add visual appeal. For quite a while I’ve been going into each of my posts, uploading an image and floating it left, and then taking that image and intro text and putting it into the excerpt box. This method, while functional, is a three step process that slows down my blogging time. So to speed up the process I can use custom fields and the RSS limit function to display the same results automatically without having to do it manually each time.

In my blog post, I create a new custom field called “imagethumb”. After defining the imagethumb “key” once, I can then use that custom field on each blog post by selecting it from the dropdown field, and all I have to do is specify a value (location) of the image. So the custom field should display as:

Name: imagethumb
Value: http://yourimage.url

Then I need to edit my index.php file and add the thumbnail to the post loop and set two modes for posts with or without images.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<? 
// Start the post loop
while (have_posts()) : the_post(); 
?>
<div class="date">
  <span class="day"><? the_time('j'); ?></span>
  <span class="month"><? the_time('M'); ?></span>
  <span class="year"><? the_time('Y'); ?></span>
</div>
 
<h1>Title Goes Here</h1>
 
<p class="postmetadata">
  <? the_tags('Tags: ', ', ', '<br />'); ?> 
  Posted in <?php the_category(', ') ?> | 
  <? edit_post_link('Edit', '', ' | '); ?>  
  <? comments_popup_link('No Comments;', '1 Comment', '% Comments'); ?>
</p>
 
<div class="entry">
<?
// Get custom field by passing the parameter to get_post_custom_values() function
$values = get_post_custom_values("image"); 
 
// If custom field is set, format the image with the content
if (isset($values[0])) { 
?>
  <img class="alignleft" src="<? bloginfo('url'); ?>/<?=$values[0];?>" />
  <p class="alignleft"><? the_content_rss('', TRUE, '', 100); ?></p>
<? 
} 
 
// if not set, pull in the excerpt instead
else { 
?>
  <p><? the_excerpt(); ?></p>
<? 
}
 
// end loop
endwhile;
?>

You can go one step further in the automation process and use a cropping script to automatically crop the image to the desired size. All you’ll need is timthumb and to set the parameters you want on the image

Parameters
----------------------
w: width
h: height
zc: zoom crop (0 or 1)
q: quality (default is 75 and max is 100)
 
example:
<img src="<? bloginfo('url'); ?>/timthumb.php?src=<?=$values[0];?>&w=300&h=200&zc=1" />