Epic Alex | WordPress Tutorials

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

As promised, the second instalment of my jQuery tutorials. We’ll look at one main idea using categories, and how to dynamically display its category in a tooltip. We’ll also look at some quicker and simpler tips to liven things up as well.

For those of you that missed the first post, we looked at quite an involved method of displaying post excerpts using jQuery so as not to waste space. In this article, we’ll again carry on the same theory, and display a category’s description in a tooltip. For demos of the tooltip, list item count and hover fade, you can visit my test site.

wp_list_categories

First of all, we need to make sure that we are displaying the list of categories in the right way. Wp_list_categories takes a lot of different arguments, and the one that we need to make sure is set is the use_desc_for_title argument. While the default action is to display the category’s description as the title of the link, we need to make sure our theme doesn’t turn that feature off.

1

<?php wp_list_categories('depth=1&title_li='); ?>

1. For purposes of simplicity, we’ll only show parent categories using depth=1
2. And we won’t output a title

Creating the tooltip

The tooltip works by adding a div and a p to contain our category descriptions. We use these two so that two images can be used in the background as sprites, so they can adjust depending on the length of our description. However, for the purposes of the tutorial, we’ll just be using background colours.

1

$("ul li.cat-item").append("<div><p></p></div>");

Quite simply, this adds a div and a p to the end of each list element in our category list.

Initiating the tooltip and getting the description

We want the tooltip to show when we hover over a category link, however, the default browser behaviour here though is to show the title in a pop-up, so we need to cancel that.

2
3
4

$("ul li.cat-item a").hover(function() {
	var title = $(this).attr("title");
	$(this).attr("title", "");

1. We start by setting up our hover function, which saves us a mouseover and mouseout like in the last tutorial.
2. We store the title attribute to the title variable, using this so we make sure we get the title of the active a. Remember that the title has been set to show the category description.
3. Now that the title is stored in a variable, we can set the title to nothing using attr, so that the default browser pop-up isn’t shown.

Adding the title to the tooltip

5

	$(this).parent().find("p").text(title);

Because we are currently ‘inside’ the anchor element, we need to go up to its parent (the li), and then find the p within, using .text to insert our title variable into the paragraph tag.

Animating the tooltip

5
6
7
8

		$(this).parent().find("div").stop().animate({left: "140px", opacity:1}, "slow").css("display","block")
	}, function() {
		$(this).parent().find("div").stop().animate({left: "120px", opacity: 0}, "slow")
});

1. Because the div contains our p, this is what we need to ’slide out’.
2. We use .stop so that when the mouse quickly flits over the links, the tooltips don’t come out.
3. We then use .animate to change the CSS properties of the div at a ’slow’ speed.
4. Finally we change the CSS of our div by using .css from none (see below) to block.
5. The second function after the comma just undoes all of this so that everything is back to normal when the mouse moves away.

Styling the tooltip

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

li.cat-item {
	position: relative;
}
li.cat-item div {
	display: none;
	position: absolute;
	top: 2px;
	left: 110px;
	width: 225px;
	background: #333333;
}
li.cat-item div p {
	margin: 7px 0;
	padding: 0 5px 0 10px;
	background: #333333;
	color: #FFFFFF;
}

The CSS is fairly explanatory, just take note of the relative and absolute positionnings.

All of that javascript together:

1
2
3
4
5
6
7
8
9

$("ul li.cat-item").append("<div><p></p></div>");
$("ul li.cat-item a").hover(function() {
	var title = $(this).attr("title");
	$(this).attr("title", "");
	$(this).parent().find("p").text(title);
		$(this).parent().find("div").stop().animate({left: "140px", opacity:1}, "slow").css("display","block")
	}, function() {
		$(this).parent().find("div").stop().animate({left: "120px", opacity: 0}, "slow")
});

Fade links not hovered

To take the focus away from the link that is being hovered, we can fade all other links by using the :not selector.

1
2

$("ul li a").hover(function() {
	$(this).stop().addClass("solid");

1. So that we can test what is ‘not’ something, we first of all need to assign a class to the link we are hovering over.
2. Again we use the stop function so that a quick mouse moving down the page won’t activate all the effects.

3
4
5
6
7

	$("ul li a:not(.solid)").stop().animate({opacity: 0.5}, "fast");
}, function() {
	$(this).stop().removeClass("solid");
	$("ul li a:not(.solid)").stop().animate({opacity: 1}, "fast");
});

1. Now we can see if this, ie the link has the class solid.
2. If it does NOT have the class, then we can animate it, and change its opacity to 0.5.
3. After the comma, the function we use just undoes the process so that everything is back to normal.

And all that code in one block:

1
2
3
4
5
6
7

$("ul li a").hover(function() {
	$(this).stop().addClass("solid");
	$("ul li a:not(.solid)").stop().animate({opacity: 0.5}, "fast");
}, function() {
	$(this).stop().removeClass("solid");
	$("ul li a:not(.solid)").stop().animate({opacity: 1}, "fast");
});

Giving alternate links a different color

While this can easily be achieved in PHP, with certain WordPress functions, such as wp_list_categories, it’s easier to add the classes with jQuery.

1
2

$("ul li:even").addClass("even");
$("ul li:odd").addClass("odd");

The :even and : odd selectors perform this very easily. We can now style these links easily.

1
2
3
4
5
6
7
8

.even {
	background: #FFFFFF;
	color: #CCCCCC;
}
.odd { 
	background: #CCCCCC;
 	color: #FFFFFF;
}

Counting list items

While in this instance, this may not have any direct application, there are many cases where this would be useful. For example, anywhere where you don’t know how many links will show up.

1
2

var catcount = $(".cat-item").length();
$(".cat-item").parent().before("<p>There are " + catcount + " categories in this list</p>")

1. We create a variable called catcount, and use the ambiguously named .length function to count how many .cat-items are found.
2. Now we go up to the parent of the list elements, ie ul, and place a paragraph .before it.
3. Inside that paragrapgh we add in our variable to show how many categories there are in our list.

And there we go! A very nice tooltip without using a plugin, and a few quick tips to improve your lists, with endless applications.

I hope you’ve enjoyed looking at a few more ways of using jQuery with WordPress’ built in features, I’ve got more on the way! Any questions and feedback are welcomed in the comments!