Two Quick Wordpress Custom Fields Hits design

Wordpress custom fields have been talked about many times on many different sites, but for some odd reason people to continue to ignore the abilities custom fields can provide to a blog. Using custom fields you can truly do some advanced customization of your site, and it is not as difficult as you may think. This is a very straightforward guide which demonstrates two different ways you can use custom fields and how you can integrate them into your site. This series will hopefully grow and expand into multiple “quick hits” demonstrating time-saving tactics to use with your Wordpress theme developing.

Post Images

As seen here on DUI and on many other blogs, it is always nice to be able to provide a post image along with the content and title of your post. This is a super simple process, and there are a few possible ways of going at it.

Let’s say you just want to have an image with your post on the homepage for example (index.php in your active theme folder). To accomplish this, we’ll use a custom field named “thumb” (also known as the key). Find your and add the following:

ID, 'thumb', $single = true); ?>

Now anywhere in the loop of your post drop in an image code. In this case, the alt is going to be dynamically populated as well with the title of the post.

When writing a post, you would now utilize the “Custom Fields” section at the bottom of the write screen. If you’ve never used custom fields before, you probably always overlooked this section, and you may even need to expand it if it has been collapsed. You’ll see two text fields; one for the key and the other for the value. Remember how are key for the image was thumb? Enter that into the key field. Now, use the Wordpress uploader to upload an image to use alongside the post on the homepage. Don’t insert the image into the post itself, unless you really want to. Instead, after uploading the image notice the “Link Url” in the Wordpress uploader (in 2.5+). Copy the url and paste it into the text field for “value“. Click add custom field, publish the post, and your image will now appear alongside your post.

Category Images

Sometimes you would rather have general category based images inserted next to a post instead. While this doesn’t actually use custom fields, the category image can be dynamically called for you without needing a plugin or any special coding - just one line of code.

Drop in an image code anywhere in your loop. In a setup like DUI, this would make the most sense to put on the homepage (index.php).

In the above scenario, the only thing you might need to change is the …/images/… reference. Most themes are going to hold their images in an image folder, but if you theme is different, you’ll want to replace the word images with the name of your image folder. Now all there is for you to do is create the category images and place them in that image folder inside your active themes directory. Name them appropriately, for example a category name of general would have a category image named general.gif. Note that capitalization does matter! A category named General and general may not always work if the image name is not format to be exactly the same as the category name.