I need to display a simple menu like this:

<nav class="main">
<a href="/" class="home">
    <span class="logo"></span>
    <span class="company-name">My Company</span> 
    <span class="page-name">Home</span>
<a href="one-page">One page</a>
<a href="two-page" class="selected-current">Two page</a>
<a href="three-page">Three page</a>
<a href="about">About</a>
<div class="account">
    <a href="login" class="login">Login</a>

For this I proceed in this way:


// Adding Log in/out links to a Specific WordPress Menu
add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<div class="account"><a href="'. wp_logout_url() .'" class="login">Logout</a></div>';
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<div class="account"><a href="'. site_url('wp-login.php') .'" class="login">Login</a></div>';
    return $items;


<nav class="main"><?php
$menuParameters = array(
  'theme_location' => 'primary',
  'fallback_cb'     => 'starkers_menu',
  'container'       => false,
  'echo'            => false,
  'items_wrap'      => '%3$s',
  'depth'           => 0,
echo strip_tags(wp_nav_menu( $menuParameters ), '<a><div>' );

I can not manage the class pages for current and the tags (span) for the first url (home).

Thank you in advance for your help.


  • Can you be more precise about what the problem is? Also, what is the purpose of strip_tags() on the menu? Jan 25, 2013 at 0:21

1 Answer 1


To achieve this, you have to extend the Walker_Nav_Menu class.

First, create a class that extends the Walker_Nav_Menu

 * Custom nav menu.
 * Code copy-pasted from /wp-includes/nav-menu-template.php
 * @package WordPress
 * @since 3.0.0
 * @uses Walker_Nav_Menu
class User16975_Custom_Menu_Walker extends Walker_Nav_Menu {
     * @see Walker_Nav_Menu::start_lvl()
     * @since 3.0.0
     * @param string $output Passed by reference.
    function start_lvl(&$output) {}

     * @see Walker_Nav_Menu::end_lvl()
     * @since 3.0.0
     * @param string $output Passed by reference.
    function end_lvl(&$output) {

     * @see Walker::start_el()
     * @since 3.0.0
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $item Menu item data object.
     * @param int $depth Depth of menu item. Used for padding.
     * @param object $args
    function start_el(&$output, $item, $depth, $args) {

Then, implement the start_el function following your needs.

Finally, make WP use your class instead of the default one :

add_filter( 'wp_edit_nav_menu_walker', 'user16975_walker_class');
function user16975_walker_class($class){
    return "User16975_Custom_Menu_Walker";

You can also implement end_lvl in your class to append the login link.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.