Every one who uses WordPress for there blog will have no doubt at some point noticed the section labelled ‘Custom Fields’. Now be honest, how many of you use this feature on your Website? or how many of you at least understand what it does? The feature is infact very handy and with a few simple steps, it can really make your WP Theme stand out, but there are many who don’t take advantage of it!
Hopefully if your reading this you have some understanding of how WordPress works, and fingers crossed you are aware of the WP Loop that pulls your posts to display on your site. If you are not familier with the Loop then this page will be very usefull to you in your quest to conquer WordPress (http://codex.wordpress.org/The_LoopClick).
You can define a custom field for each post and set its value to be anything, for example, a URL of an image you want to display, a URL of a site you wish to link to, or just some random text. Okay, this may not make sense yet, but the easiest way to explain, is to show you how I use the Custom Fields on Self Conclusion.
So first things first, where do I use these ‘Custom Fields’ on my site? Well when you visited my blog you will have noticed the featured section of at the top of the page just below the Twitter section. This currently displays three posts, along with an image, and a short excerpt of what it contains. Custom Fields are used here to display the Image for that particular post. You may be wondering why can’t I just call the images I want to display manually and change them as and when I write a new feature post? Well this method isn’t as effecient removes some of the dynamicness (not sure if that is a word by the way) of your site. Lets face it, we use WP to allow us to manage our content better!
How do we do it then Stu? Well it is really easy, first you need to assign a custom field, in my case a link to a thumbnail image that I want to display above the post title and excerpt.
In the Custom Field section you have two options that require your attention, the Key and the Value. The Key can be anything, but its a good idea to keep it fairly simple as you need to call it later on, try call it something relevant. Think of the Key value as a variable name, so for this example I will call it post_image because suprise suprise I am going to be using it to display the post image! (clever I know). In the Value field you need to put whatever it is you want to display, in this example a URL which links to an image. Once you have filled in both parts, click on ‘Add Custom Field’.
Next we need to ammend the WP loop to include this new field on your site. Before I implemented an image to my feature posts, I just had the Loop pulling the Title and the Excerpt, and my code looked like this…
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="feature"> <p class="feature-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></p> <p class="feature-preview"><?php the_excerpt(); ?></p> </div> <?php endwhile; ?>
We need to add a bit of code for the custom field. The key part is the get_post_meta part, because this calls the custom field and outputs what you set in the WP Admin area, in this case it will output http://selfconclusion.co.uk/images/posts/image1.jpg. Notice the post_image, this needs to be set to the name of your custom field which you should have set earlier. Finally, we need to place the code around an image src tag to ensure the image is displayed on the page, see below…
<img src="<?php echo get_post_meta($post->ID, "post_image", true); ?>" alt="Permanent Link to <?php the_title(); ?>" />
Very simple indeed! Now when I add this bit of code into my WP Loop you get the following…
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="feature"> <img src="<?php echo get_post_meta($post->ID, "post_image", true); ?>" alt="Permanent Link to <?php the_title(); ?>" /> <p class="feature-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></p> <p class="feature-preview"><?php the_excerpt(); ?></p> </div> <?php endwhile; ?>
Here is what you see on screen in my case…
Well thats about it for now, but let me know if this has come in handy for anyone. It really is a simple process and so easy to implement on your website. If you have used custom fields on your WordPress site then leave a link in the comments.
Press.jpg "(Nerd)Press - Working Progress")
