Create Post Tags With CSS

In this tutorial we are going to create post tags using CSS, we will also create a WordPress widget that will allow you to display these post tags in the sidebar of your WordPress site.

The above image shows the tags we are going to create. In WordPress you can also display the amount of the posts that have these tags assigned to them, we will display this number on the right of the tag and will display the count on the hover of the tags.

View the demo to see what we are going to create.

Demo

To start with we are going to define the HTML we need to use, the tags are going to be list items inside the list items is going to be a span tag with the number of posts that have this tag assigned to them.

<ul class="posttags">
<li><a href="">Admin <span>11</span></a></li>
</ul>

There is a CSS class on the unordered list which we can use to style the child elements of the list items.

<ul class="posttags">
<li><a href="">404 <span>1</span></a></li>
<li><a href="">Admin <span>11</span></a></li>
<li><a href="">Animation <span>13</span></a></li>
<li><a href="">API <span>11</span></a></li>
<li><a href="">Border <span>3</span></a></li>
<li><a href="">box-sizing <span>1</span></a></li>
<li><a href="">CSS <span>12</span></a></li>
<li><a href="">CSS3 <span>14</span></a></li>
<li><a href="">cURL <span>3</span></a></li>
<li><a href="">Database <span>6</span></a></li>
<li><a href="">Effects <span>2</span></a></li>
<li><a href="">Element <span>3</span></a></li>
<li><a href="">Error <span>8</span></a></li>
<li><a href="">Freebies <span>8</span></a></li>
<li><a href="">Google <span>16</span></a></li>
<li><a href="">htaccess <span>10</span></a></li>
<li><a href="">HTML <span>8</span></a></li>
<li><a href="">HTML5 <span>12</span></a></li>
<li><a href="">JavaScript <span>25</span></a></li>
<li><a href="">Search <span>16</span></a></li>
<li><a href="">SEO <span>11</span></a></li>
<li><a href="">Snippet <span>6</span></a></li>
<li><a href="">Tutorial <span>11</span></a></li>
<li><a href="">Web <span>8</span></a></li>
<li><a href="">WordPress <span>27</span></a></li>
</ul>

Styling The Tags

This will create the length and background colours of the tags, there is a padding on the left of the tags which create enough room for the hole in the tag and arrow on the end.

.posttags
{
	list-style:none;
}
.posttags li
{
	background:#eee;
	border-radius: 0 20px 20px 0;
	display: block;
	height:24px;
	line-height: 24px;
	margin: 1em 0.7em;
	padding:5px 5px 5px 20px;
	position: relative;
	text-align: left;
	width:124px;
}
.posttags li a
{
	color: #56a3d5;
	display: block;
}

Using the CSS pseudo class :before we can create a new element that is styled as a triangle, this will need be positioned before the rectangle box to which creates the tag look.

.posttags li:before
{
	content:"";
	float:left;
	position:absolute;
	top:0;
	left:-17px;
	width:0;
	height:0;
	border-color:transparent #eee transparent transparent;
	border-style:solid;
	border-width:17px 17px 17px 0;
}

The below code creates the hole on the left of the tag, this will use the CSS pseudo class :after that will create new element, using the position absolute we can position this in the exact place for the hole.

.posttags li:after
{
	content:"";
	position:absolute;
	top:15px;
	left:2px;
	float:left;
	width:6px;
	height:6px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	background:#fff;
	-moz-box-shadow:-1px -1px 2px #004977;
	-webkit-box-shadow:-1px -1px 2px #004977;
	box-shadow:-1px -1px 2px #004977;
}

The span tag is used to display the count of tags assigned to a post. This post count will start off as a border of the right side of the tag and when we hover over the tag we will use CSS transitions to expand the width of the span to display the tag count.

.posttags li span {
	background: #56a3d5;
        border-color: #3591cd #318cc7 #2f86be;
        background-image: -webkit-linear-gradient(top, #6aaeda, #4298d0);
        background-image: -moz-linear-gradient(top, #6aaeda, #4298d0);
        background-image: -o-linear-gradient(top, #6aaeda, #4298d0);
        background-image: linear-gradient(to bottom, #6aaeda, #4298d0);
	border-radius: 0 20px 20px 0;
	color: transparent;
	display: inline-block;
	height:24px;
	line-height: 24px;
	padding:5px;
	width:0;
	position: absolute;
	text-align: center;
	top:-1px;
	right:0;
	-webkit-transition: width 0.3s ease-out;
	-moz-transition: width 0.3s ease-out;
	-o-transition: width 0.3s ease-out;
	transition: width 0.3s ease-out;
}
[css]
On the <a href="http://www.paulund.co.uk/link-indenting-with-css3-animation" title="Link Indenting With CSS3 Animation" target="_blank">hover event of the list item</a> we can now change the width of the span tag and the colour of the text to make it display the post count.
[css]
.posttags li:hover span{
	width:20px;
	color: #FFF;
}

View the demo to see what this will create.

Demo

Create A WordPress Widget To Display The Post Tags

The following code can be used to create a WordPress widget to display all the post tags on your WordPress site. For this widget we will use the widget boilerplate which inherits from from the WP_Widget class to easily display the widget, creates a form for the widget settings and add the stylesheet to display the post tags.

To get all the post tags for your WordPress site you need to use the WordPress function get_tags(), this will return an array of tag objects. From this object you will have access to all the data for this tag including the post count. From this tag object we have access to the tag ID, we can then use the WordPress function get_tag_link( $tagId ) to link the entire tag to the tag page.

'pu_sliding_tag_count',
				'description'	=>	__('A widget that allows you to add a widget to display sliding post tags.', 'framework')
			)
		);
	} // end constructor
	/**
	 * Adding styles
	 */
	public function add_styles()
	{
		wp_register_style( 'pu_sliding_tags', plugins_url('sliding-tag-count.css', __FILE__) );
		wp_enqueue_style('pu_sliding_tags');
	}
	/**
	 * Front-end display of widget.
	 *
	 * @see WP_Widget::widget()
	 *
	 * @param array $args     Widget arguments.
	 * @param array $instance Saved values from database.
	 */
	public function widget( $args, $instance ) {
		extract( $args );
		// Our variables from the widget settings
		$title = apply_filters('widget_title', $instance['title'] );
		// Before widget (defined by theme functions file)
		echo $before_widget;
		// Display the widget title if one was input
		if ( $title )
			echo $before_title . $title . $after_title;
		?>
<div id="sliding_tag_cloud">
<div id="sliding_tag_cloud_wrapper" class="clearfix">
				 0 )
					{
						echo '
<ul class="posttags">';
						foreach($posttags as $posttag)
						{
							echo '
<li><a>term_id).'">'.$posttag->name.' <span>'.$posttag->count.'</span></a></li>
';
						}
						echo '</ul>
';
					}
				?></div>
</div>
		 $v){
			$instance[$k] = strip_tags($v);
		}
		return $instance;
	}
	/**
	 * Create the form for the Widget admin
	 *
	 * @see WP_Widget::form()
	 *
	 * @param array $instance Previously saved values from database.
	 */
	function form( $instance ) {
		// Set up some default widget settings
		$defaults = array(
			'title' => 'Post Tags'
		);
		$instance = wp_parse_args( (array) $instance, $defaults ); ?>
		<!-- Widget Title: Text Input -->

			<label for="get_field_id( 'title' ); ?>"></label>
			<input type="text" class="widefat" id="get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" value="" />

Copy the above code into a new PHP file and place this inside your plugin folder. You will then see this new widget in your plugin screen, once this is activated you will see this new widget on the widget dashboard screen.