CSS Techniques: Using Sliding Doors with WordPress Navigation

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&exclude=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&exclude=181&title_li=&depth=1')); ?>
</ul>

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

  • Leave a Comment
  • How To: Finding Category Numbers in WordPress 2.5

    One of the disappointing changes in WordPress 2.5 was the removal of category ID numbers.   I thought this was just a minor oversight, but since the 2.5.1 upgrade this problem still was not addressed.

    If you are looking for a category number (this is most often needed for setting up the homepage of Magazine WordPress themes), here is a really easy way you can locate it until the WordPress team adds the category number display we all took for granted before:

    1) Go to Manage > Categories.

    2) Hover your mouse over the category that you need the ID of.

    3) Look in the lower left corner of your web browser for the ID of that category.

    Here is a screenshot example:

    Hopefully WordPress will again display the category ID in one of the future updates, but thankfully this workaround is really easy.

  • Leave a Comment
  • How To: Moving WordPress Within Your Website

    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.

  • Leave a Comment
  • How To: Creating a Print Stylesheet in WordPress

    Awhile ago I made a call out to the authors of Premium WordPress themes to start adding print stylesheets to all of their themes.   Some already do, but I believe in order to truly be premium quality, things like a print stylesheet and an author page should all be included.

    While building a print stylesheet for a new blog I am setting up, I realized that I hadn’t written a post here explaining how to create a print stylesheet yet, so consider this to be that post.

    What is a Print Stylesheet?

    A print stylesheet is an alternate stylesheet that should only be used when someone attempts to print a page off of your blog.

    How Does a Print Stylesheet Work?

    A print stylesheet is a separate stylesheet that will override any designated style.css code when someone attempts to print a page off of your website.  If a print stylesheet is created correctly, people printing a webpage will not also print the unnecessary elements, such as the header, footer, and sidebars.

    How do I Make a Print Stylesheet?

    First thing you need to do create your print.css file. This can be done by taking a blank Notepad (or similar) file and naming it print.css.  You can also make a copy of your blog’s style.css file and rename it, then remove the code within the copy.

    What Code Do I Put Into My Print Stylesheet?

    Depending on your blogs theme, this step will either be pretty easy or incredibly difficult.  Basically, we don’t want things like your header or sidebars to appear in your print stylesheet, so you’ll want to setup your print stylesheet to remove these elements:

    #header, #nav, #sidebar, #footer .noprint {display: none;}

    Depending on your exact theme and how the div id’s are setup, what you put here will vary.  In other words, use the above as a guide, but customize it to match your theme.  You can also use this method to censor out images and other unwanted elements of your post pages (if applicable).  Also, if you have your contact information in your footer, you may want to leave the footer on your prints.

    Next, you will want to expand your content section so that it looks decent when printed, instead of the content margins your standard style.css uses.  It will probably look something like the following:

    #content {width: 100%; margin: 0; float: none;}

    Now, to ensure that alternate colors are not picked up when printed, you’ll want to do something like the following to make sure it prints using black ink:

    a:link, a:visited {color: #000000}

    Because most people use white paper, this should make your printouts better looking.

    How To Tell Your Theme to Use the Print Stylesheet

    Once you’ve built and uploaded your print stylesheet, the next step is of course to tell your theme to use it when someone prints something!  This is probably the easiest step of all.  You’ll want to simply paste the following code into your themes header file (usually just below the standard style.css code):

    <link type="text/css" media="print" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" />

    So, there you go!  Hopefully if you’ve followed these steps, and uploaded your new print.css file to your WordPress blog’s theme, anything printed from your website will look much better.

    Related Printing Posts:

  • Leave a Comment
  • How To: Resetting Your Password in WordPress

    Sometimes we get so caught up in covering the complex WordPress hacks and offering tips, that we forget to cover many of the things that are often taken for granted.

    Today I decided to write a quick post and cover how to reset your password within the WordPress dashboard (for WordPress 2.0+):

    1. Go to the Users tab.
    2. Click on the Your Profile link.
    3. Scroll down to the bottom of the page and enter your desired password in the New Password field.
    4. Click the Update Profile button.

    That’s it!  If you are using an older version of WordPress, you’ll want to consult the WordPress Codex.

    If you can’t get into your dashboard, you can also reset your password from PHPMyAdmin (only recommended for comfortable advanced users):

    1. Select the WordPress database of the blog you want to reset the password on.
    2. Click on wp_users.
    3. Click the “browse” icon (or “structure”).
    4. Click browse in the user_login field.
    5. Locate the ID number associated with your login and commit it to memory.
    6. Click browse in the user_pass field and find your login.
    7. Click edit.
    8. Delete the numbers and letters next to the ID number.
    9. Enter your desired password (case sensitive).
    10. Select MD5 in the drop-down menu.
    11. Click Go.
    12. Verify your new password works!

    If you are not the administrator, you can always contact the administrator to reset your password as well.  Good luck!

  • Leave a Comment
  • How To: Fixing Popularity Contest Plugin for WordPress 2.5

    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!

  • Leave a Comment
  • How To: Adding an Email This Button to Your Blog

    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.

  • Leave a Comment
  • How To: Adding a Print This Button to Your Theme

    If you ever visit our actual website, you’ve probably noticed the “Print This” button that we display below each post.  Depending on the type of website or blog you are running, having a button like this may be a good fit for your blog.  I’ve found it to be good to have this button available to readers for any type of website that offers tutorials, recipes, guides, or pretty much anything that might require a visitor to print something you’ve written.

    If you think you’d like to offer your readers the option to print something on your blog, here is the code I use on my blogs (uses Javascript):

    <a href="javascript:window.print()" rel="nofollow">Print This!</a></span>

    It prints the page you are on, so it is probably best to use it mostly on post and pages.  If you place it on the blog’s homepage, it will print the entire homepage, not just that post. 

  • Leave a Comment
  • Improve Your Blog with WordPress Functions

    Do you find you switch WordPress themes a lot?  If you do, Chris Pearson has taken the time to write a great post about using WordPress functions to ease the transition between themes.   The idea is to put all your design elements in one file and then move the file over to your new theme every time you switch, saving you the time of re-coding the specific elements you like to see in your blog’s theme.  

    In his post, Chris provides the functions file to get you started, teaches you how to write your own functions, and then explains how to activate and use your new functions. 

    I personally have used a functions file on some of my themes, but for me it hasn’t really saved much time.  That is probably because I’ve always prefered to hack my existing theme when I want to see changes, rather than to switch to a completely new theme.   For people that switch themes a lot, a user functions file is definitely something you should consider doing.

  • Leave a Comment
  • How To: Making a Categories Drop-Down Menu

    Tired of your old navigation? So, what about creating a Magazine-style drop-down menu?

    I propose here a drop-down menu listing your pages and sub pages, including one last item to show up your categories directly in the menu.

    HTML and PHP

    We will start by using WordPress core functions in order to retrieve our pages and categories. Edit the header.php of your theme, and replace your old nav code by this one:

    <ul id="nav" class="clearfloat">
    <li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
    <?php wp_list_pages('title_li='); ?>
    <li class="cat-item"><a href="#">Categories</a>
    <ul class="children">
    <?php wp_list_categories('orderby=name&title_li=');
    $this_category = get_category($cat);
    if (get_category_children($this_category->cat_ID) != "") {
    echo "<ul>";
    wp_list_categories('orderby=id&show_count=0&title_li=
    &use_desc_for_title=1&child_of='.$this_category->cat_ID);
    echo "</ul>";
    }
    ?>
    </ul>
    </li>
    </ul>

    This code will make a list of all our pages and subpages, as well as a last list element named “Categories”. When an user will hover top level pages (in case of a page menu) or top level categories, we will show up the related sub pages/categories.

    CSS

    Even if the code is fully functional, our script needs a good CSS styling. This CSS, which was taken from Darren Hoyt’s free Mimbo Theme, is perfect for what we want to do.

    #nav{
    background:#222;
    font-size:1.1em;
    }
    #nav, #nav ul {
    list-style: none;
    line-height: 1;
    }
    #nav a, #nav a:hover {
    display: block;
    text-decoration: none;
    border:none;
    }
    #nav li {
    float: left;
    list-style:none;
    border-right:1px solid #a9a9a9;
    }
    #nav a, #nav a:visited {
    display:block;
    font-weight:bold;
    color: #f5f5f4;
    padding:6px 12px;
    }
    #nav a:hover, #nav a:active, .current_page_item a, #home .on {
    background:#000;
    text-decoration:none
    }
    #nav li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width: 174px;
    border-bottom: 1px solid #a9a9a9;
    }
    #nav li li {
    width: 172px;
    border-top: 1px solid #a9a9a9;
    border-right: 1px solid #a9a9a9;
    border-left: 1px solid #a9a9a9;
    background: #777;
    }
    #nav li li a, #nav li li a:visited {
    font-weight:normal;
    font-size:0.9em;
    color:#FFF;
    }
    #nav li li a:hover, #nav li li a:active {
    background:#000;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
    }
    a.main:hover {
    background:none;
    }

    Javascript

    Modern browsers (Safari, Firefox, Opera, and even Internet Explorer 7) will not have any problem with the :hover pseudo-class on li elements. But as we can easily guess it, the obsolete IE6 can’t deal with that.

    In order to make our script compatible with IE6, we’ll need to charge this little unobtrusive Javascript code, in the head section our our HTML document, or even better, in a separate .js file.

    <![CDATA[//><!--
    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]>

    Now, your new drop-down menu is ready and will give your blog a professional look.

  • Leave a Comment