Beacon Menu
Md ProAn Account Menu in Your Header
Beacon Menu adds an account menu to your site’s header. Logged-out visitors get a login form, and members see their avatar, name and join year, buttons, and a menu of links.
Requirements
Details
Screenshots (3)
The member menu
The login form
Beacon Menu settingsUpdates (1)
3 changes in the latest release
See full history →- EnhancementChanges default avatar size to 48
- EnhancementAdds link to settings URL in MD > Settings > Header > Beacon Menu from Drop-ins page.
- Bug fixRemoves margin from header avatar
It’s a Header builder element, so you place it, point it at a WordPress menu, and set its buttons in one place.
One round avatar button does both jobs: it opens a login form for visitors and an account menu for members.
Start here
A Login Form for Visitors, a Menu for Members
The same round button shows a login form to visitors and an account menu to members.
A logged-in member sees their avatar, name and the year they joined, up to two buttons, and a two-column menu of links from any WordPress menu.
- Avatar, name, and a Member since year
- Up to two buttons
- A two-column menu of links, plus Log out, and WP admin for administrators
Set It Up in the Header Builder
Add the Beacon Menu element, then choose its menu, buttons and redirects.
Each Beacon Menu element has its own settings: the WordPress menu to show members, the panel title, two buttons, where members go after logging in and out, and the avatar size.
- Menu, Panel Title, Button Text and Button URL
- A second button, and Login and Logout Redirects
- Avatar Size, 48 pixels by default
More Features
The details that round out the menu.
A login form for visitors
A logged-out visitor gets a panel with a title, the WordPress login form and a Lost your password? link. The round avatar button that opens it has a pulse animation.
On mobile
The avatar button sits with the header’s other toggles and opens the menu full width.
Log out, and WP admin for administrators
A Log out link is added after your menu, plus WP admin for administrators. They show even when no menu is set.
All Features
Everything Beacon Menu adds, big and small.
Header builder element
Add it in MD settings → Header.
Login form
WordPress login form with a Lost your password? link.
Member panel
Avatar, name and a Member since year.
Two buttons
A main button, which also links the avatar and name, and an optional second one.
Menu of links
A two-column menu from any WordPress menu.
Login and Logout Redirects
Default to the page they logged in from, and the login screen.
Avatar Size
48 pixels by default.
Panel Title
“Login to your account” by default.
Mobile layout
Full-width menu, opened from the header toggles.
Styles and scripts
Added to MD’s compiled stylesheet and scripts.
Frequently Asked Questions
What do logged-out visitors see?
A panel with a title, the WordPress login form and a Lost your password? link.
What do members see?
Their avatar, name and join year, up to two buttons, and a two-column menu of links from a WordPress menu.
Where do members go after logging in or out?
Set Login Redirect and Logout Redirect on the element. Login defaults to the page they logged in from, and logout to the login screen.
Does it have hooks or filters?
No. The markup uses .beacon-menu, .beacon-trigger, .beacon-avatar, .beacon-content, .beacon-user, .beacon-buttons and .menu-beacon classes, so you can style it with CSS.
What do I need to run it?
MD 6.0 or later, WordPress 6.2 or later, and PHP 7.4 or later.