Castelar Design & Code

Contact

Phone: 313 • 437 • 3355 Email: support@castelar.net

Use WordPress optional excerpt or Custom Field for post thumbnail Icons

There are a few different ways to add images next to your WordPress posts; I will discuss two of these ways (using the “optional excerpt” field or using a “custom field”) including the benefits and code for each.

The first method is to use the “Optional Excerpt” field when posting and a plugin called DBPostsForCategory. It’s hard to find because the developer’s site (Dhruba.net) has been down for awhile, but you can download it here: DBPostsForCategory.txt. Change .txt to .php.

You can add html to the “Optional Excerpt” field for each post pointing to any image, thumbnail or icon. In this case we’ll point it to a 24×24 icon “myposticon.gif”
The code you’d enter in the optional excerpt would be:

<img src”http://yourdomain.com/pathtoimage/myposticon.gif” />

or you could add a link to your excerpt so the icon links to the post also. You’d use this:

<a href=”http://yourdomain.com/yourpost/”><img src”http://yourdomain.com/pathtoimage/myposticon.gif” /></a>

Next thing to accomplish would be a list of new posts with the images (excerpts) next to them. Upload and activate the DBPostsForCategory plugin and use this code in your template:

<?php DBPostsForCategory :: printAsExcerptItems(1, 5, true) ?>

You can adjust the category using the first number in the array, how many posts shown, and change to false for descending order. So if you wanted to list the latest 10 excerpts from category ID 7 in ascending order you would use:

<?php DBPostsForCategory :: printAsExcerptItems(7, 10, false) ?>

Now, another way to achieve virtually the same thing, but using custom fields you would first need to add a custom field key and a url value pointing to the image. For example:

Key: icon Value: http://www.yourdomain.com/myposticon.gif

Now we have to edit your template with some php to show this custom field. We are going to want to show the post icon linked to the post. So here is the code to achieve this:

<?php $iconfield = get_posts(‘numberposts=10&category=7’); foreach($iconfield as $post) : setup_postdata($post); ?>
<a href=”<?php the_permalink(); ?>”><img src=”<?php echo get_post_meta($post->ID, “icon”, true); ?>” alt=”<?php the_title(); ?> icon” /></a>
<?php endforeach; ?>

You could of course show the icons to the left of the post title. You would use this code instead:

<?php $iconfield = get_posts(‘numberposts=10&category=7’); foreach($iconfield as $post) : setup_postdata($post); ?>
<a href=”<?php the_permalink(); ?>”><img src=”<?php echo get_post_meta($post->ID, “icon”, true); ?>” alt=”<?php the_title(); ?> icon” /></a> <a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
<?php endforeach; ?>

You could of course add any number of custom fields using this method and it can be used in countless ways. All you would need to do to add another custom field is change the ($post->ID, “icon”, true) to read ($post->ID, “CustomFieldKey”, true).

I use custom field in the header to show a list of my latest portfolio items with a custom thumbnail, post title and a snippet of what I contributed to the project. A small bit of CSS styling with either method and you are on your way to making your site a more dynamic and more importantly contributing to the overall look and feel. Let me know if you know another way to achieve this, or if this was useful to you and your site.

6 Responses to “Use WordPress optional excerpt or Custom Field for post thumbnail Icons”

  1. Joni Solis Says:

    I am a visual person I need to see this in action. Where is a live example? Are the images on this page http://www.castelar.net/portfolio what you are talking about?

  2. Jazz Up Your Site: 28 Ways To Use WordPress Custom Fields « The Beaver Pond Says:

    […] a custom field to publish an icon to visually differentiate posts with special content, such as for podcasts. (In fact, you could use […]

  3. Rodolfo Says:

    Thank you so much.

  4. aparent Says:

    I found this very helpful in creating post icons. Thanks!

    We have two major sources for posts so I created two of these keys that our non-techy editors could select from. We didn’t want editors to have to input/know/mess with the URL for the images so I hard-coded those into the PHP. However, the value field still insists on having something entered, even if we are ignoring it. Any way of turning this off?

  5. Jazz Up Your Site: 28 Ways To Use WordPress Custom Fields : Performancing Says:

    […] a custom field to publish an icon to visually differentiate posts with special content, such as for podcasts. (In fact, you could use […]

  6. LuroDeelose Says:

    Sorry for being off topic – what WP theme do you use? It’s looking great!

Leave a Reply