Wordpress: Sliding Doors (CSS)

This article has been updated please see here.

I have only just started using Wordpress and first on my list of things to do was to create a custom theme for the blog. Theme creation is simple in Wordpress just copy and paste your HTML code into another theme. The one area I did have trouble in was creating a menu which used the sliding doors principle.

Typically root navigation in Wordpress is achieved through wp_list_pages which outputs a html list (<li>) of the pages complete with their links. However the sliding doors principle requires an extra tag in the list structure i.e. <span>.

Wordpress Outputs:

<li>
      <a href=<a href=”http://www.dtsn.co.uk”>www.dtsn.co.uk</a>
</li>

However we require:

<li>
     <a href=”http://www.dtsn.co.uk”><span>www.dtsn.co.uk</span></a>
</li>

To overcome this we use a little PHP and a SQL query to select all the pages from the database and display them in a custom list:

<?php
   $querystr = “SELECT $wpdb->posts.* FROM $wpdb->posts WHERE $wpdb->posts.post_status =
                    publish’ AND $wpdb->posts.post_type = ‘page’ ORDER BY $wpdb->posts.post_title ASC”

   $pageposts = $wpdb->get_results($querystr, OBJECT);
   if ($pageposts)
   {
      foreach ($pageposts as $post)
      {
         setup_postdata($post);
         $title = the_title(”,”,FALSE); //wp conditional statement
         ?>
           <li<?php
              if ( is_page($title) ) {
                ?> id=’selected’<?php
              } ?>>
              <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”>
                 <span><?php the_title(); ?></span>
              </a>
           </li>
    <?php
    }
} ?>

The code above pulls out the database information regarding pages, we then call the corresponding wordpress functions (such as the_parmalink()) to insert the data in the correct place. The code above also applies a ’selected’ class to the menu item so that the user can determine which page they are on. Thus giving you the effect you see on this blog. This is done using one of Wordpress’s conditional statements (the_title()) which calls the title of the page you are currently on.