benkaminski.com


Change or edit “post tags” appearance in WordPress

Change or edit “post tags” appearance in WordPress


  benkaminski.com

November 19th, 2010

1 comment Leave A Comment


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:
post tags before CSS modifications

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
post-tags appearance after CSS modifications are applied

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This article currently has one comment.

This worked really well. Thanks very much for sharing. It’s really good to see someone explain it so well for those of us who are still novices.

Related Topics: , , , , , , , , , , , , , , ,