Skip to content

Nuface Blog

隨意隨手記 Casual Notes

Menu
  • Home
  • About
  • Services
  • Blog
  • Contact
  • Privacy Policy
  • Login
Menu

【WordPress Tips】Show “Login / Logout” Dynamically in the Frontend Menu (Supports Ultimate Member Plugin)

Posted on 2025-11-042025-11-04 by Rico

In my WordPress site, I wanted the navigation menu to display “Login” when users are not logged in, and automatically change to “Logout” after login.
Here’s how I achieved it — a clean and simple solution that works perfectly with the Ultimate Member plugin.


🎯 Goal

  • Automatically switch the frontend menu item between Login and Logout
  • Redirect users properly after login or logout
  • Fully compatible with the Ultimate Member plugin’s custom login page

🧱 Method 1: Use a Placeholder Menu Item

Step 1: Create a Menu Item

Go to Appearance → Menus and add a Custom Link:

  • URL: #loginout
  • Link Text: Login/Logout (This will be replaced dynamically later)

Save the menu.


Step 2: Add the Code

Insert the following snippet into your theme’s functions.php file, or use a plugin like Code Snippets.

add_filter('wp_nav_menu_objects', function($items, $args){
    foreach ($items as &$item) {
        if ($item->url === '#loginout') {
            if ( is_user_logged_in() ) {
                // ✅ Logged in: show "Logout"
                // To use Ultimate Member’s logout flow, use the UM action link below
                $item->title = 'Logout';
                $item->url   = home_url('/?um_action=logout');
            } else {
                // ✅ Not logged in: show "Login"
                // Replace with your actual Ultimate Member login page URL
                $um_login_page = site_url('/login/');
                $item->title = 'Login';
                $item->url   = $um_login_page;
            }
        }
    }
    return $items;
}, 10, 2);

🧩 How to Find Your Ultimate Member Login Page URL

  1. Go to Ultimate Member → Settings in your WordPress dashboard
  2. Open the Pages tab
  3. Find the Login Page and copy its permalink (e.g., /login/ or /member-login/)
  4. Replace the path in the code: $um_login_page = site_url('/login/');

💡 Additional Notes

  • If you’re using a caching plugin or CDN, make sure to exclude logged-in users from cache — otherwise, the menu might not update immediately after login.
  • To redirect users to a specific page after logout, you can use: $item->url = wp_logout_url( home_url('/') ); or, for Ultimate Member’s own flow: $item->url = home_url('/?um_action=logout');

🚀 Conclusion

This lightweight snippet allows you to:

  • Display Login before a user signs in
  • Automatically switch to Logout after login
  • Seamlessly integrate with Ultimate Member’s login/logout system
  • Avoid installing extra plugins for something so simple

📌 Further Reading

  • Ultimate Member Documentation
  • WordPress Codex: wp_nav_menu_objects Hook

Recent Posts

  • Enable Logrotate for Dovecot in Docker: Prevent Huge Log Files and Disk Overflow
  • 在 Docker Dovecot 中啟用 Logrotate:避免 log 爆量、磁碟被塞滿的最佳做法
  • How to Choose Suricata RuleSets on OPNsense — Practical Guide & Best Recommendations
  • OPNsense Suricata 使用指南 — 規則(RuleSets)該怎麼選?最佳實務與推薦設定
  • Proxmox VE + Proxmox Backup Server Integration & Cross-Node Restore Guide

Recent Comments

No comments to show.

Archives

  • November 2025
  • October 2025

Categories

  • AI
  • Apache
  • Cybersecurity
  • Database
  • DNS
  • Docker
  • Fail2Ban
  • FileSystem
  • Firewall
  • Linux
  • LLM
  • Mail
  • N8N
  • OpenLdap
  • OPNsense
  • PHP
  • QoS
  • Samba
  • Switch
  • Virtualization
  • VPN
  • WordPress
© 2025 Nuface Blog | Powered by Superbs Personal Blog theme