Posted on 16 April, 2009 By Kim Woodbridge 14 Comments

Using Thumbnails for Excerpts Plugin with Query Posts to Make a Custom Sidebar Block in WordPress

Block (by *SΛM)

Last fall I wrote an article about improving your archives with the Thumbnails for Excerpts plugin. This plugin takes the first screenshot in your article and displays it as thumbnail next to your archives listing. The archives must use the excerpt tag, the_excerpt, in order to display the thumbnail. The plugin also has a number of settings that can be adjusted and a class that can be used in the CSS.

Anyway … now that I’ve added that background information I can move on.

I was asked to make a sidebar block on a non-widgetized sidebar that pulled the last post from a specific category, add a thumbnail image, and a little piece of text below the image. Initially I was going to use custom fields to do this but was a little hesitant.

sidebar2

I haven’t discussed custom fields here very much (or at all) but a lot of site customization can be done with them. If you want to read more about them now, Jeff from Perishable Press, has a great tutorial. But, by using a custom field, the thumbnail image has to be uploaded and the url to it has to be added to the custom field every time a post is written in that category. This isn’t especially hard but it is extra work for the client. And the custom field doesn’t have an image uploader. Alternatively, the image used in the post can be used but a thumbnail resizer plugin needs to be installed, that needs to be used to upload the image, and the url still needs to be added to the custom field for each post.

As I started working on the sidebar block, I discovered that the images being used in the posts weren’t being uploaded. They were being linked to on flickr, much like the way I used the flickr embed code for my posts. So, uploading a thumbnail image or uploading through a thumbnail resizer really wasn’t going to be the best solution without adding a number of extra steps for the user.

I then realized I could use the Thumbnails for Excerpts plugin with Query Posts to create the same functionality as the Custom Fields would. Query Posts would pull the last post from the category and the Thumbnails for Excerpts plugin would make the thumbnail image. The only thing that would need to be added to each post was a small piece of text in the Excerpts field on the WordPress Write Post screen.

Here’s what I did (finally getting to the point here).

  1. Installed Thumbnails for Excerpts
  2. Added the following Query Post code to the sidebar
    <div class="myclass">
    <h2 class="myclass2">title here</h2>
    
    <?php query_posts('category_name=categoryname&showposts=1'); ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class="myclass3"><?php the_excerpt(); ?></div>
    <?php endwhile; ?>
    
    </div>
    
  3. I discussed using query post to pull recent posts from one category in an earlier article. This is pulling 1 post from the category.
  4. the_excerpt is used for the Thumbnails for Excerpt plugin
  5. Wrote the CSS for myclass, myclass2 and myclass3 so the box has the border, the image is centered, the text is centered below the image, etc.
  6. A piece of text then needs to be added to the Excerpt field on the Write Post screen. If an optional excerpt isn’t written, the code will put a WordPress excerpt, which is usually about a paragraph, and that is too much code to show in a small sidebar block. The Excerpt field is usually right below the area where you write your article.
  7. The image in the sidebar block links to the full post.
  8. Every time a new post is published in the specified category, the content in the sidebar block will be replaced.

So, in this example, Thumbnails for Excerpts, Query Posts and the Excerpt field are being used to highlight the last post in a certain category. Here it is for a giveaway. If you want to see it in action visit green LA girl, which is a totally cool urban enviro site for the LA area.

I started this article by briefly mentioning Custom Fields, which many of you may be thinking would be a better solution because it doesn’t rely on a plugin. But this method is SO much easier for the user and only requires that the Excerpt field is used when the post is written. The user does everything else the way she always has and the plugin and the Query Posts code automagically takes care of the rest.

What do you think? Can you think of other uses for this? Now that I set it up I can think of many different ways this could be used on sites.

photo credit: *SΛM


Related Posts:
  • How to Exclude a Category From the Sidebar List in WordPress
  • Random WordPress Quotes Without A Plugin
  • How to Conditionally Display WordPress Sidebar Content with is_page
  • How to Style a Sticky Post in WordPress 2.7
  • How to Customize Gravatars in WordPress
  • Posted In : WordPress Plugins | WordPress Tips
    If you enjoyed this post, please subscribe to my RSS Feed

    Post to Twitter   Post to Delicious   Post to StumbleUpon

    14 Responses to “Using Thumbnails for Excerpts Plugin with Query Posts to Make a Custom Sidebar Block in WordPress”

    Trackbacks/Pingbacks
    1. (Anti) Social-Lists 5/3/09 | (Anti) Social Development
    2. Random WordPress Quotes Without A Plugin | (Anti) Social Development
    Leave a Comment
    You may use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> .


    Recent Comments

      • Juncai: Hi there, I was trying to add an image when i share to facebook. The code above for the link rel="image_src" href=”u...
      • Carla: Kim - I'm sorry for implying that anyone choosing (not because they cant pay or not eligible) to forgo insurance is irre...
      • Jamie Dunne: ~Hi Kim, Thanks for posting this - Great info ... Ive being digging through numerous apps and code trying to do th...
      • vered - blogger for hire: Thanks... and I love the photo. :) .-= vered - blogger for hire´s last blog .....
      • Kim Woodbridge: Hi Lisa Marie Mary - I think I remember that. And I never minded a mullet on Bono ;-)...
      • Kim Woodbridge: Hi Dot - We got about 2 feet - I think there was a lot more down your way. Schools were closed today, which I thought w...
      • Lisa Marie Mary: Yes, I know - I'm a mullet dork. I admit it. LOL I had my sweet little boys wear them for about their first 5/6 years -...
      • Dot: Oh, so that's what short codes are. Hope you're managing okay with all the snow. Are they good at cleaning it up in ...