Using Thumbnails for Excerpts Plugin with Query Posts to Make a Custom Sidebar Block in WordPress
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.
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).
- Installed Thumbnails for Excerpts
- 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> - I discussed using query post to pull recent posts from one category in an earlier article. This is pulling 1 post from the category.
- the_excerpt is used for the Thumbnails for Excerpt plugin
- 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.
- 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.
- The image in the sidebar block links to the full post.
- 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:
16 Responses to “Using Thumbnails for Excerpts Plugin with Query Posts to Make a Custom Sidebar Block in WordPress”
Trackbacks/Pingbacks
- (Anti) Social-Lists 5/3/09 | (Anti) Social Development
- Random WordPress Quotes Without A Plugin | (Anti) Social Development
April 16, 2009 at 1:20 am
That’s very clever. I just happen to need something similar on ‘that project for that guy’. Now, let me see how I can make a complete hash of it, give up and end up hard coding the lot…
Dave´s last blog post – Do forms follow function?
April 16, 2009 at 6:40 pm
Hi Dave – LOL – I think you can do it. Feel free to subcontract the tough parts of the project out to me. ;-)
April 16, 2009 at 12:46 pm
This produces some very cool looking query results! I’m using Google search right now — dull, dull, dull! I’m bookmarking this post for when I get brave and try to make my queries more attractive.
Thank you, Kim, for a great, in-depth article!
Mike Nichols´s last blog post – Adult Separation Anxiety Disorder: Not Just Kids, Part 2
April 16, 2009 at 6:44 pm
Hi Mike,
Thanks! Google search isn’t dull – it produces better results than WordPress does and it can be monetized. Did you do anything special to get it to work on your site? I’ve been setting it up for someone and have had trouble getting it to integrate with the template.
This is more to highlight posts from a particular category than to be used as a search. I did a lot of thinking about the best way to make this work and when a easy-ish solution came to me, I wanted to share it.
Thanks for the retweet.
April 16, 2009 at 3:08 pm
Sounds like a neat trick…i’ll file away this post so I can add it to my new theme ideas.
- The Nexus – Feed Your Brain
Donace | TheNexus´s last blog post – Feedburner steals your Comment luv
April 16, 2009 at 6:47 pm
Hi! Great and thanks!
April 16, 2009 at 5:26 pm
Well I’m v. excited to have the feature on my blog. So simple and automatic! Thanks again, Kim :)
Siel´s last blog post – California at the Tipping Point: Global climate change today
April 16, 2009 at 6:52 pm
Hi Siel – I am really happy with how it turned out and I’m glad you like it :-)
April 18, 2009 at 9:29 pm
Kim this is a very smart idea indeed. It was fast and elegant. Well it relied at a plugin but i think it’s ok for this one. By the way o not fear image resizing. Seriously it’s like 5 lines of code using GD. Remember this post of mine http://www.stratos.me/2008/10/resize-images-with-php-and-gd/ ? It’s pretty simple too. And i would suggest you use custom code when needed because it’s so much speedier than having a plugin included each time. All in all it was very nice solution Kim!
stratosg´s last blog post – Make your #FollowFriday easy!
April 19, 2009 at 8:49 am
Hi Stratos – Thanks! I was really pleased with this solution. I’ve used the Thumbnails for Excerpts plugin for quite a while on this site and haven’t had any problems with it. And I think that even though we try to avoid plugins that they can provide the best solution for a client. This method is so much easier for the user than others I considered using.
Yay! I got the Stratos seal of approval :-)
April 19, 2009 at 1:09 pm
Another excellent WordPress article, Kim – thanks for giving me something juicy to read during the commute. Btw, that post title is insane!! ;)
Jeff Starr´s last blog post – Looking for a Publisher
April 20, 2009 at 6:34 am
Hi Jeff – Thanks! I was pretty excited about this technique. I will be the first to admit that the title and the article are a bit of a mess. I couldn’t express myself as clearly as I wanted to.
April 21, 2009 at 9:58 am
Kim I use this plugin for my thesis theme and it helped me a lot.
Such plugin are must for those theme which use custom field to show images on FP
Harsh Agrawal´s last blog post – 8 Reasons Why self hosted wordpress blog is better then blogspot blog
April 21, 2009 at 10:41 am
Hi – Are you using the plugin to show the images on the front page? Great use of two columns too – did you use something like what Jeff wrote about in this article?
http://perishablepress.com/press/2008/08/04/two-column-horizontal-sequence-wordpress-post-order/
May 26, 2010 at 1:46 am
Your front page query posts works great. I always urged for the code to be straightforward. Your synopsis worked the magic.
May 26, 2010 at 10:14 am
Hi Greg – Thanks! Glad it helped.