Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 12 2011

10:00

Create Elegant Tags With Sliding Post Count For WordPress

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!

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("
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...