Use CSS to Make WordPress Tags Lowercase

WordPress When tags were introduced to WordPress, most people expected the tag names to be in lowercase. They weren't, or to be more exact, they weren't forced into lowercase. They use the same format as the category names. It's your choice. There's a problem with this, however, as I'll quickly explain.


Categories and Tags

Since WordPress uses the same tables for categories and tags, if you have a capitalized category name and decide to use it as a tag as well, the tag will be capitalized.

If you change the tag to lowercase, the category will be changed to lowercase. There doesn't seem to be a way around it. There is, but you have to step outside of WordPress itself to do it.

The CSS Solution

Every WordPress theme is different, so in order to make the change I'm going to recommend, you need to edit each page of the theme (that displays tags) and surround the tags with spans (<span> and </span>), kind of like this:

Tags: <span class="lowercase"><?php the_tags(",', '); ?></span>

Of course, your code is probably going to look different. I used the class of "lowercase" to make it easy to remember when I added it to my stylesheet, but you could do it inline as well by replacing class="lowercase" with style="text-transform: lowercase;".

Yes, text-transform: lowercase will do the trick and in the stylesheet, it can look something like this:

.lowercase {
    text-transform: lowercase;
}

Which way you do it depends on how much of a CSS purist you are.

More About Text-Transform

Unless you know what you're looking for, you may never come across this property. Here are the three ways to use it (besides "none", the default):

text-transform: capitalize; /* Each word in a text starts with a capital letter. */
text-transform: uppercase; /* Defines only capital letters. */
text-transform: lowercase; /* Defines no capital letters, only lower case letters. */

Similar Posts:

11 Comments

  1. Awesome tips, now all my tags can look the same. Yay :) Thanks!

    My latest blog post: GMail Labs Adds "Canned Responses": Save Time With FAQs

  2. Bonnie from Data Entry Company says:

    I have been putting off learning CSS. I really should do my website over with it but I have all the font codes in the html.

    Thanks.

  3. Hey, some people like their tags in all caps ;)

    My latest blog post: Staph Infection: What is MRSA?

  4. daniel from glow in the dark contacts says:

    Thanks RT. I have been using WP on most of my sites, and this problem hadn't even crossed my mind.

    My latest blog post: Glow in the dark contact lenses

  5. Coins from Anime Updates says:

    Thanks for the tip, I started my blog not too long ago and have been trying to figure out how to make it do exactly that. Never knew CSS had that function =)

  6. steve from Trade Show Guru says:

    hi RT,
    I'm bookmarking this post (along with other posts you've done on blogging). I intend to implement tags on my new WordPress blog pretty soon, and then I'm sure I'll need to come back and read this post again. BTW, thanks again for the suggestion on getting the post text to wrap around the opening image. ~ Steve (aka The Trade Show Guru), and a noble UV minion

    My latest blog post: Trade Show Planning – Choosing the Right Trade Show

  7. Rodney from Blogging with WordPress says:

    Hmm, that explains it – I've noticed this sort of thing before on my blog, but just assumed I'd typed the category / tag wrong and made a mental note to go back and fix it sometime.

    My latest blog post: How I increased my Alexa Rank by 2k percent

  8. John from CSS Designs for Free says:

    Great tip, I saw the same thing you did and found it annoying. I figured WP would get around to fixing it so you could have tags and categories with different capitalizations – and so I didn't even think of just using CSS.

    My latest blog post: Eurodance – a free CSS template to downnload!

  9. james from car contract hire says:

    Thats a really great little trick, theres a lot more you can do with css than people realise

  10. Rik from Web Design Manchester says:

    Nice little tip. Using CSS there's so much control you can have over text. Even capitalizing the first letter of every word, which one of my colleagues was very surprised to hear the other day!

Leave a Reply

CommentLuv Enabled

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.

Anti-Spam Protection by WP-SpamFree