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

Designody

WordPress and Genesis Tutorials

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

Custom Navigation Menu Location in Genesis Sample

Last Updated on June 1, 2018Leave a Comment 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

Leave a Reply Cancel reply

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

You should use these Shortcodes tag and attributes while sharing the code:
Example: [html]I <3 HTML[/html] → [html][css][php][js][java][json][raw]

Primary Sidebar

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 center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout Logo menu navigation Navigation Menu Nav Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Split Navigation Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress

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