• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Custom Navigation Menu Location in Genesis Sample

Last Updated on June 1, 2018 Favorited: 1 times

The new Genesis Sample theme comes with two menus Primary and secondary. Unfortunately, the secondary menu is footer menu and not after primary menu.

This tutorial provides the steps to register a custom Menu navigation and display the menu assigned to it in the site header with the proper markup and corresponding skiplink in Genesis

While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme.

Step 1.

Edit child theme’s functions.php

a) Add a ‘custom’ menu theme location.

Change this — from genesis-sample/functions.php line 161

// Renames primary and secondary navigation menus.
add_theme_support(
    'genesis-menus', array(
        'primary'   => __( 'Header Menu', 'genesis-sample' ),
        'secondary' => __( 'Footer Menu', 'genesis-sample' ),
    )
);

to

// Renames primary, secondary and Custom navigation menus.
add_theme_support(
    'genesis-menus', array(
        'primary'   => __( 'Header Menu', 'genesis-sample' ),
        'secondary' => __( 'Footer Menu', 'genesis-sample' ),
        'custom'    => __( 'Custom Menu', 'genesis-sample' ),
    )
);

b) Add the following. Make sure where you are adding the snippet, after the Step 1 a) snippet or at end of functions.php. You can Change (12 or 14 or15) or Remove the priority from action ‘wpize_custom_do_nav’

add_action( 'genesis_header', 'wpize_custom_do_nav', 14 );//change or remove the priority
/**
 * Echoes the "Custom Navigation" menu. from genesis/lib/structure/menu.php PART 1
 */
function wpize_custom_do_nav() {

    // Do nothing if menu not supported.
    if ( ! genesis_nav_menu_supported( 'custom' ) || ! has_nav_menu( 'custom' ) ) {
        return;
    }

    $class = 'menu genesis-nav-menu menu-custom';
    if ( genesis_superfish_enabled() ) {
        $class .= ' js-superfish';
    }

    genesis_nav_menu( array(
        'theme_location' => 'custom',
        'menu_class'     => $class,
    ) );

}


// Add typical attributes for navigation elements. from genesis/lib/functions/markup.php 494, 1232 and 1249 PART 2
add_filter( 'genesis_attr_nav-custom', 'genesis_attributes_nav' );

add_filter( 'genesis_attr_nav-custom', 'wpize_skiplinks_attr_nav_custom' );
/**
 * Adds ID markup to custom navigation.
 *
 * @param array $attributes Existing attributes for custom navigation element.
 * @return array Amended attributes for custom navigation element.
 */
function wpize_skiplinks_attr_nav_custom( $attributes ) {

    $attributes['id'] = 'genesis-nav-custom';

    return $attributes;

}


add_filter( 'genesis_skip_links_output', 'wpize_skip_links_output', 4 );
/**
 * Adds skip link for custom navigation. from genesis/lib/structure/header.php 859 and 826 PART 3
 *
 * @param array $links Exiting skiplinks.
 * @return array Amended skiplinks.
 */
function wpize_skip_links_output( $links ) {

    if ( genesis_nav_menu_supported( 'custom' ) && has_nav_menu( 'custom' ) ) {
        $links['genesis-nav-custom'] = __( 'Skip to custom navigation', 'genesis' );
    }

    return $links;

}

 

c) Add the custom menu to the list of menus to be combined in media mobile media screen width.

Change this

/**
 * Defines responsive menu settings.
 *
 * @since 2.3.0
 */
function genesis_sample_responsive_menu_settings() {

    $settings = array(
        'mainMenu'         => __( 'Menu', 'genesis-sample' ),
        'menuIconClass'    => 'dashicons-before dashicons-menu',
        'subMenu'          => __( 'Submenu', 'genesis-sample' ),
        'subMenuIconClass' => 'dashicons-before dashicons-arrow-down-alt2',
        'menuClasses'      => array(
            'combine' => array(
                '.nav-primary',
            ),
            'others'  => array(),
        ),
    );

    return $settings;

}

to

/**
 * Defines responsive menu settings.
 *
 * @since 2.3.0
 */
function genesis_sample_responsive_menu_settings() {

    $settings = array(
        'mainMenu'         => __( 'Menu', 'genesis-sample' ),
        'menuIconClass'    => 'dashicons-before dashicons-menu',
        'subMenu'          => __( 'Submenu', 'genesis-sample' ),
        'subMenuIconClass' => 'dashicons-before dashicons-arrow-down-alt2',
        'menuClasses'      => array(
            'combine' => array(
                '.nav-primary',
                '.nav-custom',
            ),
            'others'  => array(),
        ),
    );

    return $settings;

}

or You can simply add a new nav class ‘.nav-custom’, after ‘.nav-primary’,

Step 2.

Add the following in child theme’s style.css

@media only screen and (min-width: 960px) {
    .nav-custom .genesis-nav-menu a {
        padding-left: 15px;
        padding-right: 15px;
    }
    .nav-custom {
        clear: both;
        border-top: 1px solid #eee;
    }
}

Step 3.
Hover Appearance >> Menus >> Manage Locations || Create a new Menu, assign your desired menu in the Custom Menu location.

References:
genesis/lib/structure/menu.php
genesis/lib/functions/markup.php
genesis/lib/structure/header.php

Related Posts

  • Post list design showing featured image when hovered in Genesis
  • Magazine style Singular Post Design in Genesis Sample
  • Post Page Blog Archive Template with Layouts in Genesis
  • Site Inner with container background in Genesis Sample
  • Remove Responsive Menus in Genesis Sample 3.0.0+

Categories: Free Content, Genesis Tutorials Tags: custom, Genesis Sample, Navigation Menu

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service