Blog
WordPress large navigation menu and wp_list_pages()
In a previous blog post I mentioned that I have been working on a new website for the City of Pharr, Texas. It’s nearing completion and I thought I’d share a few technical details about the WordPress implementation that may be useful to someone.
First off, as of this writing, the website is not launched yet. It is scheduled to go live on February 16th.
Websites with a lot of content need to be optimized to perform well. This website for the City of Pharr is certainly not a huge site, but it’s got a couple hundred pages with a fair amount of content. More importantly, it has a fairly large hierarchy of pages that has created the need for an intuitive navigation system.
The current (or old) site used a vertical navigation with practically unlimited levels of sub-pages. Some of these were over five levels deep! I don’t know about you, but those pop-out navigation menus with so many levels annoy me tremendously. By the time you get down to the third or fourth level, if your mouse moves off of the menu for a moment the menu disappears and you are forced to start over again. Yuk!
This large menu issue was resolved through the use of large horizontal drop down menus, driven by jQuery and CSS, and a little hoverIntent goodness to give the user a better experience by delaying the mouseout event long enough for the pointer to leave the menu and come back within a few milliseconds without closing.
Functionally, it is great and looks beautiful. However, I encountered a problem with performance and load times due to the number of queries needed to retrieve the different page lists. Originally, I used the standard wp_list_page() function, passing in a child_of parameter based on the pages I wanted. The largest menu was for the City’s departments and used eight function calls to wp_list_pages(). In conjunction with the other menu items, this turned out to be unacceptably slow. Every page would load sluggishly and (in Firefox) I could see the navigation menu bar rendering slowly with each page load.
So I removed all of the calls to wp_list_pages() and opted for a temporary hard-coded navigation menu. What a difference! Now what I plan to do is build a custom function that will generate the navigation structure that I want without using wp_list_pages(). This way I can have fine-grain control over the query and pull out all the pages I need with a single function call.
I’m not into writing tutorials, so if you are interested in the code, feel free to check out pharr-tx.gov (after Feb. 16th) to see how the menu system works. If you are interested in the WordPress/PHP side, just shoot me an email.
Cheers!
