I've been developing a site where I'm using wordpress as a CMS more than a blog, for many reasons. I'm very familiar with it, I like the automated SEO, I think it's simple to use, etc. But one big challenge is the menu navigation and how to set it up. I want this to be automated and I don't want to have to edit the menu every time there's a new page.

To clarify the terms, there's a menu with "solutions" then "products" with 3 sub categories "indoor" "outdoor" and "media players." Plus there's a "guides" area and a "blog" area.

The menu system is handled by the category management. If a page is made that goes into the menu, you simply tag it with the category where it should go. You can click the main header of the menu to go to a page with all the posts in the category. Then you hover over the header of the menu, and I want a dropdown menu with a list of posts in there. I want to limit this to a certain number of posts, then have a button for "more" at the bottom. You can see an example here.

Let's take a look at the code at the start of my menu. This basically encapsulates the markup for the menu, and for the first dropdown. I have this in a separate "nav_menu.php" file but it could go in your header as well.

   

   

    
Solutions For...
     

      

        
       
        
<a href="">
       
       
More...
      
     
    

So, take a look at the php code there. First of all, important to note, this disrupts the wordpress loop so we'll need to fix it a little bit later. First, it does a post query limiting the list to one category (you can search by "category_name" but I'm a fan of the Id's) and then setting a limit to how many to pull; I chose 5 by default. Then, there's a while loop that pulls some data from each post and formats it into a listed menu entry. After the while loop closes, I throw out the "more" button which queries the whole category for posts.

If you do just that, every time you try to list posts you'll pull a list of every post you've got and it will supremely annoy you. You need to reset your post query to be able to limit it to the page at hand. At the bottom of my theme's "header.php" file, right before the posts would get displayed by "index.php," I added the following php line:

This will pull the post list based on the categories selected or the specific post listed; all of my links and navigation are handled through those 2 "GET" variables so it will limit the posts queried to anything selected. Make sure to put the @ before $_GET to suppress any errors the get command gets, for example, if there's nothing passed.

Tags: cms, code, menus, php, programming, Wordpress
This entry was posted on Thursday, January 7th, 2010 at 4:49 pm and is filed under Geek, Projects.