Skip to content

Instantly share code, notes, and snippets.

@zoerooney
Last active February 3, 2020 08:49
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zoerooney/6471748 to your computer and use it in GitHub Desktop.
Save zoerooney/6471748 to your computer and use it in GitHub Desktop.
Create an arguably cleaner nav menu in WordPress. Version 1 replacing the LI elements in a WordPress menu with SPAN elements, while maintaining classes, etc., while version 2 results in just A elements, still maintaining all the classes, etc. Post: http://zoerooney.com/blog/tutorials/removing-list-items-wordpress-menus/
<?php
// first let's get our nav menu using the regular wp_nav_menu() function with special parameters
$cleanmenu = wp_nav_menu( array(
'theme_location' => 'social', // we've registered a theme location in functions.php
'container' => false, // this is usually a div outside the menu ul, we don't need it
'items_wrap' => '<nav id="%1$s" class="%2$s">%3$s</nav>', // replacing the ul with nav
'echo' => false, // don't display it just yet
) );
// now we're ready to display, but when we do we'll replace the li elements with spans
echo str_replace( 'li', 'span', $cleanmenu );
?>
<?php
// first let's get our nav menu using the regular wp_nav_menu() function with special parameters
$cleanermenu = wp_nav_menu( array(
'theme_location' => 'social', // we've registered a theme location in functions.php
'container' => false, // this is usually a div outside the menu ul, we don't need it
'items_wrap' => '<nav id="%1$s" class="%2$s">%3$s</nav>', // replacing the ul with nav
'echo' => false, // don't display it just yet, instead we're storing it in the variable $cleanermenu
) );
// Find the closing bracket of each li and the opening of the link, then all instances of "li"
$find = array('><a','li');
// Replace the former with nothing (a.k.a. delete) and the latter with "a"
$replace = array('','a')
echo str_replace( $find, $replace, $cleanermenu );
?>
<!-- The "standard" output format, sanitized/ truncated for legibility, with custom class and link opening in new window -->
<div class="menu-upper-menu-container">
<ul id="menu-upper-menu" class="menu">
<li id="menu-item-1" class="twitter menu-item current-menu-item">
<a href="http://twitter.com/username" target="_blank">Blog</a>
</li>
<li><a><!-- you get the idea ---></a></li>
<li><a><!-- ... ---></a></li>
</ul>
</div>
<!-- The output from version 1 -->
<nav id="menu-upper-menu" class="menu">
<span id="menu-item-1" class="twitter menu-item current-menu-item">
<a href="http://twitter.com/username" target="_blank">Blog</a>
</span>
<span><a><!-- you get the idea ---></a></span>
<span><a><!-- ... ---></a></v>
</nav>
<!-- The output from version 2 -->
<nav id="menu-upper-menu" class="menu">
<a id="menu-item-1" class="twitter menu-item current-menu-item" href="http://twitter.com/username" target="_blank">Blog</a>
<a><!-- you get the idea ---></a>
<a><!-- ... ---></a>
</nav>
@pixeldev-zz
Copy link

Ciao, add ; after $replace = array('','a') in no-li-nav-menu-v2.php

@aurooba
Copy link

aurooba commented Jul 7, 2014

In no-li-nav-menu-v2.php line 12 is missing a semi-colon! :)

@mister-cairns
Copy link

This works fine until you have a menu item with 'li' in the title e.g. 'Public'. Replaces the li in the text and Url with an a

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment