As many of you WordPress users and developers out there may have noticed, post tags, categories and the like are a huge attribute to the success of WordPress and it’s great communication with the search engines. You can tag your posts with relevant data or keywords that pertain to your specific post and these tags are indexed by the search engines. This makes it easier to attract traffic to your site and so on and so forth.

I will not waste anyone’s time by elaborating on the already obvious benefits of using WordPress. Although, the appearance of the Post-Tags on the pages may have an undesirable affect on your website users. In most cases, they are a rather large font size, bold, and eye catching. Some people see this as annoying or as an eye-sore, so I sought out a solution to be able to edit the post tags appearance on the pages in which they are contained without removing them completely from the page and defeating their purpose.

All you need is a basic understanding of CSS to follow this tutorial and I will explain it the best I possibly can, so lets get started…

First things first:
You will need access to an FTP client or you can use the “Editor” in WordPress under the “Appearance” tab. Either way you choose, find the “style.css” file and open it in your editor of choice. If you have the ability to search for terms in your editor, search for *”post-meta” as this is the key element in the appearance of the tags and other meta-data for each post. I can’t give a specific line number as it will differ from theme to theme. So, should you not be able to search automatically, you will have to find the “post-meta” category by scanning over the “style.css” page. You will find it, it’s definitely there.

(**PLEASE NOTE: “post-meta” is theme specific, it may also appear as “PostFooterIcons” or another custom function name. The easiest thing to do if this becomes a problem for you would be to download the Firefox web browser and get the “FireBug” add-on) This way you can easily locate the CSS that is being referenced in the theme that you are using. It’s as simple as highlighting your tags and right clicking “inspect element” and there you have it)

Example of tags before editing:

Anyhow, here is how most of the pre-configured “post-meta” CSS definitions will look:

/***** Post Meta ********************/
.post-meta  {
	font-size: 12px;
	text-transform: uppercase;
	margin: 0;
	padding: 5px 0 0 0;
	border-top: 1px solid #DDDDDD;
        clear: both;
}

As you can see, the font size itself is already set to 12 pixels. This (at least to me) is too large for post meta-data. I believe that post-tags should be subtle and unobtrusive on the end user. They need to appear on the page to be able to reap the benefits of them, but let’s make it a little less noticeable on the end user.

So, two things we want to change right off the bat here. Font size and text-transform. See below:

/***** Post Meta ********************/
.post-meta  {
 font-size: 6px; /* here I changed the font
 from 12px down to 6px which will be almost unreadable*/

 text-transform: none;  /* here I changed the text
-transform from "uppercase" to "none" this will also
 decrease the overall font size*/

 color: #CCCCCC /* I chose #CCCCCC because it matches
 the background of the page itself.  This helps hide the
 tags even more.  You don't have to make them completely
 invisible and feel free to mess around with other
 hexadecimal color combos to suit your needs*/

margin: 0;
padding: 5px 0 0 0;
border-top: 1px solid #DDDDDD;
clear: both;
}

So, after you apply this to your CSS, save the file and refresh the page that has your post-tags on it and you will see how drastic of a change this will produce. Although there is still one problem. The post-tags are links, therefore they will inherit any link settings from the CSS that are already configured. Meaning that in most cases, they will be a bright link color (usually blue) and in some cases they will be underlined or have other link effects applied to them in the CSS.

The way to overcome this and to further stealth the post-tags is to add the following right under the CSS we just edited:

.post-meta a {  /* by adding the "a" after ".post-meta"
 means that these settings will apply to all links that
 are contained within the ".post-meta" setting.*/
 font-size: 6px;
 color: #CCCCCC;
}

So, what I did there was make it so that the links are the same color and size as the modification that I made above.
The final CSS code should look like this:

/***** Post Meta ********************/

.post-meta  {
	font-size: 6px;
	color: #CCCCCC;
	text-transform: none;
	margin: 0;
	padding: 5px 0 0 0;
	border-top: 1px solid #DDDDDD;
        clear: both;
	}
.post-meta a {
	font-size: 6px;
	color: #CCCCCC;
}

Example of post-tags after editing CSS

Hopefully this tutorial will help you solve this issue. I had searched for a solution for a while and was unable to find one. If you are familiar with CSS there are many more options that you can apply to your post-meta CSS definitions, but this should at least get you going in the right direction.

Please comment with any questions or let me know if this worked (or didn’t) for you.