Create Elegant Tags With Sliding Post Count For WordPress

Posted in , , • 555 days ago • Written by • 16 Comments

Tired of the boring category style being always same, like a mini menu? Tired of items arranged horizontally or vertically, styled always the same way? Yes, I’m tired of it too. So let’s make things more interesting now.

Our starting point will be a cool sliding tags design made by Thomas Bosée. Then we’ll learn how to use WordPress wp_list_categories function, how to edit its result, how to code CSS and finally a little of jQuery “Black Magic”.

So, let’s rock!

Demo first, please

So our goal is to achieve the effect seen on this demo. As usual you can download our sample files and edit as you want!

Create Elegant Tags With Sliding Post Count For WordPress

Wp_list_categories()

Wp_list_categories is a function that gets all categories and has a few useful parameters. We’ll be using a few of them:

  • echo – whether the results should or shouldn’t be displayed. This is quite useful because we’ll have to adjust results a little bit
  • show_count – this one toggles the display of current post count in each category
  • title_li – since the default value is a big <h2>Categories</h2> we’ll change it
  • depth – It’ll be better not to have children categories this time. But if you want it just put it as zero and change ‘hierarchical’ to false

Our php will be like this:

<ul>
<?php
	$args = array (
		'echo' => 0,
		'show_count' => 1,
		'title_li' => '',
		'depth' => 1
	);
	$variable = wp_list_categories($args);
	echo $variable;
?>
</ul>

And this PHP outputs this HTML:

<ul id="category">
	<li class="cat-item cat-item-8"><a href="#design">design</a> (17)</li>
	<li class="cat-item cat-item-6"><a href="#icon">icon</a> (9)</li>
	<li class="cat-item cat-item-7"><a href="#grid">grid</a> (3)</li>
	<li class="cat-item cat-item-9"><a href="#clean">clean</a> (25)</li>
	<li class="cat-item cat-item-1"><a href="#typography">typography</a> (8)</li>
	<li class="cat-item cat-item-5"><a href="#minimal">minimal</a> (12)</li>
	<li class="cat-item cat-item-5"><a href="#illustration">illustration</a> (1)</li>
	<li class="cat-item cat-item-5"><a href="#high-resolution">high resolution</a> (6)</li>
	<li class="cat-item cat-item-5"><a href="#iphone">iphone</a> (15)</li>
	<li class="cat-item cat-item-5"><a href="#interface">interface</a> (21)</li>
	<li class="cat-item cat-item-5"><a href="#grunge">grunge</a> (10)</li>
</ul>

Oops, HTML is not quite right yet

As you may notice, the default post count is simple text with parenthesis. Well, in our original design we have count as a separate element, so we’ll need to change this default behavior. A simple way of doing this is with str_replace, we’ll search for “(“, replace with “<span>” and then search for “)” e replace with “</span>”.

This is how your category listing function will be:

<ul>
<?php
	$args = array (
		'echo' => 0,
		'show_count' => 1,
		'title_li' => '',
		'depth' => 1
	);
	$variable = wp_list_categories($args);
	$variable = str_replace ( "(" , "<span>", $variable );
	$variable = str_replace ( ")" , "</span>", $variable );
	echo $variable;
?>
</ul>

And now we’ll have right HTML, as follows:

<ul id="category">
	<li class="cat-item cat-item-8"><a href="#design">design</a> <span>17</span></li>
	<li class="cat-item cat-item-6"><a href="#icon">icon</a> <span>9</span></li>
	<li class="cat-item cat-item-7"><a href="#grid">grid</a> <span>3</span></li>
	<li class="cat-item cat-item-9"><a href="#clean">clean</a> <span>25</span></li>
	<li class="cat-item cat-item-1"><a href="#typography">typography</a> <span>8</span></li>
	<li class="cat-item cat-item-5"><a href="#minimal">minimal</a> <span>12</span></li>
	<li class="cat-item cat-item-5"><a href="#illustration">illustration</a> <span>1</span></li>
	<li class="cat-item cat-item-5"><a href="#high-resolution">high resolution</a> <span>6</span></li>
	<li class="cat-item cat-item-5"><a href="#iphone">iphone</a> <span>15</span></li>
	<li class="cat-item cat-item-5"><a href="#interface">interface</a> <span>21</span></li>
	<li class="cat-item cat-item-5"><a href="#grunge">grunge</a> <span>10</span></li>
</ul>

CSS, CSS, CSS

(A.K.A. CSS3. Yeah, a really bad joke)

Now we’ll do this with a few cool CSS3 implementations. This is what will help us:

  • Before and after pseudo elements – instead of putting a lot of additional spans we’ll just use them to create pretty effects
  • Border-radius - we’ll need slightly rounded corners
  • Content - this CSS property will be especially useful because we’ll insert an image as content of before count and after count
  • Element positioning - we’ll have to be aware of positioning since before and after have to always be with our main span element

Let’s go step by step. Basic CSS for background and main div positioning. Nothing really major in here:

body {
	background: url(bg.png);
}
	#container {
		position: relative;
		width: 500px;
		margin: 50px auto 0;
		padding: 10px 0 20px;
	}

With #category and li rules we’ll achieve that side-by-side listing.

#category {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
}
	#category li {
		float: left;
		position: relative;
		padding: 0 10px;
		margin: 0 15px 10px 0;
	}

Our link styling will create that “white” part of our little tag. Background is a 1px wide soft gradient:

#category li a {
	float: left;
	padding: 4px 10px 0;
	height: 18px;
	font-family: "arial";
	font-size: 10px;
	color: #3f3f3f;
	text-decoration: none;
	border-top: 1px solid #d3d0cf;
	border-left: 1px solid #cac7c7;
	border-bottom: 1px solid #aeadad;
	background: url(bgTag.png) repeat-x;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

Now we need to create the orange part of our tag. Since we’ll animate just the “middle”, we’ll have to do it in a way that our before and after elements will be “inside” of span but will go to right / left as our main element expands. So this will do the trick:

#category li span {
	position: relative;
	float: left;
	width: 35px;
	padding: 5px 0 0;
	margin-top: 1px;
	height: 18px;
	font-family: "arial";
	font-size: 10px;
	color: #3f3f3f;
	text-align: center;
	background: url(bgCount.png);
	overflow: hidden;
}
	#category li span:before, #category li span:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 3px;
		height: 30px;
		content: url(bgBeforeCount.png);
		overflow: hidden;
	}
	#category li span:after {
		left: auto;
		right: 0;
		content: url(bgAfterCount.png);
	}

jQuery Black Magic

First of all, we need to include jQuery, right? So we’ll do it with a really cool technique that I’ve seen at jQuery boilerplate:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<script type="text/javascript">window.jQuery || document.write("\x3Cscript src='js/jquery-1.7.1.min.js' type='text/javascript'>\x3C/script>")</script>

We’ll try to get it from Google. Since almost everybody visits Google often we have a good chance of getting this right from the users cache. But if for any crazy reason Google is down (for instance, if we have been hit by a giant meteor just like our dino friends) it’ll get jQuery from our local file :)

Now we need to show / hide post counts when hovering over them, so our basic logic will be:

FIND all "#category span" tags
	animate their width to 0px
FIND all "#category li" tags
	WHEN mouseenter
		animate this.children("span") width to 35px
	WHEN mouseleave
		animate this.children("span") width to 0px

When translating this to jQuery what you need to be aware of is:

  • When you animate item to zero jQuery will add ‘display: none’ to it (will hide our before and after tags), so we’ll animate it to 5px instead
  • You have to chain selectors to get better performance, so we’ll find #category, then get each span, then go up a level (to li’s)
  • When you animate several elements it’s good to “stop” them before animating so we won’t have a lot of “dancing” tags if user moves randomly mouse over elements

Our final jQuery code will be this crazy thing:

$(function(){
	$("#category")
		.find("span")
		.each(function(){
			$(this).animate({"width": "5px"});
		})
		.parent()
		.hover(
			function(){
				$(this).find("span").stop().animate({"width": "35px"});
			}, function() {
				$(this).find("span").stop().animate({"width": "5px"});
			}
		);
});

So, what do you think?

Hope you enjoyed reading. Don’t be shy and share your thoughts with us!

Join over 55,891 Subscribers Today! FREE UPDATES!

Get The Only Freelancer crash course you will ever need to read!

43 Written Articles • • Website • Google+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

16 Comments Best Comments First
  • Angus Pearson

    Friday, December 16th, 2011 12:35

    1

    Love that JQuery pikie, going to use that from now on! Nice effect on the tags.

    0
    • Rochester Oliveira

      Monday, January 2nd, 2012 19:02

      8

      Thanks Angus :)

      I’m glad you liked it, and hope to see you again soon!

      []‘s

      0
  • Jaafar

    Monday, January 2nd, 2012 08:22

    7

    Thanks very mutch for this useful article

    0
    • Rochester Oliveira

      Monday, January 9th, 2012 03:59

      12

      Hi Jaafar,

      I’m glad you liked!

      Keep coming, we’ve much more like this to go!

      []‘s

      0
  • Audee

    Tuesday, December 27th, 2011 14:13

    2

    I really love the sliding effect. I wonder if this technique can also be applied to WordPress Tag?
    Going to bookmark it for future usage ;) Thanks!

    0
  • cct

    Wednesday, December 28th, 2011 11:38

    3

    Why not click on the demo and download Where can I download?

    0
  • Rochester Oliveira

    Wednesday, February 22nd, 2012 22:13

    16

    Hi santhosh,

    Thanks! We’ll be doing that :)

    []‘s

    0
  • AJ

    Sunday, January 15th, 2012 00:46

    14

    Hey Rochester,

    I love this elegant tag script you have, and I would to have this on my website,
    but please can you give me step by step guide how to do this?

    I mean, I downloaded all the files, but when I put the “wordpress-sliding-category” map in the plugins folder
    the “elegant tag” plugin does not appear in my wp-admin plugin section.
    I want this elegant tags in the bottom of my page, now I know how to create and edit things, and create widget etc
    but which code do I have to implement? and where do I have to upload this “wordpress-sliding-category” folder?

    Thanks in advice,
    Great blog you have,
    PS, sry for my poor English ;)
    Best regards,

    AJ

    0
    • Rochester Oliveira

      Monday, January 16th, 2012 18:35

      15

      Hi AJ!

      Actually it’s not as a plugin right now, but it is easy to adjust it! Mail me and I’ll help you :) (rochesterj [at] gmail dot com)

      []‘s

      0
  • tauqueer

    Sunday, January 8th, 2012 20:02

    11

    loved it, appreciate your work mate.

    0
    • Rochester Oliveira

      Monday, January 9th, 2012 04:00

      13

      Hey tauqueer,

      Thanks a lot! I’ve worked hard on it actually :)

      []‘s

      0
  • Rochester Oliveira

    Wednesday, February 22nd, 2012 22:13

    16

    Hi santhosh,

    Thanks! We’ll be doing that :)

    []‘s

    0
  • AJ

    Sunday, January 15th, 2012 00:46

    14

    Hey Rochester,

    I love this elegant tag script you have, and I would to have this on my website,
    but please can you give me step by step guide how to do this?

    I mean, I downloaded all the files, but when I put the “wordpress-sliding-category” map in the plugins folder
    the “elegant tag” plugin does not appear in my wp-admin plugin section.
    I want this elegant tags in the bottom of my page, now I know how to create and edit things, and create widget etc
    but which code do I have to implement? and where do I have to upload this “wordpress-sliding-category” folder?

    Thanks in advice,
    Great blog you have,
    PS, sry for my poor English ;)
    Best regards,

    AJ

    0
    • Rochester Oliveira

      Monday, January 16th, 2012 18:35

      15

      Hi AJ!

      Actually it’s not as a plugin right now, but it is easy to adjust it! Mail me and I’ll help you :) (rochesterj [at] gmail dot com)

      []‘s

      0
  • tauqueer

    Sunday, January 8th, 2012 20:02

    11

    loved it, appreciate your work mate.

    0
    • Rochester Oliveira

      Monday, January 9th, 2012 04:00

      13

      Hey tauqueer,

      Thanks a lot! I’ve worked hard on it actually :)

      []‘s

      0
  • Jaafar

    Monday, January 2nd, 2012 08:22

    7

    Thanks very mutch for this useful article

    0
    • Rochester Oliveira

      Monday, January 9th, 2012 03:59

      12

      Hi Jaafar,

      I’m glad you liked!

      Keep coming, we’ve much more like this to go!

      []‘s

      0
  • cct

    Wednesday, December 28th, 2011 11:38

    3

    Why not click on the demo and download Where can I download?

    0
  • Audee

    Tuesday, December 27th, 2011 14:13

    2

    I really love the sliding effect. I wonder if this technique can also be applied to WordPress Tag?
    Going to bookmark it for future usage ;) Thanks!

    0
  • Angus Pearson

    Friday, December 16th, 2011 12:35

    1

    Love that JQuery pikie, going to use that from now on! Nice effect on the tags.

    0
    • Rochester Oliveira

      Monday, January 2nd, 2012 19:02

      8

      Thanks Angus :)

      I’m glad you liked it, and hope to see you again soon!

      []‘s

      0

Comments are closed.

x

Do You Know How To Freelance And Get More Clients?

E-Book

If not, then it's time to learn how to:

  • Start as web design freelancer for dream lifestyle!
  • Design beautiful designs your clients will love!
  • Get your first clients and get more clients!

You can trust 1stWebDesigner to help you become a better web designer!

- Jacob Cass | Just Creative

Just enter your name and email below and click Get Updates!

unknown - unknown - US