Skeletize, Nakedize, Visualize and Sexydize Your Tag Display

9 Comments

Mac users always boast about the cool, sleek and sexy UI of OS X, Applications and everything else on their computers. Well, this is not limited to just one platform if you’re on the web. Everybody can design, display whatever they like in whichever way they feel best.



As you can see in the images, anybody who’s used some of the Mac apps like Marsedit and Things would know how sleek the tags look. They’re enclosed by a smooth roundish cornered backdrop of background and border. Why not have that same sexy “tags” display for your WordPress powered blog(s)?

Skeletize, Nakedize

The detault the_tags code of WordPress will either display the tags in a raw format or in a list or other HTML enclosed format with a separator of your choice. There isn’t much more than that for you to style your “tags” display. Fortunately, the “not-so-documented” syntax of WordPress can be used in combination and permutation with each other to have a more advanced HTML enclosed codes for your tags so you can style it much better.

While a typical the_tags(‘before’, ‘separator’, ‘after’) spits out:

<ul>
<li><a href="#" rel="tag">tag one</a></li>
<li><a href="#" rel="tag">tag two</a></li>
<li><a href="#" rel="tag">tag three</a></li>
</ul>

Breaking up the tags a little further can spit out additional HTML:

<?php
$theTags = get_the_tag_list('<ul><li>','</li><li>','</li></ul>');
$theTags = preg_replace('%<a ([^>]+)>%U','<a $1><span>', $theTags);
$theTags = str_replace('</a>','</span></a>', $theTags);
echo $theTags;
?>

Ok, so what happened with the above codes?

We rewrote the available tags and inserted an HTML code <span>, so we can add an additional style to a <span> inside the <li>. This will get us the following output:

<ul>
<li><a href="#" rel="tag"><span>tag one</a></span></li>
<li><a href="#" rel="tag"><span>tag two</a></span></li>
<li><a href="#" rel="tag"><span>tag three</a></span></li>
</ul>

Visualize

Now, let’s visualize how we will attain the above image for our tags.

With the additional <span> we should now be even able to style the actual text of the tag. Open your favorite image editing software and create the image to use as the smooth rounded corner backdrop for your tags. Once the image is ready, slice them into two parts — a left and a right section (see we have to take care of both short and loooong tags).

Below is an example of the left and right section images for a tag:

Sexydize

This section will tend to be a bit technical and one should be able to insert them right away or modify to one’s requirements. I assume that the tags are enclosed in a <div> called “post-tags”, thus making it easier to treat the tags separately from other design elements.

div#post-tags { margin: 10px 0; } /* just beautification */
div#post-tags ul { margin:0; padding:0; }

div#post-tags li {
list-style-type: none;
display: inline;
line-height: 12px;
text-transform: lowercase;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: x-small;
margin: 0;
padding: 0;
}

div#post-tags li a {
background: url(tags-l.gif) no-repeat left top; /* set the correct image url */
float: left;
text-decoration: none;
margin: 3px 5px;
padding: 0 0 0 6px;
}

div#post-tags li a span {
display: block;
background: url(tags-r.gif) no-repeat right top; /* set the correct image url */
float: none;
color: #036;
padding: 2px 12px 2px 6px;
}

div#post-tags span.theTags {
background: url(tags-l.gif) left top no-repeat;
margin: 10px;
padding: 0 0 0 20px;
}

div#post-tags span.theTags a {
text-transform: lowercase;
font-size: x-small;
text-decoration: none;
color: #000;
display: block;
float: left;
}

Tips: You might need to:

* The font-size, family and line-height are related to each other, so if they don’t display as well on your site, tweak with their values.

* You might want to add an additional color for both hyperlinks and hover to cater to the design of your tag background image.

A working demo is available on all posts at Brajeshwar (click any article/post to view the tags). While you’re at it, you might like to try TagThis WordPress Plugin.

9 thoughts on “Skeletize, Nakedize, Visualize and Sexydize Your Tag Display

  1. Pingback: Tags layout · Bakkel dot com

  2. Looks nice. One question, though: what happens when a tag wraps around to the next line? Most likely, the background will be split too, so either it looks like you have two separate tags, or it looks like a turd =]

    While you’re at it with replacing stuff, you might want to replace spaces into &nbsp;’s too, to prevent multi-word tags from getting split across lines.

  3. fine article, better you write:

    “This will get us the following output:
    <li><a href=”#” rel=”tag”><span>tag one</span></a></li>”

    sorry 😉

  4. I’m not getting why those tags are so sleek. I guess part of me just thinks that web 2.0 looks begins to look old after a while. It’s too much the same. That’s from a newbie in 2.0 design.

  5. Hi there,
    Know anyone which plugin to use if I want only the first part (first paragraph) of the article to be displayed? If someone want to read more there will be a “read more” link…
    On my blog right now is displayed all of article content and I don’t want this…
    I’m talking about the latest 10 articles displayed on the first page of my blog.
    I’m using WordPress.
    Can anyone help?

Comments are closed.