How to Add a Logout Button Under an ‘Account’ Parent Menu in WordPress

Here’s a complete guide to adding a logout link as a dropdown item under an “Account” menu in WordPress navigation:

Method 1: Using WordPress Menu Builder (No Code)

1. Go to Appearance > Menus in your WordPress dashboard
2. Select the menu you want to edit or create a new one
3. Click Screen Options at the top and check “Logout Link”
4. Now you’ll see a “Logout” option under “Links” that you can add to your menu
5. Drag it under your “Account” parent menu item

Method 2: Programmatically Add Logout Link (functions.php)

function add_logout_menu_item($items, $args) {
    if (is_user_logged_in() && $args->theme_location == 'primary') { // Change 'primary' to your menu location
        $items .= '<li class="menu-item logout-link"><a href="' . wp_logout_url(home_url()) . '">Log Out</a></li>';
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'add_logout_menu_item', 10, 2);

Method 3: Custom Menu Walker (For More Control)

class Custom_Nav_Walker extends Walker_Nav_Menu {
    function end_el(&$output, $item, $depth = 0, $args = null) {
        if ($item->title === 'Account' && is_user_logged_in() && $depth === 0) {
            $output .= '<ul class="sub-menu">';
            $output .= '<li class="menu-item"><a href="' . wp_logout_url() . '">Log Out</a></li>';
            $output .= '</ul>';
        }
        parent::end_el($output, $item, $depth, $args);
    }
}

Then in your theme where you call the menu:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'walker' => new Custom_Nav_Walker()
));

Method 4: Using a Plugin

1. Install a plugin like “Menu Icons” or “Nav Menu Roles”
2. These plugins give you more control over menu items, including adding logout links
3. You can then add a custom link with the URL: <?php echo wp_logout_url(); ?>

Styling the Logout Button (CSS)

/* Style the logout link differently */
.logout-link a {
    color: #ff0000 !important;
}

/* Or add an icon */
.logout-link a:before {
    content: "\f08b";
    font-family: "FontAwesome";
    margin-right: 5px;
}

You might want to conditionally show this only when a user is logged in by wrapping it in if (is_user_logged_in()) in your template files.