Add a new menu

The following are examples of adding a menu above and below the header, and inside the footer.
Here you can see the Customizer -> Menus -> View All Locations. The Primary Menu, Preheader Menu, Secondary Menu and the Footer Menu. As well as the preview of what it looks like.



Adding a new preheader menu.

// Register new preheader Menu
function register_preheader_menu() {
 register_nav_menu( 'preheader-menu',__( 'Preheader Menu' ) );
add_action( 'init', 'register_preheader_menu' );

// Add the new preheader menu - where it is to be located
 beans_add_smart_action( 'beans_header_before_markup', 'preheader_menu' );

function preheader_menu() {
   if ( has_nav_menu( 'preheader-menu' ) ) { 
// only show if the  location preheader-menu has a menu assigned
 wp_nav_menu( array(
 'menu' => 'Preheader Menu',
 'menu_class' => 'preheader-menu', // I added my own class to the menu.
 'container' => 'nav',
 'container_class' => 'uk-navbar uk-float-center',
 'theme_location' => 'preheader-menu',
 'beans_type' => 'navbar'
   ) );

Adding a new menu below the header

// Register new Secondary Menu
function register_secondary_menu() {
 register_nav_menu( 'secondary-menu',__( 'Secondary Menu' ) );
add_action( 'init', 'register_secondary_menu' );

// Add the new secondary menu - where it is to be located
 beans_add_smart_action( 'beans_header_after_markup', 'secondary_menu' );

function secondary_menu() {
 if ( has_nav_menu( 'secondary-menu' ) ) { // only show if the location secondary-menu 
has a menu assigned
 echo beans_open_markup( 'secondary_menu_nav', 'div', 'class=secondary-menu' );
 wp_nav_menu( array(
 'menu' => 'Secondary',
 'menu_class' => 'uk-navbar-nav uk-visible-larget',
 'container' => 'nav',
 'container_class' => 'uk-container uk-container-center uk-navbar',
 'theme_location' => 'secondary-menu',
 'beans_type' => 'navbar'
 ) );
 echo beans_close_markup( 'secondary_menu_nav', 'div' );


Adding a new footer menu right before the copyright information.

// Register new Footer Menu
function register_footer_menu() {
 register_nav_menu( 'footer-menu',__( 'Footer Menu' ) );
add_action( 'init', 'register_footer_menu' );

// Add the new secondary menu - where it is to be located
 beans_add_smart_action( 'beans_fixed_wrap[_footer]_prepend_markup', 'footer_menu' );

/* Overwrite the footer credit and add the footer menu
 beans_add_smart_action( 'beans_footer_credit_right_text_output', 'footer_menu' );

function footer_menu() {

wp_nav_menu( array(
 'menu' => 'Footer Menu',
 'menu_class' => 'uk-subnav uk-container uk-container-center',
 'theme_location' => 'footer-menu',
 'beans_type' => 'navbar'
 ) );

// So we get the menu in the correct location
 beans_remove_attribute( 'beans_menu[_navbar][_footer-menu]', 'class', 'uk-navbar-nav' );

wp_nav_menu() has several parameters you can use when displaying a menu.

theme_location: The menu to call that is associated with the specific theme location.
menu: Call a specific menu ID, slug, or name.
container: nav.
container_class: The CSS class of the container.
menu_class: The CSS class given to the unordered list. This defaults to menu.
fallback_cb: A function to call in the event that no menu items have been given. By default, wp_list_pages() will be called.
before: Text that is displayed before the link text but within the link.
after: Text that is displayed after the link text but within the link.
link_before: Text that is displayed before the link.
link_after: Text that is displayed after the link.
depth: How many levels the menu should display, which is useful for things like drop-down menus. This is set to 0 (any level) by default.
walker: Allows a custom walker PHP class to be defined to create the menu.
echo: Whether to display the menu or return it for use in PHP. This defaults to true and displays the menu.

From: goodbye headaches hello menus

Instead of registering one menu at a time one can register them all at once. Remove the part that registers each menu separately (keep the rest of the code) and instead add the multiple menu register code.

// Register new Menus
function register_multiple_menus() {
      'preheader-menu' => __( 'Preheader Menu' ),
      'secondary-menu' => __( 'Secondary Menu' ),
      'footer-menu' => __( 'Footer Menu' ),
add_action( 'init', 'register_multiple_menus' );

Instead of adding a menu one can also adjust the location of the Primary menu.

The default primary menu is located inside the header to the far right of the site title and tagline.
On can move it to another location instead of adding a new menu.

// Move menu below header.
 beans_modify_action_hook( 'beans_primary_menu', 'beans_header_after_markup' );

// Remove float and add container.
 beans_remove_attribute( 'beans_primary_menu', 'class', 'uk-float-right' );
 beans_wrap_markup( 'beans_primary_menu', 'example_primary_menu', 'div', 
array( 'class' => 'uk-container uk-container-center' ) );

To learn about hooks to where one can add for instance a menu check out my other article about widget locations. Dxperiment with the code to get the menu where you want as well as the uk classes (UiKit).

The second piece of code removed the uk float right that pushes the existing primary menu to the right. Then add instead a uk container that brings it to the center.
Instead of adding the menu below the header we can add a new menu.


To style a menu see my Styling a menu tutorial.



I need to take a closer look at:
and the following code:

/* This code snippet adds a secondary sticky navigation in a subheader in #BeansTheme Framework.
* You can paste this in your functions.php file or add it in a a child-theme customization plugin. 
* Some refs :
// Enqueue UIkit components.
add_action( 'beans_uikit_enqueue_scripts', 'mytheme_enqueue_uikit_components' );
function mytheme_enqueue_uikit_components() {

// Add sticky component.
beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' );
add_action( 'init', 'mytheme_register_sub_navigation' );
// Register sub navigation.
function mytheme_register_sub_navigation() {
register_nav_menus( array(
'secondary' => __( 'Secondary Menu', 'mytheme' ),
) );
// Add add subnavigation after the header closing markup.
add_action( 'beans_header_after_markup', 'mytheme_secondary_menu' );
function mytheme_secondary_menu() {
<div data-uk-sticky class="tm-subnavigation">
<div class="uk-container uk-container-center">
<nav class="tm-secondary-menu uk-float-right uk-block" role="role" itemscope="itemscope" itemtype="">
<?php wp_nav_menu( array(
'theme_location' => has_nav_menu( 'secondary' ) ? 'secondary' : '',
'fallback_cb' => 'beans_no_menu_notice',
'container' => '',
'menu_class' => 'uk-subnav uk-subnav-line uk-margin-bottom-remove',
'beans_type' => 'subnav'
) ); ?>


Filed under: Learning

No comment yet, add your voice below!

Add a Comment

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

Comment *
Name *
Email *