Epic Alex | WordPress Tutorials

Use jQuery to Jazz Up Your List of Latest Posts – Part 1

A lot of blogs display a list of their most recent or popular posts in their sidebar, more often than not just showing the title of each one. But how can you give your reader an idea of what that post is about by using the excerpt, without taking up too much room? JQuery is our friend!

Originally, this post was going to be a few quick tips on using jQuery in different ways, but this one idea has ended up taking up a lot of room, so this will now be part one of two!

The Idea

Some of my favourite sites display a list of posts in their sidebar, be it most popular as on Pro Blog Design, on a certain topic like Justin Tadlock does with his list of tutorials, or just the most recent as on a huge number of other sites. While they all have juicy titles and great design to pull you in, one of the aims of the excerpt is to make the reader want to read the post even more!

The majority of the time, a blog will display their latest posts on their homepage using the excerpt to give a lead paragraph for what the post is about. So it therefore makes sense that wherever else these posts are displayed, an excerpt would be useful. However, if we simply add the excerpt onto all of these titles, our lists become a little bit too long, and uninviting. While this may be a personal view, I find sites like the ProBlogger homepage too crowded for all the fantastic information that is trying to be portrayed. So how can we find a middle ground? JQuery!

Please note: The following tutorial will only work if you are not using widgets in your sidebar/other widgetised area since it requires using the WordPress loop.

The Aims

There are two main aims of the end product of this tutorial.

1. Provide the user with as much information as possible so that their clicks are not wasted. A bad experience on a site can keep a user away for ever. At the same time, this means we are showing off the best of our content, with nothing being sacrificed due to space, which leads to…
2. Not taking up yards of space displaying all of our excerpts, which in a sidebar or similar area, can lead to a cluttered look.

The WordPress Code

To output our list of posts in the sidebar, we need to access the WordPress loop. It is possible that you already have something that looks a little bit like the following:

1
2
3
4
5
6
7
8

<ul class="posts">
<?php query_posts('showposts=10'); ?>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" 
rel="bookmark"><?php the_title(); ?>
</a></li>
<?php endwhile ; ?>
</u>

1. Note that the class of my unordered list is ‘posts’. This is important for the jQuery later, in which you’ll have to change a couple of things to match your own html
2. This first of all says that we only want to show the 5 most recent posts
3. We then start the loop
4. For each post, we output a list element <li>, which contains…
5. A link to the post using the_permalink and adding other information with the_title
6. We end our list element for each post, and finally…
7. End our loop

We now want to add in our excerpt to this. We’ll need to write our own function to do this, because we need to add a class to the excerpt, and the_excerpt automatically outputs <p> tags. We need to add this to functions.php:

1
2
3
4

function excerpt_class() {
$excerpt_class = strip_tags(get_the_excerpt(), '<a><img>');
echo "<p class=\"hidden\">" . $excerpt_class . "</p>";
}

1. This creates our new function, excerpt_class
2. defines the variable $excerpt_class as get_the_excerpt, which returns a string, from which we can get rid of the <p> tags
3. The second parameter of strip_tags means do not strip out any links or images
4. We then echo out a paragraph with our new class of hidden, and include our variable

We now need to add this right before the end of our list element:

1
2
3
4
5
6
7
8

<?php query_posts('showposts=10'); ?>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" 
rel="bookmark"><?php the_title(); ?>
</a>
<?php excerpt_class(); ?>
</li>
<?php endwhile ; ?>

For each post, we should now have an output a little bit like this:

1
2
3
4
5

<li><a rel="bookmark" title="My Post's Title" 
href="http://mysite.com/new-post/">
My Post's Title</a>
<p class="hidden">The excerpt from my latest post</p>
</li>

Some CSS

The next step is to add the following line of CSS to your style.css file. This hides the paragraph when the page is output. This is so that if a user has JavaScript disabled, they won’t see all of the excerpts, which would go against our aims.

1
2
3

.hidden {
display: none;
}

If you already have this line in your style.css file (have a check to make sure), then you don’t need to add it again.

On the next page, we look at the jQuery code.