New theme in development and is currently live on BuddyCore.com - Please check back often for updates (11/12/16).

Tutorials · WordPress

Support for WordPress Nav Menus

·

1) 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');

2) Register Menus

Now we are ready to register the menus with register_nav_menus() in our callback which takes an array of key value 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');

3) 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.

4) 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:

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

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'        => '<ul>%3$s</ul>',
    );
    wp_nav_menu($defaults); 
endif;

5) Conclusion

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading more content...
Minimum Requirements

Your device does not meet the minimum requirements to view this site, please considering increasing your device width to more than 300px.