Styling the_tags in WordPress
Awhile back, I was inspired by the beautiful work of Orman Clark over at Premium Pixels.
Personally, I prefer Fireworks over Photoshop for Web design, but every once in awhile, I see people doing things in Photoshop that really challenges me to attempt the same effect in Fireworks (especially when I can apply it to WordPress).
Below is a quick tutorial on how you can get your WordPress tags to look like this.
Demo | Download Source Files
I've also included the layered Fireworks source PNG for download.
These icons are 100% scalable vector, so you can modify them as you wish.
When I began to style the tags in WordPress, I ran into a problem; I needed to change the markup because the the_tags() function of WordPress allows only a few (very basic) parameters; none of which apply to additional stying:
<?php the_tags('Tags:', ', ', '<br />'); ?>
Which simply outputs:
<a rel="tag" href="http://dev.simplethemes.com/tag/theme">theme</a>
But I needed something more along the lines of this:
<span class="st_tag"><a rel="tag" href="http://dev.simplethemes.com/tag/theme">theme</a></span>
By using this in your WordPress Theme, we can now select the element with some very simple jQuery.
<?php if (get_the_tags()) :?> <p class="tags">Tags: <?php the_tags('', ' ', ''); ?></p> <?php endif;?>
We want to wrap the tag in s span, so here's jQuery's wrap() function to the rescue: http://api.jquery.com/wrap/
$('p.tags a').wrap('')
So now, our markup looks like this:
<span class="st_tag"><a rel="tag" href="http://dev.simplethemes.com/tag/theme">theme</a></span>
Now, with a little CSS, we can finally style the tags:
/* Tag Styles */ p.tags { font: bold 13px/26px sans-serif; } p.tags span.st_tag { padding: 0px 0px 0px 20px; margin: 0; background: url(./images/tag_bg_l.png) no-repeat left center; display: inline-block; } p.tags span.st_tag a { text-decoration: none; text-shadow: #f4f4f4 1px 1px 1px; padding: 0px 10px 0px 2px; background: url(./images/tag_bg_r.png) no-repeat right center; display: inline-block; } p.tags span.st_tag a:hover { color: #333; }