coding
The Ultimate Guide to WordPress Menus
Back in the days, on old WordPress versions, WordPress had been using the conceptual term ‘menu’ as a mysterious feature. Presenting the new customization admin options back then revealed a whole new world for developers and users to tune up their themes and easily modify the standard navigation – horizontal or vertical components. If you want to squeeze the juice out of your menus, check out that Ultimate Guide to WordPress Menus!
What makes WordPress menus so fancy?
WordPress supports custom menu alterations. When you login to your admin panel and reach the Dashboard, navigate to the Appearance tab and there you will find the Menus section.
I do have menus with my standard install as well, don’t I?
Most themes (including the default WordPress themes) support navigation menus. The standard configuration includes all of the pages created via the admin panel in the navigation menus. This is often unnecessary and leads to discomfort. We are naturally unable to control the number or the type of elements to add in the standard menu. That’s why further configuration is required to improve the quality of the theme itself by giving a real usability to the navigation.
How to enable custom menus in my theme?
The standard post-install WordPress themes are preconfigured for you and include that customization functionality. However, if you want to design your own theme and run a custom menu, you will need to add support for it in the functions.php file:
if ( function_exists('register_nav_menu')) { register_nav_menu( array( 'top-menu' =>__('brand new menu'), ) ); }
This would bond your theme to the core functionality for custom menus. Registering the ‘top-menu’ area will help you to later connect this placeholder to a menu of your choice in the admin panel.
How to call an existing menu in my theme?
By calling the wp_nav_menu function and using the theme alias:
wp_nav_menu(array('theme_location' => 'top-menu'));
This piece of code could be added anywhere in your theme templates. This is normally the header.php file to be included everywhere in your theme or in a specific file such as single.phpor category.php if you want it to be visible only in a single post view or on category listing. It’s up to you where would be the appropriate position for your menu!
The code snippet inserts the menu with the standard options that you could alter on demand. Here it is the complete function call with the default parameters:
wp_nav_menu(array( 'theme_location' => 'top-menu', 'menu' =>, 'container' => 'div', 'container_class' => 'menu-{menu slug}-container', 'container_id' =>, 'menu-class' => 'menu', 'menu_id' =>, 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' =>, 'after' =>, 'link_before' =>, 'link_after' =>, 'items_wrap' => '<ul id="%1$s* class=""%2$s">%3$s</ul>', 'depth' => 0, 'walker' => ) );
Here is a reference guide for the available parameters:
Theme_location | The theme location (menu area) defined in the register_nav_menu()function |
Menu | Menu locator – looking in menu list by id, slug or name (in that order) |
Container | Preferred wrapper for the tag – could be ‘div’, ‘nav’ or none (denoted by false). |
Container_class, Container ID | CSS class or id to be applied to the container (if any) |
Menu_class, Menu_d | Same for the menu element |
Echo | Print the evaluated menu or return it as a variable (‘0’ for return) |
Fallback_cb | A function to be executed if the menu does not exist |
Before, After | Text to be applied before or after the anchor link tag |
Link_before, Link_after | Text inserted between the link text in the anchor |
Items_wrap | Formatting string for the items list. By default using which is actually optional. |
Depth | Sets the maximum depth of the hierarchy (useful to reduce visibility problems with dropdown menus) |
Walker | Normally won’t be changed, defaults to Walker_Nav_Menu iterator |
If your slicer has provided you with a standard HTML template or you want to integrate one as a WordPress theme, you won’t need to modify the slice –you can control the output of the menu function by the platform instead!
What could I do with my menus?
The menu manager is pretty powerful. First of all, you need to create your first menu. In the “Menus” section, enter the name of your new menu and click the “Create Menu” button.
By default all brand news are empty. You could check the “Automatically add new top-level pages” checkbox if you want to simulate the default functionality that includes all of the pages (from the Pages admin list) to your menu. In addition to that now you could filter the items by explicitly point all of the items for your menu.
You could chose only specific pages from the panel on the left to your menu. They could be ordered as you prefer and even be nested which would result in a dropdown menu (if your theme supports one). In order to insert this menu in your primary area, use the selector on the left:
Ordering is drag&drop based so you don’t need to cope with indices anymore – rearrangement is done via dragging an item and positioning it as a root element for the menu or a child element to an existing item. Dropdowns could be few levels deep if you need more complex hierarchy. You could also attach links or categories to the menu – in case you need to link an internal page or external website – it is now doable within the admin panel. No more code changes required.
Note: Changes to the menu should be saved explicitly!
Am I able to add more than 1 menu to the theme?
Sure, why not? You could recall any menu by its name anywhere in your theme. For instance, you could define one horizontal menu below the header and a vertical one with other items in the footer. Also the “Menus” section counts the number of menus supported by your theme and you can switch menu configurations “on the fly”.
You could define different areas in your WordPress theme where each area operates with a different menu. Register a new navigation menu and attach it to your theme. Modifying the standard Twenty Ten theme we will add the Additional menu to the Primary one in the functions.php file:
register_nav_menus( array( 'primary' => __('Primary Navigation', 'twentyten'), 'additional' => __('Additional Navigation', 'twentyten'), ) );
We are using the register_nav_menus here to perform similar actions with many objects. Updating these rows in the functions.php file results to 2 dropdowns for you to select menus in your WordPress Menus section:
Let’s create one more menu and name it second menu. Now we have 2 tabs with both menus in the right column:
We could fill the second menu with data. Let’s start with that scenario of nested pages, links and categories and model it as a menu:
- Page [Level 1]
- SubPage [Level 2]
- Deeper SubPage [Level 3]
- SubPage [Level 2]
- Custom Top Link [Level 1]
- Top Category [Level 1]
Add one WordPress page as the first element. The next page will be a subpage of the first one (it could be a child page, but it could also be any single page from your database). We could even add a third page to be a third-level element in your dropdown hierarchy so that the third page is under the second which is visible after hovering on the first one.
In addition to that hierarchy we could add an external link to an example website and a category item as well. Note that we have changed the menu titles of the pages regardless the fact that they exist with different titles in the Pages section. This is the final result:
There is a special bonus from the Automattic team – “Custom Menu” widget in the “Widgets” area to be embedded in your sidebar with a menu chosen by you from a dropdown:
Can I link to a custom post type as well?
A custom post type item could be added to a menu in the “Menus” section if its visibility is activated in your theme. This could be done by adding the following parameter to the register_post_type function in functions.php or other file where your custom type has been defined:
'show_in_nav_menus' => true
The post type would then be linkable.
Summary
We end this tutorial empowered with the knowledge of adding custom menus to our existing WordPress theme in an elegant and clean way. We have learned the following concepts:
- Adding a Custom Menu support to the theme
- Applying a Custom Menu in different areas in the frontend (the placeholders in the visual template)
- Filling menus with pages, categories, custom URLs
- Creating several menus and managing them
- Using the “Custom Menu” widget
- Adapting custom types to be visible in the Menus section
Already excited? Run your favorite text editor and tune up your WordPress theme right away!