Custom Menu Extras on Genesis Child Theme

I want to add some items to the right of a menu in my Genesis child theme, but I want to add and change them using functions.php. (Network subsites use this theme and I want to change the menu on all subsites without editing each subsite.)

Here is the code I've added to the theme's functions.php:

//* Custom primary menu */
function menu_extras($menu, $args) {
	if( 'primary' !== $args->theme_location )
		return $menu;
	return $menu . '<li class="right"><a href="/item1/">Item 1</a></li> <li class="right"><a href="/item2/">Item 2</a></li> <li class="right"><a href="/item3/">Item 3</a></li> <li class="right"><a href="/item4/">Item 4</a></li>';
}
add_filter('wp_nav_menu_items','menu_extras', 10, 2);

This works fine, but I want subitems on some of the menu items. So for instance, mousing over "Item 2" should offer dropdown subitems "Item 2A" and "Item 2B" linked to their respective urls.

In that case, what would replace <li class="right"><a href="/item2/">Item 2</a></li> in the code above to create the subitems?

  • Predrag Dubajic

    Hey Burlington Avenue,

    Hope you're doing well today :slight_smile:

    I'm not that familiar with Genesis theme and how it handles dropdown menus and if child themes affect its structure but based on installation in my local site it should be something like this:

    <li class="right menu-item-has-children">
    	<a href="/item2/">Item 2</a>
    	<ul class="sub-menu">
    		<li class="right">
    			<a href="/item-submenu/">Item Submenu</a>
    		</li>
    	</ul>
    </li>

    Let us know if that worked for you.

    Best regards,
    Predrag

  • Burlington Avenue

    Thanks, Predrag! Good suggestion but the unordered list tag doesn't seem to make a difference. I added two sub-items to the first menu item using your code, but they aren't rendered. There's no change to the menu at all. Here's the relevant page source (the "Home" item was added via WP backend):

    <nav class="nav-primary" itemscope itemtype="http://schema.org/SiteNavigationElement">
    	<div class="wrap">
    		<ul id="menu-primary" class="menu genesis-nav-menu menu-primary">
    			<li id="menu-item-1349" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1349">
    				<a href="http://domain.com/" itemprop="url"><span itemprop="name">Home</span></a>
    			</li>
    	<strong>		<li class="right menu-item-has-children">
    				<a href="http://domain.com/item1/">Item 1</a>
    				<ul class="sub-menu">
    					<li class="right"><a href="http://domain.com/item1a/">Item 1A</a></li>
    					<li class="right"><a href="http://domain.com/item1b/">Item 1B</a></li>
    				</ul>
    			</li>
    			<li class="right">
    				<a href="http://domain.com/item2/">Item 2</a>
    			</li>
    			<li class="right">
    				<a href="http://domain.com/item3/">Item 3</a>
    			</li>
    			<li class="right">
    				<a href="http://domain.com/item4/">Item 4</a>
    			</li></strong>
    		</ul>
    	</div>
    </nav>

    (The replacement code in functions.php is between 'strong' tags.)

    So the submenu items are in the page source but not rendered. Is there CSS or Javascript I'm missing? Thanks again.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.