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!

There are times when you may wish to move your WordPress installation from one place on your server to another.   This often happens when there is a change in the URL of your WordPress install, such as with blog redesigns, moving to a directory, etc.

WordPress is actually very flexible, so it isn’t extremely difficult to do.  Here is the information you will need:

1. If moving to a new directory, create your new directory.
2. If moving to your root directory, make sure your root directory is ready for the new files (including the index.php file, the .htaccess file, etc.).
3. Once your new home is ready, login to your dashboard and go to the Settings tab (under General).
4. Update the WordPress Address field and Blog Address field to reflect the new location.
5. Click Update Options. (Don’t view or open your blog until all steps have been completed)
6. Move all WordPress core files to their new location.  This includes subdirectories!
7. Update your Permalink Structure to show the new location (add new directory or remove previous directory).

That should about cover it.   If attempted, you’ll want to allow some extra time for following all the steps carefully, as it is somewhat of a delicate process.   If you run into any problems, consult the WordPress Codex, which has some troubleshooting, etc.

Here are some great WordPress-related posts I’ve enjoyed over the past week:

• Track WordPress 2.6 Progress - Quick Online Tips gives some suggestions on how to keep up with the progress of WordPress 2.6.
• How to Create a Dynamic Sidebar - This is something we’ve covered on a couple different occasions here on this site, but I wanted to point out this post because I think Richard does a great job of explaining how to tell WordPress what to display on each page.
• Project M Finally Announced - Justin Tadlock finally announced the details of his Project M. It appears it is a theme club of sorts, but with a twist. Click over to get the details.
• Do It Yourself WordPress Theme - Hayes Potter has come up with an interesting idea by releasing a WordPress theme. Simply build your stylesheet and you are done.
• WordPress Tricks - Stylized Web offers some useful PHP code snippets for WordPress.
• Making Authors Template Page - Also from Justin Tadlock, this post does a great job detailing how to make a WordPress authors template page.
• Displaying Related Categories and Content in WordPress - Darren Hoyt shares the code he used to make this feature in his popular Mimbo Pro theme.

If you look around at a large sampling of WordPress blogs, chances are you’ll find a majority of them monetize their blog in some form using Google AdSense.   Even this blog adds a single AdSense block to the top-right corner of our homepage and posts that are at least 3 days old.

If you employ an AdSense strategy like this, it is more than likely that at some point you will have certain posts that you don’t want to display advertisements on.  This could be for a number of reasons, including posts where you have a sales strategy and don’t want readers clicking off the page for any reason other than by using your product/affiliate link.

If you’d like to prevent AdSense or other ads from showing up on certain post ID’s, our friend Keith has posted over at Weblog Tools Collection an easy to follow guide on how to skip advertisements on single posts of your choice.  You just need to know the post ID’s and add a small PHP snippet around the advertisement code.

If you prefer not to get your hands dirty by messing with the code, you can try the Who Sees Ads WordPress plugin.

The problem(s): With some upgrades of the WordPress 2.5 branch, the Popularity Contest WordPress plugin is not working properly. Also, people trying to activate the Popularity Contest plugin on a brand new WordPress install are getting a fatal error or a “doesn’t exist” message when attempting to activate the plugin.

The solution(s): I actually ran into this problem on a fresh install of WordPress. After several attempts, I was unable to figure out the problem myself. Thankfully, a quick Google search showed a post over at WPGuy which gave details on fixing both problems!

Here is what you need to know if you have this problem:

Fix problems with the upgrade to WordPress 2.5

Open your Popularity Contest plugin (edit it) and search for this code:

require('../../wp-blog-header.php');

And replace it with this:

require('../wp-blog-header.php');

Fix problems with a new install of WordPress 2.5

In addition to doing the above, you need to search for the following code:

if (isset($_GET['activate']) && $_GET['activate'] == ‘true’) {

And replace it with this:

if (isset($_GET['action']) && $_GET['action'] == ‘activate’) {

I went through both of these steps on my fresh WordPress install and it fixed the problem perfectly!

In the past we’ve talked about how to add a print button to your WordPress theme. Today I wanted to give you the javascript code you need to create an Email This button on your WordPress blog.

Before getting to the code, I wanted to first say that this code is designed to allow readers to click on the button and have it open up their default email software and create a subject and link that point to the post the reader is currently visiting. This code is not designed to allow readers to contact the blog author.

If you are wanting your readers to be able to contact you, I recommend you use one of the many great contact form WordPress plugins available. You should never embed your email address into some HTML code because it will be picked up by spam bots. Contact forms prevent spammers from finding your email address. The other thing you can do is offer “EmailAddress AT EmailCompany DOT com” (which your email address information filled in) to avoid spammers.

Okay, so back to the Email button code. Here is the javascript you will need:

<script type="text/javascript">
<!-- Begin
function isPPC() {
if (navigator.appVersion.indexOf("PPC") != -1) return true;
else return false;
}
if(isPPC()) {
document.write('<a class="contact" HREF=\"mailto:\?subject\=Take a look at this page I found, ‘ + document.title + ‘?body=You can see this page at: ‘ + window.location + ‘\” onMouSEOver=”window.status=\’Send your friends e-mail about this page\’; return true” TITLE=”Send your friends e-mail about this page”>Email to a Friend<\/a>’);
}
else { document.write(’<a class=”contact” HREF=\”mailto:\?body\=Take a look at this page I found titled ‘ + document.title + ‘. You can see this page at: ‘ + window.location + ‘\” onMouSEOver=”window.status=\’Send your friends e-mail about this page\’; return true” TITLE=”Send your friends e-mail about this page” rel=”nofollow”>Email This!<\/a>’);
}
// End –>
</script>

This will create an email where the reader can enter in someone’s email address and send them a link to your post/page.