Wordpress has evolved quickly over the years to be very "click and activate" ready for advanced customization and features. One function that still requires a bit of coding, however, is using a custom field. In this post we will identify what the custom field is, and how to use it to take your blog to the next level of customization.

What are Custom Fields?

Custom fields are a predefined function within the Wordpress system. They allow you to insert data into every post, and on the development side, pull that data and use it in whatever way you see fit. This allows a user to "program" their blog, without being a programmer. All you have to know is how to pass a parameter to the function and how 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..

In this example, we're going to create a thumbnail image to append to the beginning each post on the homepage. We are going to do so by creating the custom field in the admin, and then editing the loop on the index page, having to our code pull in post data (with a limit on how many words) and our defined custom field.

Custom Fields in the Admin

Custom fields are located under the "Edit Post" mode on each blog post, towards the bottom of the page. To create a new custom field, simply click "Add Custom Field" and define the key and value. I this example, let's 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 of the key, which in this case will be the imagethumb url. So the custom field should display as:

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

Then we will need to edit the index.php file and add the thumbnail variable to the post loop and set two modes for posts with or without images:

  
  
  

Title Goes Here

  
  Posted in  |
  
  



  

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:

I hope this helps you learn a new trick. For comments and questions, feel free to ask any of our wordpress bloggers, and we'll be glad to help!

Code has been updated.