Skip to content

WordPress Custom Menus

0 words written by Alistair

Hook and Callback Function

We're going to hook into WordPress with the "init" hook. We do this by using an add_action() and passing a function as its second parameter.

function px_register_menus(){

}
add_action('init', 'px_register_menus');

Register Menus

Now we are ready to register the menus with register_nav_menus() in our callback which takes an array of pairs. In this example, let's create two menus. The key is the unique ID of our menu and the value is the human readable text that will appear in WP-Admin when a user is allocating his / her menus.

function px_register_menus(){
    register_nav_menus(array(
        'sc-category-menu'    => __('Category Menu'),
        'sc-page-menu'        => __('Page Menu'),)
    ));
}
add_action('init', 'px_register_menus');

Create Menus in WP-Admin

Now that we have registered those menus and provided the theme is active we can go to Appearance -> Menus. Now you can create a new menu and assign Categories, Pages, Custom, Post format, Tags and specific Post links. Choosing a theme location is also an option available on the menus page, which is a requirement for the desired menu to be outputted on the front-end. Handling the presentation of the menu can be done with CSS. [caption id="attachment_579" align="aligncenter" width="1000"]Configure menus via WP-Admin > Appearance. Configure menus via WP-Admin > Appearance.[/caption]

Displaying Menus in Theme Files

Now that we have menus registered, and assuming the administrator has added links for 2 new menus we can output a menu in any relevant theme file. For example in header.php you may do the following:

$defaults = array(
    'theme_location'    => 'sc-category-menu',
    'container'         => false,
    'items_wrap'        => '%3$s'
);
wp_nav_menu($defaults);

or

$defaults = array(
    'theme_location'    => 'sc-page-menu',
    'container'         => false,
    'items_wrap'        => '%3$s'
);
wp_nav_menu($defaults);

We are passing 3 parameters to the wp_nav_menu() function, however there are many available and you may require more granular control over the markup rendered via wp_nav_menu(). For this you would need a "Walker" class. Rinse and repeat the process in your theme files to render multiple menus by substituting the theme_location value for each unique menu. Finally, if the theme is recently activated the user may not yet have created and allocated a menu in WP-Admin. Random page links on the front-end now may be a problem. To make sure that the menus are shown only when it is assigned then you can use has_nav_menu() to conditionally check this. Altogether it will look something like this;

if(has_nav_menu('sc-category-menu')) :
    $defaults = array(
        'theme_location'    => 'sc-category-menu',
        'container'         => false,
        'items_wrap'        => '%3$s'
    );
    wp_nav_menu($defaults);
endif;

Conclusion

Menus are fantastic and widely used now, they're simple enough to integrate with a theme and yield a lot of power. Good stuff!

Comments are disabled.

FAQ
Close Message

Hey, supply your name and email below and we'll subscribe or unsubscribe you to our newsletter. 🙂

Messages

Since you've been browsing our site a few messages have been left for you, read them below.

  • Special offer at the moment is my services are available as a fixed fee over 1 month @ £600.00 for 30 hours per week to work on any web projects you might have. Would you like to work together?

    Click to start a new project