Ever found a fantastic WordPress theme but wished you could make a few minor tweaks to the navigation menus?
I have. I’ve noticed that some WordPress themes have navigation menus which display post categories rather than displaying your pages and that some of them don’t give you the option of tweaking this from the admin area.
For example, when I discovered the slick, professional “pixel” theme in the WPMU DEV “Farms 133 Pack,” I was frustrated to find that the navigation menu at the top was displaying post categories instead of my pages. Check it out:
Thankfully, you don’t have to be a coding genius to customize these WordPress navigation bars, all you need is access to the themes editor and a little basic knowledge of how the WordPress navigation menus display either posts or pages.
Just a few quick warnings before I show you how to do this:
- Don’t attempt this on your live site, practice it on your WordPress testing site first.
- Remember that when the theme updates, your changes will be undone. Personally, I disarm updates on themes that I’ve decided to customize and “take over” maintenance of the theme.
Okay, here’s what you’ll need to do first…
Step One: Find Your WordPress Theme Editor
The first thing you’ll need to do is go to your themes editor, which you’ll find under the “Themes” menu in the WordPress admin area:
(In multisite, you’ll need to go to the main network dashboard. All theme updates will them cascade through your entire multisite network)
Once in there, you’ll need to select the theme you want to edit. Then locate the file which contains the code for the navigation menu. Many times, this file will be the “header.php” file, but it could vary depending on your WordPress theme.
Here’s an example of what the file might look like when you find it:
Step Two: Find the Code which Displays Your Posts/Pages
WordPress has two simple functions which determine whether a navigation bar is displaying posts or pages. The first is “wp_list_categories” and the second is “wp_list_pages.” I guess you can figure out which does what.
Here’s an example of what these functions might look like inside the WordPress theme code:
<?php wp_list_categories(‘depth=1&title_li=0&sort_column=menu_order’); ?>
<?php wp_list_pages(‘depth=1&title_li=0&sort_column=menu_order’); ?>
Notice the bolded parts above, those are the only two functions you need to alter to display posts instead of pages or vice versa. To make the switch, you simply exchange the word “categories” for the word “pages,” so that this…
<?php wp_list_categories(‘depth=1&title_li=0&sort_column=menu_order’); ?>
…becomes this…
<?php wp_list_pages(‘depth=1&title_li=0&sort_column=menu_order’); ?>
…or this…
wp_list_pages(‘depth=1&title_li=0&sort_column=menu_order’);
…becomes this…
wp_list_categories(‘depth=1&title_li=0&sort_column=menu_order’);
Don’t change anything else in the code and please be sure to practice this on a testing site before trying it on a live site.
Step Three: Save Your Changes and Check out Your New Navigation Menu
When you’re done with your edits, save your changes and go back to your WordPress home page. You’ll notice that the pages are now displaying on your navigation menu instead of post categories. Here’s an example once again using the WPMU DEV “pixel” theme:
For my fellow overachievers who want to get more robust in customizing their WordPress theme navigation menus, click here for more information about the “wp_list_pages” function or here for more information about the “wp_list_categories” function.
There you’ll find more specific information on how to customize the display of your posts or your pages in the WordPress navigation menus. Any questions, post them below and I’ll do my best to answer them.
-Best,
Seth C
