Display Posts: Limit Number, Limit Categories, and Include Excerpt and Thumbnail
28 May 2008
No Comment
If you look at the front page of Metro-East.com you will see three short blog excerpts on the right side. There may not seem to be anything special about these excerpts but there are actually a few interesting things going on here. I have seen questions about this technique on other blogs so I will try show you how to:
- Limit the Categories that the Posts are displayed from.
- Limit the number of Posts shown.
- Include a text blurb (Excerpt).
- Include a thumbnail.
There are any number of reasons you might want to do this but in my case I want to show Posts from featured blogs on the front page. (Maybe you have a new blogger and you don't want his/her posts hitting the front page until you make sure their content is up to your standards.) I also want to conserve space and use a "teaser" to get the reader to click to a new page. The thumbnail is mainly for aesthetics but should also increase clickthrough behavior.
I guess the standard operating procedure in a tutorial like this would be to make you wait for the good stuff until the end, but I won't torment you so. If all you wanted was the code, here it is in its entirety:
-
<div id="blogcategorycontent" style="margin-bottom:11px;background: #F5F5F5;">
-
<?php $posts = query_posts('cat=227,266&showposts=3'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
-
<div class="post" style="border: 1px solid #CCCCCC;margin-bottom:2px;padding:5px;background: #F5F5F5;" id="post-<?php the_ID(); ?>">
-
<h2><u><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title() ?></a></u></h2>
-
<div class="entry">
-
</div>
-
</div>
-
<?php endwhile; ?>
-
<?php else : ?>
-
<div class="post">
-
<div class="postMeta"><span class="date">No Matches</span></div>
-
<h2>No matching results</h2>
-
<div class="entry">
-
<p>You seem to have found a mis-linked page or search query with no associated results. Please trying your search again. If you feel that you should be staring at something a little more concrete, feel free to email the author of this site or browse the archives.</p>
-
</div>
-
</div>
-
<?php endif; ?>
-
-
</div>
Now if you would like an explanation for what is going on in that code, I will try my best to give you one.
This line is known to Wordpress users as The Loop:
-
<?php $posts = query_posts('cat=227,266&showposts=3'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
Basically, it is our way of telling Wordpress what posts to display. (We feed things into The Loop and we get things out of The Loop.)
In this case, we want to feed certain Categories into The Loop, as well as a Post limit.
We want to show the Categories "Brian Bailey's Blog" and "Events Blog" and we only want to display a total of 3 Posts from those Categories. To do this we just need to know the ID for each Category. We can do this by going to our Manage > Categories page and holding our cursor over the Category name. At the very bottom of the window we will see the preview URL and the last piece of that URL will read "?action=edit&cat_ID=#" where # is our Category ID. In this case those IDs are 227 and 266, respectively. We also want to limit the total number of Posts to 3.
Plug those numbers into The Loop code shown above and we have successfully limited the number of Posts to display and the Categories to display them from.
Next we want to include a text blurb, or Excerpt.
This is where it gets just a tiny bit tricky. I'm sure there are other ways to do this (that's one of the things I love about Wordpress) but with this method we will be using a little-used technique to display the Excerpt. Why? Because we are going to need to use the "standard" method normally reserved for the Excerpt in order to display the thumbnail.
We use this line of code from above to display the text:
-
<?php the_content_rss('', TRUE, '', 40); ?>
There are a couple of cool things about this. First, this method will only display text because as you can see, we are using the RSS feed to generate our Excerpt. RSS feeds (almost always) are comprised of text. Secondly, we can limit the amount of text displayed. In this case I have limited the text to 40 characters. Simply choose your own number here as appropriate.
Thus we have completed our Excerpt.
Lastly, we want to include a Thumbnail.
We will use this code as shown above:
-
<?php the_excerpt(); ?>
Now you see why we did not use 'the_excerpt' for our text. We are going to use 'the_excerpt' as a simple method to display a Thumbnail.
When we write our post we simply scroll down to the Excerpt section and fill it in with HTML image code, such as:
-
<img src="http://www.metro-east.com/images/imagefilename.gif">
When we publish our post Wordpress will automatically display the Thumbnail just as you see it on the front page of Metro-East.com.
You can make your life a whole lot easier if you note the code wrapped around 'the_excerpt' code:
The 'class="introIMG2"' code is CSS styling that I have applied to 'the_excerpt'. Here is that CSS code:
-
.introIMG2{
-
width:75px;
-
height:75px;
-
float:left;
-
margin-right:8px;
-
overflow:hidden;
-
border: 1px solid #CCCCCC;
-
}
This CSS styling forces 'the_excerpt' to display as a 75x75 pixel image, along with a border and other styling as shown. Why did I do this? Because when I uploaded the images to use as the Thumbnail, I saved them as 75x75 pixel images. Then everything fit perfectly and none of the images are distorted. Groovy, eh?
Most of this can be figured out with just a little bit of work. That's how I managed to do it, and so can you. It's not the most impressive piece of coding under the sun but I strongly feel that the little things make all the difference when you're trying to give a professional presentation.
Leave your response!