I had a problem making a WordPress website consisting of twenty static pages: the horizontal navigation menu right underneath the header became much too bulky. That menu bar expanded into a huge square, and pushed my text down out of sight onto page two. I wanted to have only three page titles listed in the menu under the header, and have the rest of the site navigation handled exclusively by anchor text links. (Fellow newbies: those are the blue underlined things in the middle of the text. I just learned two weeks ago that Google says that they are much better for both search engines and human visitors than drop-down menus are).
In the WordPress support forums, I found that quite a few others had this problem building a large static sight. (Contrary to popular assumption, WordPress is not just for bloggers.) Four solutions were offered:
1) Go to Dashboard -> Appearance -> Menus. Create a custom menu. Apply the custom menu to the appropriate theme location.
2) Use a plug-in.
3) Make a child theme and modify the header.php template and hard-code the page IDs to be included/excluded in wp_list_pages. (Page ID is a unique number assigned by WordPress to every post or page).
4) Make a child theme and use wp_list_pages with the meta key or meta value option to assign a custom field. The pages whose meta field match this will included in the menus.
Solution #1 is the most flexible and maintenance-free, so I tried it first. (This solution was presented in the thread “How to block page navigation listing?” one year ago.) However, when I tried to apply the custom menu to the appropriate location, my theme, Bouquet, gave me a pop-up menu that offered only one choice: the sidebar. My problem was with the location just under the header, so I didn’t bother with this.
I did not know if there was something I was doing wrong or there was something wrong with the theme, so I looked further, and found that the moderator of that thread had also touched on this topic in a tutorial for theme developers, “Best practices for Custom Menus Implementation: Use theme_location instead of menu in wp_nav_menu()” (March 16, 2012). Chip Bennett wrote “In several recent theme reviews, I have noticed that themes are implementing custom navigation menus incorrectly.” He gave examples of how it had been done wrong and how to do it right. I felt that now I had a way to check if a fault in the theme was preventing me from applying the theme to the right location. In Bouquet’s functions.php file, I found the comment:
// This theme uses wp_nav_menu() in one location
The line of code that Chip Bennet had specified for defining the second location was missing. The theme was coded to offer only one choice! It sounded like an election in a facist state, with only one candidate offered, one I didn’t want. I was sure this meant that unless the theme code would be corrected, I would not be able to apply the menu to the appropriate location.
I turned to solution #2. Many plugins were designed to solve the problem with too many static pages being displayed in the menu under the header. I checked out several of these in the support forums. (Personally, I am suspicious of plugins because I struggled for two months to use a plugin which supposedly works with a static home page, until I finally realized that it does not.) There were issues of significant slowing of response time, numerous users reporting the same long-unresolved malfunctions, and permanently discontinued maintenance.
Not finding any plug-ins I wanted to try, I turned to solutions #3 and #4, which involved making a child theme to override the theme’s code.
The prospect of hard-coding system-generated page IDs into a child theme did not seem compatible with long-term ease of maintenance, nor did the use of Meta fields. I reasoned that if I have to make a child theme, I would rather use it to correct a coding error in the way Chip Bennet described, since that would enable me to perform any future menu alterations through the dashboard alone.
Although I intended to stick with Bouquet, I tried a few other themes, including twenty-eleven and twenty-twelve, figuring that if they offer a choice on the dashboard of where to apply the menu, I could see how they handle this on the code level. To my surprise, no choice was given in the dashboard by any of the themes I tried. (State-of-the-art coding is hard to come by. Maybe twenty-thirteen will give more user-friendly choices for saving the custom menu to a location.)
As I tried to hurry through trying one theme after another, without noticing what I was doing, I serendipitously saved my menu to the only location offered. Amazingly, this caused the menu display under the header to contain only the pages I’d specified in the custom menu! I tried this on a parallel (multisite) subdirectory site (requiring a separate activation of Bouquet for testing on the second site), and it worked there also!
It’s that easy – just pick any theme with custom menus, and apply a custom menu to a location, even if the only location offered seems to be the wrong one, and you can forget about plugins and child themes! It doesn’t make sense to me, but it worked twice out of two times. Chip Bennet will probably explain to us why this works. I hope he succeeds in teaching the theme developers to be kind to us newbies.
It took me a few days to go through all the above. I hope this post will save others a lot of work.
- The topic ‘Great Solution for Too Many Pages in Menu Under Header’ is closed to new replies.