Getting rid of those "posted in" links on WordPress.comI think WordPress.com is by far the best free blogging tool out there, but it has one glaring problem. At the bottom of each post, it puts a link to the categories the post is filed under.
This sounds great, but it’s not. People follow these links, expecting to read more posts on the topic on your blog. But you end up sending people to a random page of vaguely related posts by hundreds of other WordPress.com bloggers.

[This was originally posted at the real “Blogging for People Who Should” blog here – it’s a standalone WordPress blog, and it’s kept more up to date]

Blogger does a similar trick with their Next Blog ‘feature’ – I explained how to deal with that glitch here. Here are two ways to avoid this problem on WordPress.com

How to remove or disable the ‘tag’ links on WordPress.com

There are two ways to work around this ‘feature’, a non-technical solution that anyone can do, and a technical (CSS) solution.

Non-technical fix: Use Unique Tags For Your Posts

The trick here is to tag and categorize your posts with labels that are unique to your blog. Since the aggregator page is only displaying posts that have the exact same tag, it is much more likely to only include your posts. This gives readers what they want – more of your posts on the topic – when they click on tags.

How To:
1. Choose a set of tags unique to your blog
Tag and categorize your posts with a tag that no one else on WordPress.com is going to use, but is still somewhat readable. In essence, it’s going to be a bit of gibberish with some readable elements.

For example, if you are writing about blogging, instead of using tags or categories like ‘wordpress‘ when writing about the software, put a unique tag that only you will use, like ‘myblogname-wordpress

There are two drawbacks to this method. First is that your readers may be slightly confused by your use of labels for your posts. The second drawback is that you’re not likely to get traffic from those WordPress.com aggregator pages.

Unfortunately, for most free WordPress.com themes, this is the only available option.

Technical fix: Use CSS to hide the categories link

In this fix, you are hiding the category links from your readers, using Cascading Style Sheets. CSS, as it’s known, is a basic script that is used by your WordPress.com blog to determine how each element of your site looks to readers: color, font, background.

We’re going to use CSS to hide the links on the bottom of blog posts. Your blog posts will still be organized under your defined categories, available as a widget on your sidebar. Only those misleading links under your posts – the ones that lead readers to a mega page they didn’t want – will be removed.

Unfortunately, you can’t use this fix with all the free themes on WordPress.com. On top of this, you’ll need a bit of technical understanding of CSS (thankfully, not too much) AND you’ll have to give WordPress.com $15 a year for the privilege of editing the CSS on your blog. If all this sounds reasonable, read on!

How To:

1. Find out if you can use this method with your theme

Of the top ten most popular themes on WordPress.com, only Twenty Ten and Coraline allow you to hide the category links at the end of posts using CSS.

Here are the ten most popular free themes on WordPress.com, and whether they can use this method or not:

NO

YES

Kubrick Twenty Ten
Misty Look Coraline
Chaotic Sould
Ocean Mist
Freshy
Black-LetterHead
Greyzed
Motion

2. If you don’t use Twenty Ten or Coraline or a top ten popular them for your blog, find out if your theme can use this method

CSS works by assigning each element on your site a class, and then describing how that element will look. You need to find out how your specific theme ‘classifies’ the category links.

If your theme has a separate CSS class for the category links, you simply edit the relevant CSS class and hide those particular links. If your theme bundles a other page elements – like date published, author, tags – together in the same class as the category links, you’re likely out of luck, unless you want to hide all those page elements along with the categories.

You will have to learn how to find out how your theme classifies your category links. If you are entirely new to CSS, that’s a bit too much to cover in this post, but a great place to start is by installing the free Firebug plugin for Firefox and following this tutorial. WordPress.com also has some good resources for learning how to edit CSS. If you’re familiar with CSS, you likely know how to find the relevant classes to edit.

I found that most themes use the class ‘postmetadata’ for ALL the links describing the post – so this method won’t work unless you want to hide ALL the information describing your posts – author, date, tags, etc.

On the other hand, I found that the themes that allowed you to edit just your category links had a class in the CSS file named “cat-links”. For example, Twenty Ten and Coraline both use this class in their style sheets.

Take note of how your theme classifies the category links (and if you’re feeling helpful, add it in the comments below!)

3. Upgrade (ie. pay!) to edit your blog’s CSS
For $15 a year, WordPress.com enables you to edit your CSS file, meaning that you can make your blog look any way you want. For now, we’ll just make those pesky links disappear.

Swallow the expense and upgrade your account. Go to ‘Upgrades’ in the top left of your Dashboard, then get the ‘Custom CSS’ upgrade.

4. Hide the links in your style sheet using ‘visibility: hidden’

Once you have upgraded your account to allow you to edit your theme’s CSS file, go to Appearance > Edit CSS in your sidebar.
You will end up at http://yourblogname.wordpress.com/wp-admin/themes.php?page=editcss

Then you simple add 3 lines to your stylesheet. If you are using Twenty Ten or Coraline, the line you would add is as follows:

.cat-links {
visibility: hidden;
}

This means the CSS class ‘cat-links’, which determines how your category links appear has it’s visibility set to ‘hidden’. It means those links are now hidden. This blog, using the Notepad theme, would use the CSS code

.postcategory {
visibility: hidden;
}

This is how your Edit CSS panel should look

IMPORTANT: If you are new to CSS, and even if you are not, you don’t want to edit the entire stylesheet, you simply want to add a few lines. Make sure the option to “Add this to the Notepad theme’s CSS stylesheet” is selected, or you will be erasing your entire stylesheet, meaning your blog will look pretty blank!


Yes, the above is a lot to go through – learning and fiddling with CSS, paying $15 to WordPress.com – simply to get rid of a glitch on your ‘free’ blog that sends readers to another site when they think they are reading more on your blog.

If you find these tutorials helpful, please let me know in the comments below. And if you take the time to do the technical fix on your theme, please share the CSS snippet you used to hide your links and the name of your theme – I am sure other readers will thank you.

[This was originally posted at the real “Blogging for People Who Should” blog here – it’s a standalone WordPress blog, and it’s kept more up to date]

Advertisements