Home > TypePad - Cons, WordPress - Pros > How to make category tabs in wordpress.com

How to make category tabs in wordpress.com

One design feature that many WordPress blogs have and that no TypePad blog has is page tabs. You have probably seen them on many wordpress.com blogs, and you can see them on this blog too: The tabs “Home”, “About”, “Contact” and “Scoreboard” are pointing to pages. But did you know that you can make them point to categories instead?

WordPress versus Typepad

You can make pages in TypePad, but no page tabs; in TypePad you only have a Pages widget, much like in WordPress, albeit with much less functionality, as I described in this post: WordPress beats TypePad (again): Pages.

Page tabs are URL tabs

Page tabs are much more than just page tabs. A page tab appears as soon as you write a page and publish it: The page title becomes the page tab title. But did you know that you can make the page tab point to any URL on your blog? This way you can make it point to categories and list all posts within a certain category by clicking the “page” tab. Actually, you can make the page tab point to a certain post, if you want it to.

How to make the page tab point to a URL

The trick is to enter the URL in the page title, just like you write a link using HTML:

<a href="URL">TWO WORDS</a>

Remember that you must use at least two words to designate the URL, otherwise this will not work. The URL for the category you want to point to is like this:

http://USERNAME.wordpress.com/category/CATEGORYNAME/

or if you want to point to a tag:

http://USERNAME.wordpress.com/tag/TAGNAME/

So, if I want to point to a category in my blog, I could write this:

A link in WordPress page tabs

A link in WordPress page tabs

Limitations and uses

Obviously, this little trick has it’s limitations. You must use at least two words for the link and if you have many categories or tags, you cannot do this for all. On the other hand, this can be a nifty little trick for promoting certain categories or tags that otherwise may get lost in the “clutter” on your blog, or you could use to promote “This week’s topic” (category or tag) or similar. In any case, it can make your blog a more fun place to be.

Happy blogging!

Related

WordPress beats TypePad (again): Pages.

Share This

Add to FacebookAdd to NewsvineAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to Ma.gnoliaAdd to TechnoratiAdd to Furl

  1. Παναγιώτης Αδάμ
    September 15, 2008 at 6:16 am

    Hi wpvstp! First, I think you should caution that the trick doesn’t work well with some themes (e.g. Digg 3). Second, we’ve got news: http://en.forums.wordpress.com/topic/not-possible-to-edit-html?replies=6#post-248541

  2. September 17, 2008 at 8:41 am

    You are correct. It does not work so well in the Digg theme, and there could be others, too. I haven’t checked them all, so bottom line: no guarantee that this will work across themes.

  3. September 19, 2008 at 12:14 pm

    One question. Whether it will work on other hosting (distinct from wordpress.com)?

  4. September 19, 2008 at 2:41 pm

    @jordano
    No, I don’t think it will work, and besides, I’m really not in a position to tell, since I do not have an extra self-hosted blog with WordPress theme on it. But if you do make it work, please let me know. Thanks.

  5. November 2, 2008 at 6:51 pm

    on ac3bf1.org (my blog)
    works with one word also :-)
    Just though I’d let you know :-)

  6. robinsense
    December 8, 2008 at 4:53 am

    This makes two tabs for me, one that doesn’t have any text and another one that works. Very bizzare….

  7. December 29, 2008 at 8:52 pm

    Wow. great trick. I had been looking for an answer to this problem all night. Thanks for the simple solution!

  8. Krista
    January 8, 2009 at 8:27 pm

    Two things

    1. I have a one word page title, but adding my category URL as my page title makes the tab very wide
    2. WHenever I click on the page title it includes the entire URL in the address bar; which means that the website url is listed twice

  9. February 10, 2009 at 7:59 pm

    Doing this creates invalid HTML which will cause different browsers to react differently. What it’s doing is inserting a link element where WP prints out the text of your page’s title. So instead of printing this to the page (html changed so not to screw up this page)

    Page Title

    WordPress will print:

    Page Title

    Which is bad juju on many levels. That explains the multiple tabs in one case, it not showing up in others – not to mention it’ll throw off your code if you’re depending on a strict doctype.

    Unfortunately, I haven’t figured out a better way to do it at this time. If I do, I’ll be back.

  10. February 10, 2009 at 8:02 pm

    Apparently my code still got messed up… try this… pretend the (‘s are <‘s and so on…

    Instead of
    (a href=”oldURL”)Page Title(/a)

    WordPress is printing

    (a href=”oldURL”)(a href=”newUrl”)Page Title(/a)(/a)

    Which is bad juju… cuz you’re not supposed to nest anchor elements, blah blah blah

  11. Chris Troutman
    February 18, 2009 at 2:31 am

    Anyone figure out how to eliminate the phantom page tabs that occur when you try this?

  12. February 23, 2009 at 2:53 am

    I haven’t been able to get this to work. Does anyone know of another way to manually choose the link a page should go to?

  13. mpccreative
    February 24, 2009 at 4:54 am

    This worked for me and was the perfect fix. I’m also not hosted on wordpress.com.

  14. March 3, 2009 at 12:49 am

    I have another theme that didn’t work. just like Chris Wible said. it nested the links. Any solution.

  15. October 25, 2009 at 2:45 pm

    Thanks for the trick dude.. you rock!

  1. No trackbacks yet.

Leave a comment