This sliding doors CSS hack allows you to create sophisticated tabs for your navigation bar. Sadly, Wordpress core functions wp_list_pages() and wp_list_categories() don’t allow you to add the required span tag to use this technique.

We are going to see how to proceed in order to use sliding doors in our Wordpress theme.

Sliding doors, why?

There’s many articles available on the web about the sliding doors technique, so I’m not going to talk a lot about it. For people who don’t already know this famous hack, here’s a quick example.

Let’s build a typical navigation list:

<ul id="nav">
<li><a href="#">link n°1</a></li>
<li><a href="#">link n°2</a></li>
<li><a href="#">link n°3</a></li>
</ul>

If we apply, via CSS, background images to our links in order to make this menu prettier, we’ll quickly see a big problem: We must add a fixed width to the links, otherwise the image will be truncated if the link is too short, or the link will overflow the image if its width is too long.

That’s why sliding doors are very useful: We just have to add a span element inside the link, and then, in our CSS, assign a different background image to both the span element and the link.

<ul id="nav">
<li><a href="#"><span>link n°1</span></a></li>
<li><a href="#"><span>link n°2</span></a></li>
<li><a href="#"><span>link n°3</span></a></li>
</ul>

Our CSS should look like this:

#nav a, #nav a:visited {
display:block;
}
#nav a:hover, #nav a:active {
background:url(images/tab-right.jpg) no-repeat 100% 1px;
float:left;
}
#nav a span {
float:left;
display:block;
}
#nav a:hover span {
float:left;
display:block;
background: url(images/tab-left.jpg) no-repeat 0 1px;
}

Please note, as this is only an example, the CSS above isn’t complete and only shows how to apply the sliding doors hack.

You can see a live demo of a navigation menu which uses this technique on my blog here.

Using the sliding doors hack within Wordpress

I saw many blog posts where some users told you to modify Wordpress core in order to apply this technique. Personally, I never really liked this idea: First, the Wordpress core wasn’t made for being modified. And secondly, if you do, when you’ll upgrade your WP version, you’ll have to re-modify the core. Not user friendly at all!

Instead of this, let’s use a regular expression, by using the php preg_replace() function. We are going to get our pages (or categories) without displaying it, and passing it as a parameter to preg_replace(). The two remaining parameters will be, of course, our regular expression: The pattern we’re looking for, and this pattern’s replacement.

To create this menu, paste the following code instead of the wp_list_pages() (or wp_list_categories()) function in the header.php of your Wordpress theme.

To list your pages:

<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>
</ul>

To list your categories:

<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>
</ul>

Right now, your new menu is ready. You just have to make it sexy with CSS. Have fun!

Who says that these days you have to pay for a high quality WordPress theme?   Today I noticed that one of my favorite free theme designers, ChiQ Montes, has released yet another incredible WordPress theme.

Her newest creation is the Maggo Mag theme, which is a 3-column theme with the sidebars split out on each side (I’ve always liked this style and wish more 3-column WordPress themes had the content in the middle).  Other features include being 125×125 ad block ready, the ability to add a video to the right sidebar, and of course the wonderful color blue.

Here is a screenshot:

And here is a live demo.   If you’d like to try out the Maggo Mag theme, you can download it here.

Yesterday I got the heads up that I was tagged in a recent post by John Lamansky of The WordPress Expert.  I normally don’t partcipate in these types of “blog games”, but after reading John’s post, I really think it is a great idea and allows us to spotlight a few WordPress plugins that are underrated or somewhat unknown.

John choose to highlight the following 3 underrated plugins in his post (click over for a description):

1. Broken Link Checker
2. WP-Project
3. WP SEO Master

Here are 3 plugins I would like to add to the list that I think are useful, yet underrated:

1. Blog Metrics – This is a wonderful plugin by Joost De Valk that was designed for multi-author blogs like this one.   It tracks all sorts of unusual analytics by individual authors that I find extremely helpful.
2. Digg This – I think this plugin used to be fairly well known, but I don’t see it on many blogs anymore.   This plugin does nothing normally, but when it recognizes that a post has been Dugg, it will create a digg-style button and display it within the post to help encourage people to Digg your post.   They can Digg the post without leaving your website!
3. Math Comment Spam Protection – It adds an extra step for people leaving comment, but it stops spam cold in its tracks.  I use this on many of my blogs and haven’t really had any spam troubles since.

Hopefully some of you will find a use for some of these plugins.

I suppose now I should continue this by tagging three more people.  How about Michael at WPCandy, Leland of ThemeLab, and Jeff of Jeffro2pt0.  If you haven’t been tagged yet, but would like to participate, feel free to do so on your own blogs to help highlight some relatively unknown plugins.

Wow, is it just me, or can Brian Gardner read minds?   As most of you know, I maintain a large portfolio of domain names as sort of a hobby.  A couple of weeks ago I invested in a couple of Geo domains with plans to develop them into portals for their respective city niches.   With the focus of the internet continuing to become more and more local, I think these types of domains are the best way to invest money online right now.

As Brian has been prone to do in the past, he has released a theme that is exactly what I am looking for, at the exact time I need it.  Today he has released his new City WordPress theme, which was of course designed to serve as a portal for a geo domain or similar website.

Here is a screenshot of the theme:

Revolution City theme features:

• Featured tabber and thumbnail section on the homepage
• Dropdown menu navigation
• All 3 sidebar areas are widget-ready
• Theme options page inside WP dashboard
• Comments section coded for Gravatars
• Google AdSense integration in between posts and comments
• Blog page template

A common strategy among city domainers is to develop a blog along with your city domain, so I really like that Brian included a blog template with this theme, and it is available at an affordable price!

If you are interested, right now you can purchase the Revolution City theme single-use package for the Revolution standard price of $79.95, or many will want to get the multi-use package for $199.95.  Of course people who have purchased the All-Inclusive package will get the theme for free.

About two weeks ago, we covered a story about the All-in-One SEO Pack and the fact that it was no longer being supported.  To the relief of thousands of WordPress users, about a week later, we found out that someone else had resurrected the plugin.   The lesson learned was obviously that too many people had come to rely heavily on a single WordPress plugin.

Thanks to a heads up from my friend Leland at Themelab, it looks like someone has attempted to put a fork into the All-in-One SEO Pack plugin, with the release of a new plugin called Platinum SEO Pack.  Here are a few of the features that you will get on top of what AiO SEO Pack included:

1. Ability to add follow or nofollow and noindex meta tags to any post or page.
2. Automatic 301 redirect for permalink changes.
3. Nofollow links to your archives, categories, and tags pages.

To read more, or to download the Platinum SEO Pack, check out the authors page.