27
WordPress is much more than a publishing platform. It powers movie trailer websites, online magazines, health websites, CSS Galeries, and yours truly, doDesign. I use a plugin called Get Custom Field Values for the images by the side of posts, the download and preview links at the bottom of each free design, and even the thumbnails on the side of this page (unless you’re reading through an RSS reader. As you can see, the plugin is very useful.
How it Works
When writing a post, WordPress lets you enter a custom field. Even a fresh installation of WordPress supports custom fields, but its features are limited. That’s why I installed the Get Custom Field Values plugin. Without it, this site would probably not be powered by WordPress.
Here’s how it works (I’ll explain in more detail later):
- Download, install, and activate the plugin.
- When writing a post, scroll to the bottom of the page, find the custom fields section, and click on enter new. Type the custom field name on the left, and the value on the right.
- Place where you want the custom field value to appear.
Image Beside a Post
See the image beside this post? I use four custom fields for it. One custom field is for the image url, another for the image height, another for the width, and one more for the alt tag. The HTML looks like this:
<img src="<?php echo c2c_get_custom('post_image_url'); ?>" height="<?php echo c2c_get_custom('post_image_height'); ?>" width="<?php echo c2c_get_custom('post_image_width'); ?>" alt="<?php echo c2c_get_custom('post_image_alt'); ?>" />
I’ll cover how to add these images in your feed in a later post.
Post Links
Similar to post images, post links can be added. I use custom fields to link to the download and live preview links at the bottom of free designs. Here’s the HTML.
<div class="livepreviewlink">
<a href="<?php echo c2c_get_custom('livepreview_url'); ?>" title="View the live preview">Preview</a>
</div>
<div class="downloadlink">
<a href="http://dodesign.us/download/<?php echo c2c_get_custom('design_file_name'); ?>.zip" title="Download this design for free!">Download</a>
</div>
Determining when to Display Custom Field Value
The first two examples lead to a problem. Not all posts have an image, and not all posts are free designs. I use categories to choose when to display the custom fields. For example, every post that has an image is in a category called “Has an Image.” I use PHP conditional statements to only display the custom field value when the post is in that category.
<?php if ( in_category('16') ): ?>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to “<?php the_title(); ?>”"><img src="<?php echo c2c_get_custom('post_image_url'); ?>" height="<?php echo c2c_get_custom('post_image_height'); ?>" width="<?php echo c2c_get_custom('post_image_width'); ?>" alt="<?php echo c2c_get_custom('post_image_alt'); ?>" /></a>
<?php endif; ?>
Likewise, I use conditional statements to determine when to show the download and live preview links.
<?php if ( in_category('5') ): ?>
<div class="livepreviewlink">
<a href="<?php echo c2c_get_custom('livepreview_url'); ?>" title="View the live preview">Preview</a>
</div>
<?php endif; ?>
<?php if ( in_category('20') ): ?>
<div class="downloadlink">
<a href="http://dodesign.us/download/<?php echo c2c_get_custom('design_file_name'); ?>.zip" title="Download this design for free!">Download</a>
</div>
<?php endif; ?>
Listing Custom Field Values
On the sidebar, I use the plugin to automatically show thumbnails of the latest designs (I have to make the thumbnails myself though, but it puts them on the sidebar when I publish the post).
<?php $temp_query = $wp_query; query_posts("showposts=10&cat=20"); ?>
<?php while (have_posts()) { the_post(); ?>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to “<?php the_title(); ?>”"><img src="<?php echo c2c_get_custom('very_small_thumb_url'); ?>" height="75" width="75" alt="<?php the_title(); ?>"></a>
<?php } $wp_query = $temp_query; ?>
Conclusion
Sure, WordPress is great, but it can’t do everything. After all, that’s why God invented plugins! Where it lacks in custom fields, Get Custom Field Values delivers. As you can see, it’s useful in many ways, but I’ve only shown a few examples. For more advanced information, take a look at the plugin’s homepage, or if you have any questions, leave a comment.
Great post. I already do pretty much all those techniques in my sites as well. You’ve compiled a handy reference here.
Note the same trick you use for Image Beside A Post with the custom field key=post_image_url … you can do the same idea with an mp3, key=post_mp3_url … and wrap this mp3 link around your image of a “Play” or “Download mp3″ button, for example. It’s a nice way to highlight your podcast media file.
[...] explained how to use advanced custom fields in WordPress, and promised to explain how to add custom field post images to a WordPress RSS Feed. We’ll, [...]
Hi, Great post but i was trying to do something like this but i am using pages, so the category thing wouldnt work for me, dont suppose there is a way to say if its higher than page id 3000 show this, or something to that effect?
This is my code and what i want is for it all to just show if the custom fields have been used, if not then none of it should show, i would be extremely greatful for any help anyone could provide me.
Thanks
Martin
Thanks for a good tutorial.
Hi
Thanks for a nice post.
Sek.
Finally someone who can write a good blog ! I loved your post and will be telling others about it.
Thanks !