Here are a few WordPress-related links I’ve enjoyed over the past few weeks:

  • How To Display Code in WordPress Posts - Leland of Theme Lab has posted some tips/plugins you can use to help you display code in your WordPress posts.
  • 40+ WordPress Tricks and Hacks - Hongkiat has another good collection of WordPress hacks and other guides, including a few of ours.
  • WordPress 2.6 Disabling XML-RPC By Default? - James Mowery of Performancing takes a look at the effects of WordPress 2.6 coming with XML-RPC disabled by default, which will hopefully reduce security risks.  Unfortunately, this will also pose a problem for people that write their posts in 3rd party blogging software such as Windows Live Writer and will have to be manually enabled.
  • 20+ Must Have WordPress 2.5 Compatible Plugins - Mashable has posted over 20 WordPress plugins that are compatible with WordPress 2.5.

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |

If you deal with WordPress template tags, I just ran across an incredible new WordPress resource. It is called the WordPress Template Tags Reference Guide, and is basically a reformatted version of WordPress.org Codex page for template tags.

If you deal with template tags regularly, I would definitely recommend booking this page.  I have added this to our WordPress Resources page.

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |

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.

Wordpress sliding doors

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! :)

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |

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.

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |

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

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |

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.

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |