Recently, I learned a great tip on how to show a dynamic “Login/Register” or “Hi, Username | Logout” toggle in WordPress — and it works beautifully with GeneratePress Blocks and GeneratePress Pro!
In this post, I’ll share exactly how I did it using a custom shortcode, some lightweight PHP, and clean CSS styling. You’ll be able to use this anywhere on your site — header, sidebar, even inside block layouts!
🔍 What We’ll Build
- ✅ Login/Register links for guests
- 🙋♂️ Hi, Username | Logout links for logged-in users
- 💻 Clean and modern style with CSS
- 📦 A simple shortcode for use in headers, sidebars, and posts
Step 1: Add This PHP Function
Add the following code to your theme’s functions.php file or in a custom functionality plugin:
function gp_login_register_toggle() {
if ( is_user_logged_in() ) {
$current_user = wp_get_current_user();
$name = $current_user->user_firstname ? $current_user->user_firstname : $current_user->user_login;
// Optional: change to your user dashboard or profile page
$account_url = site_url('/my-account');
return '<div class="login-register-block">👋 Hi, <a href="' . esc_url($account_url) . '"><strong>' . esc_html($name) . '</strong></a> | <a href="' . esc_url(wp_logout_url(home_url())) . '">Logout</a></div>';
} else {
return '<div class="login-register-block"><a href="' . esc_url(wp_login_url()) . '">🔐 Login</a> / <a href="' . esc_url(wp_registration_url()) . '">📝 Register</a></div>';
}
}
add_shortcode('gp_login_toggle', 'gp_login_register_toggle');
🔧 What it does:
- Detects login status
- Shows personalized greeting with “Logout” for logged-in users
- Shows “Login / Register” links for guests
- Wraps everything in a clean CSS class
.login-register-block {
font-weight: 600;
font-size: 15px;
text-align: right;
padding: 10px 15px;
background: #f4f8fb;
border-radius: 8px;
display: inline-block;
}
.login-register-block a {
color: #0073aa;
text-decoration: none;
margin: 0 5px;
transition: color 0.3s ease;
}
.login-register-block a:hover {
color: #005177;
text-decoration: underline;
}
💡 Pro Tip: Change the background color to match your site’s brand.
🧪 Step 3: Use the Shortcode Anywhere
Just paste this shortcode wherever you want it to appear:
[gp_login_toggle]✅ Works great in:
- Header widget areas
- Sidebars
- Navigation (with shortcode plugin)
- Pages or posts
💡 Bonus Ideas
- ✨ Add icons for a modern touch
- 🎯 Redirect logout to home or a thank-you page
- 🧠 Connect this with your WooCommerce account page
📢 Ready to Engage Your Users?
Creating a custom login/logout toggle not only makes your website feel smarter — it also boosts user engagement and adds a personal touch. Whether you’re running a blog, an eCommerce store, or a membership site, this tiny tweak adds big value.
