List Recent Posts And Pages With Thumbnail And Excerpt

Sometimes you may create a list of pages, whether they be grouped by category, parent, etc. But it would be better if you didn’t have to update every list by hand. Luckily, WordPress does all of this, consistently proving that it’s more than just a blogging platform. (Who even thinks that anymore?)

The goal of this tutorial is to show you how to get a list of the most recent posts or pages.

Here is the code we’ll be using…

<ul>
<?php query_posts('cat=207&showposts=7'); ?>
<?php while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'big-featured' ); } ?></a>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<span><?php the_time('F jS, Y') ?> </span>
<p><?php the_excerpt(__('(more…)')); ?></p>
</li>
<?php endwhile;?>
</ul>

So breaking down that code snippet, which could be more correctly referred to as a code block…

The first thing you must absolutely! note is, that this code, query_posts to be exact, is meant to replace the main loop. On line 3 you should recognize:

<?php while (have_posts()) : the_post(); ?>

You can’t have a second instance of this on your PHP page. This code replaces the main loop.
If you would want to add a secondary list of posts or pages to supplement the main loop you can use WP_Query or get_posts. I added an example of using WP_Query at the end of this tutorial. Click here.

All of the PHP calls in this code snippet don’t have any wrapping tags associated with it. It just outputs texts or images with not formatting. So you need to add your own HTML tags to control it. Putting this code into an un-ordered list is what is usually done, that I’ve seen. You probably noticed the beginning and ending ul tags in the code. The li tags may be harder to see but they are there on line 4 and 6 and then again in line 7.
Putting this into a list is semantic as you are listing the pages.
As for what these tags are actually wrapping, the ul tags wrap the whole code snippet, which is easily seen. The li tags wrap each instance of a link.

Here’s a sample of the output HTML from my site, to better understand…

<ul>
<li><a href="http://openwings.info/lovely-beach/"><img src="/thumbnaillovelybeach.png" alt="" /></a><a href="http://openwings.info/lovely-beach/">Lovely beach</a>
<p>This is where the excerpt is seen...It is a little long so I won't paste it in this tutorial.</p>
</li>
<li><a href="http://openwings.info/4-design-and-development-trends-of-mine/"><img src="/thumbnail4trends" alt="" /></a><a href="http://openwings.info/4-design-and-development-trends-of-mine/">4 Design and Development Trends Of Mine</a>
<p>This is where the excerpt is seen...It is a little long so I won't paste it in this tutorial.</p>
</li>
<li><a href="http://openwings.info/11-great-web-designs/"><img src="/thumbnail11examples.png" alt="" /></a><a href="http://openwings.info/11-great-web-designs/">11 Examples of Great Web Design</a>
<p>This is where the excerpt is seen...It is a little long so I won't paste it in this tutorial.</p>
</li>
</ul>

Don’t be afraid to go crazy and add classes, headers, divs, or other HTML elements.
For example, adding a class to the links…
<a href="<?php the_permalink() ?>" class="perma"><?php the_title(); ?></a>

You can probably see from the HTML output a bunch of places you can add different elements. If you use any floats don’t forget to clear them.

Looking back at the original code block, the next piece of excitement is here:
<?php query_posts('cat=207&showposts=7'); ?>

$query_posts is sending a global query to WordPress about posts. Specifically about what kind of posts you want and how many.

Here, you are essentially asking WordPress to get recent posts with a cat of 207 and to display 7 of them.

Cat stands for category and the number you see is the category ID that WordPress associates with them.

I want to slow down here, especially for beginners. You see, you may associate a category with a word, say ‘fish’. But WordPress assigns a number to that same category and that’s what WordPress calls it. Sometimes you can hover over the category and find it’s ID in the status bar of your browser. But I prefer to use the plugin Reveal IDs. I can then go into my left sidebar, click on posts and then on categories or tags and it will display the ID in a far right column. (The ID for comments will also show up when you visit your Dashboard’s comments page.)

To pull all of the links by tag you use tag_id instead of cat.

query_posts('tag_id=165&showposts=7');

Make sure you are paying attention to the patterns of the code, including the equal signs (=) and quotation marks (“). When you are making custom code it has to be the same as all the others, it has to be right.

If you did not want to pull the posts or pages by any specific category or tag you could just leave it out, like this:

query_posts('showposts=7');

Be sure to take out the ampersand at the end of the cat/tag_id but keep the quotes, like I just did.

You can show posts from numbers 0,9999. If I want to show all of my posts I usually use 9999.

There are two ways to show pages instead of posts in this code snippet. You can add categories and tags to your pages and then specify a particular category or tag to use. I use a plugin to add this functionality, Ninja Pages, Categories, and Tags

Or you can add to the query:
query_posts('post_type=page&post_parent='.$parent);

post_type this tells WordPress to post pages in this list. There are other post types as well, post, attachment, revisions and nav menu. You can look these up in the WordPress Codex.
post_parent This gets the ID of the parent page allowing the code snippet to list all of the child pages.

Back to the code snippet…
<li>
<a href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'big-featured' ); } ?></a>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<span><?php the_time('F jS, Y') ?> </span>
<p><?php the_excerpt(__('(more…)')); ?></p>
</li>

Here we meet the permalink. We are telling WordPress to insert the permanent link to the post or page into our anchor code and to get the title from the post.

There are two anchor links and two permalinks in this snippet. One is wrapping the thumbnail and the other is wrapping the title. You could use one anchor tag to wrap both the thumbnail and the title, but for styling purposes it is better to let them be separate. It is also important to note that both the thumbnail and the title should be linked. Visitors are used to being able to click either the image or the title to navigate to a post and when the option they choose isn’t available, it can slightly interrupt the user experience.

You will notice here, the name ‘big featured’ in the_post_thumbnail() starting at then end of line 2. That is the name of my size parameter for my thumbnail that I set in my functions.php file. You can learn more about the_post_thumbnail() on WordPress Codex, search Google or wait for my next tutorial on featured images.

The line under the title call is a timestamp that you can format to your own liking by using the reference on WordPress Codex.

After the time stamp is the excerpt and ending li tag.

Incidentally, if you were wondering how WordPress knows which post to use for the permalink, thumbnail, title and timestamp, looking back at the top part of the code snippet you see the_post(). Once it matches a post with the criteria from the query_posts (or no criteria if we left it blank), it looks at the post’s information and then inserts it into our formatting tags (or template) that we set up. It keeps inserting information into that same template for each post or page that matches the criteria. It’s a loop, which brings us to our last part of the PHP:
<?php endwhile;?>
This tells WordPress to stop the loop when it has finished fetching all of the posts with the criteria and to move on to the next thing.

Removals

The great part about this code snippet is that it is totally re-configurable. You can take out what you don’t want, keep what you do, and still have a working code. I do this often as you will soon see in my examples.
If you want to take out any element of this code make sure to take just that element out and make sure to take out the complete element. It’s the same for inserting.

Thumbnail
Remove or insert this part completely:
<a href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'big-featured' ); } ?></a>

Title
Remove or insert this part completely:
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>

Timestamp
Remove or insert this part completely:
<?php the_time('F jS, Y') ?>

Excerpt
Remove or insert this part completely:
<?php the_excerpt(__('(more…)')); ?>

The output of this code snippet will look just like any other un-ordered list you might usually create, as you saw from my example of the HTML output above. The difference is that this list was made by WordPress and it will be updated automatically by WordPress. You don’t have to touch a thing.

As mentioned above query_posts is made to replace the main loop. So if you instead want to add a secondary list of posts without replacing the main loop you should try get_posts or WP_Query. I’ve posted an example of WP_Query below. It’s basically the same as what you have just learned. (So if you skipped down here and didn’t read the tutorial, you might want to go back up.)

WP_Query

<ul>
<?php $recent = new WP_Query("cat=207&showposts=9999"); while($recent->have_posts()) : $recent->the_post();?>
<li>
<a href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'big-featured' ); } ?></a>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<span><?php the_time('F jS, Y') ?> </span>
<p><?php the_excerpt(__('(more…)')); ?></p>
</li>
<?php endwhile;?>
</ul>

There is really only one difference in this code from the one we went through above. Instead of calling the function query_posts, it’s calling the class WP_Query, which is a powerful WordPress class that deals with all of the details of posts and pages. For more on WP_Query check out the WordPress Codex Page.

Here’s are some quick visuals:

Title alone

Lovely Beach
4 Design and Development Trends Of Mine
11 Examples of Great Web Design

Thumbnail and title

Thumbnail, title, time stamp and excerpt

To really make this code shine, you should be using a lot of CSS. You’ve seen a couple of examples of my use of CSS, which you can totally use as inspiration for you own designs. Branch out and give your lists some pizazz.

You may find a couple of other versions of this snippet on the web, but these, of all I’ve seen, gives you the most functionality. Being able to specify categories and the number of posts to display, permalink, excerpt, and title is not something every version can do. But I don’t know if and where this code breaks. So in the hopefully unlikely event that you do have trouble with this code please contact me and let me know. It’s important to me that this works for you and anyone else who may try it. And if you are a little confused on the whole process and have a question or two, go ahead and comment below. I would love to help and I will get to the comment as soon as I can.

Comments are closed.