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

By Alex on July 7 2009 | Listed under Tutorials, WordPress | 18 Comments

The jQuery Code

We’re going to look at two methods here, but in both cases, we’re going to need to add jQuery to our page if it isn’t there already. As always, this needs to be added to the <head> section, and the best way to do this is using the wp_enqueue_script function. WordPress comes packaged with jQuery, and this will add the file already in our WordPress install.

Open your header.php and before the wp_head call, add this line:

1

<?php wp_enqueue_script('jquery'); ?>

The purpose of adding the code in this way is so that you don’t load more than one instance of jquery in your header. This method does have one caveat however, and that is that the jQuery library added in WordPress is in no conflicts mode so that other javascript libraries can be used along side it, i.e use the $ sign. Because of this, we need to wrap our jQuery code in a slightly different document ready function to normal:

1
2
3

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

We can now go about adding our own effects. Remember to replace .posts with the class/id of your own list.

Getting Ourselves Ready

As shown just above, we need to start our code with the document ready function.

1

jQuery(document).ready(function($) {

Method 1 – Hovering

The first method will show our excerpts when a user hovers over the title of the post, and they will disappear when the user moves away. Regular visitors to my site will realise that the first list of posts on my homepage now implements this method in the list of recent posts, so to see a demo, head to the homepage!

Mouseover

2
3
4

$(".posts li a").mouseover(function() {
$(this).parent().find("p").slideDown("slow");
});

The first thing we want to do is show the excerpt when a user hovers over a link. To do this we add a mouseover event, which is like a hover in CSS terms. The next line is a little more complicated:

  1. this is used so that only the currently selected object is effected, however…
  2. Because the paragraph element is not within that anchor element, we need to go back up to its parent
  3. We can then search within that parent for the paragraph element using find
  4. Finally we trigger our slideDown effect on the paragraph text to show it

Mouseout

5
6
7
8

$(".posts li a").mouseout(function() {
$(this).parent().find("p").animate({opacity: 1.0}, 500).slideUp("slow");
});
});

If we don’t add this section in, then all of the posts we have hovered over will stay ‘open’, and our original aim of not taking up too much space in the sidebar will not have been achieved. So, when the mouse moves out from the link, we can trigger our next event.

  1. We again go through the process of using this to work with the current object, and find our paragraph element
  2. The next phase is a little bit of a hack, because jQuery doesn’t have a built in delay, pause or wait function. Essentially what the animate function does is take half a second (500 milliseconds) to make the selected element 100% opaque. However, our element is already 100% opaque, so this acts as a timer to delay before firing our next function. I added this in so that things look a little smoother between mouseover and mouseout
  3. Now we slideUp our paragraph text
  4. The final brackets are closing off the document ready function at the start.

That’s method 1 done!

Method 2 – Click to show excerpt

This method will use jQuery to insert a link above our list that says “Show Excerpts”. This will eliminate the fact that a user might not know they can hover on the post title to see its excerpt. To see a demo of this, see the left hand block in my footer.

Adding The Link

2

$(".posts").before("<a class='show_excerpts' href='/'>Show Excerpts</a>");

This finds our ul with the class .posts, and adds a link with the class show_excerpts, and the text ‘Show Excerpts’ before the list.

Changing the Link Text

Once we’ve opened the excerpts, our link should change to say hide excerpts so that the user knows they can be hidden again.

3
4

$(".show_excerpts").click(function() {
$(this).text($(this).text() == 'Show Excerpts' ? 'Hide Excerpts' : 'Show Excerpts');

This looks a little complicated if you are unfamiliar with the syntax, which is something called a ternary operator. This is how it works for us:

  1. Run a function when the user clicks on a link with the class show_excerpts
  2. Within this object we can use the text function to replace text. Inside of the brackets, which stretch the whole line, is what we want to replace the text with
  3. Access our object again using this and assess its text attribute. The brackets after text this time are empty because we what to find out what that is equivalent to, using ==. (Remember, nothing has been replaced yet.)
  4. The question mark is like asking whether what comes before it is true or not, and depending on that…
  5. We replace the original text with ‘Hide Excerpts’ if it is true; before the colon…
  6. And with ‘Show Excerpts’ if it is false; after the colon. This is what would happen if the user has already clicked once to show the excerpts, and then wanted to hide them again

The Slide Toggle

Because this method is controlled by the user’s click, we can use the slideToggle function instead of two separate slide up and down functions as in method 1. The slideToggle function is aware of whether the ‘slider’ is open or closed, so our link will both open and close the paragraph view.

5
6
7

$(this).parent().find("p").slideToggle("slow"); return false;
});
});

So line by line we have:

  1. Using the object we just clicked on (see last snippet) as this we move up to our parent, which in my case is a div
  2. We then find the paragraph elements within that div. NB, if you have other paragraphs within the same parent element as your list, then you’ll need to change the "p" to include the class/id of your list
  3. Run the slideToggle function
  4. return false cancels the default browser action for clicking on a link, and instead just our jQuery runs
  5. We close off the document ready function

And that’s method 2 wrapped up!

Here’s all the jQuery for method 1 in one go:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
jQuery(document).ready(function($) {
$(".posts li a").mouseover(function() {
$(this).parent().find("p").slideDown("slow");
});
$(".posts li a").mouseout(function() {
$(this).parent().find("p").animate({opacity: 1.0}, 500).slideUp("slow");
});
});
</script>

And for method 2:

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
jQuery(document).ready(function($) {
$(".posts").before("<a class='show_excerpts' href='/'>Show Excerpts</a>");
$(".show_excerpts").click(function() {
$(this).text($(this).text() == 'Show Excerpts' ? 'Hide Excerpts' : 'Show Excerpts');
$(this).parent().find("p").slideToggle("slow"); return false;
});
});
</script>

You can either put that in your header.php, or add it into a .js file, removing the opening and closing script elements, and link to that in your header like so:

1
2

<script type='text/javascript' src='http://mysite.com/path/to/javascript/'>
</script>

Wrap Up

Would you be encouraged to click on sidebar links more if you could see an excerpt first, or do you think that if you’re hovering over it anyway, you were probably going to click, and so the excerpt serves no purpose?

In which case, would it attracted your attention more if the excerpts started showing and hiding automatically, or do you see this as a distraction from the post you’re reading?

I’d love to hear your feedback or improvements in the comments below.

Part 2 will be published soon, so subscribe to my RSS Feed to read about other ways to liven up your lists, and other WordPress tutorials too.

31 Days to Build a Better Blog Affiliate Link
Pages: 1 2

Did you enjoy this post? If you did, so might others! Please share it!

9 Comments - Add Yours!

  • Reply
    Michael Martin wrote on July 8 2009 at 5:42 pm | Permalink

    That was a great post Alex! Using Jquery to show the excerpts without wasting space is a really good idea and I love how it’s used on your site.

    Might have to implement this on Pro Blog Design as well soon! :D

    • Reply
      Alex wrote on July 9 2009 at 12:29 pm | Permalink

      @Martin – Thanks a lot! I’m glad you enjoyed it. Make sure you check back next week for the next part in the tutorial. I’ll be looking at working with category lists and a few other jQuery quick tips.

  • Reply
    Cmet wrote on July 9 2009 at 2:40 pm | Permalink

    I use Latest Posts in my sidebar but dont want the entire sidebar to become longer when hovering a title.

    Is there a way to let the excerpt appear in a bubble (“tooltup”) rather then a paragraph below the title (causing the list to become biggger, temporarily)

    Thanks in advance,

    • Reply
      Alex wrote on July 9 2009 at 2:44 pm | Permalink

      @Cmet – Absolutely, and you’ve preempted the next post on the topic! As I said in the last comment, I’m going to be looking at category lists, and I’ll show you how to use a tooltip in that post! Subscribe to my RSS to see when its available.

  • Reply
    kristian wrote on July 10 2009 at 8:53 am | Permalink

    Hey, first of all, thanks for the straight forward tutorial — its very useful.

    I’ve successfully implemented this bad boy in a site, but it is being just a tidbit buggy.

    Im using the clicked version of it, but it seems to only work on the first item on the list, and not the rest. do you have any idea why something like this would happen?

    • Reply
      Alex wrote on July 21 2009 at 4:43 pm | Permalink

      @Kristian – Firstly, sorry for the delay in replying. I’m glad you enjoyed the tutorial, my aim is always to explain everything, and not to assume too much. As for the problem you’re getting, I can only think that it must be to do with the jQuery selector and finding its parent. If getting to the parent doesn’t go high enough, then the jQuery won’t find all the elements, but just the one where you already were…if that makes any sense…?! Is it possible to see the code in action, maybe I could sort it that way? Comment back if you need any more help.

  • Reply
    Neel wrote on July 18 2009 at 11:40 am | Permalink

    Excellent tutorial.I want to use it on my blog.

    • Reply
      Alex wrote on July 18 2009 at 6:28 pm | Permalink

      @Neel – Glad you like it, the next part comes out on Monday, so be sure to check it out!

  • Reply
    kristian wrote on July 21 2009 at 6:59 pm | Permalink

    yeah, since then, i downloaded a little ebook on jQuery. it was totally a selector problem. it works fine now.

    however, i was trying to pull something a little trickier, and i was hoping you could help me with it.

    in your code, you are dynamically changing the text back and forth on open and close of the tab. I have been trying to make it toggle an image instead, like img1 on open img2 on close, etc.

    have any recommendations?

9 Trackbacks

Post a Comment

Your email is never published nor shared.

*
*
User Gravatar