Goal
Add a new button to the app, choose its content type, configure its per-button settings, place it on the home screen, bottom tab bar, or left menu, and verify it renders for the intended roles.
Prerequisites
- Admin access to Mobile App Mgr in WordPress
- A content-type decision: do you want a Login button, a Map, a Web URL, a WordPress Post Category list, etc.? See Content classes overview for the full set of 21 types.
- If you want different buttons for different user roles, turn those roles on first in Mobile App Mgr → App Navigation → User Roles. The role selector only appears once at least one role is managed.
Steps
1. Open App Navigation
Go to Mobile App Mgr → App Navigation. The page has four tabs:
- Main Navigation (section heading Home Page Design): the buttons on your home screen, which also make up your bottom tab bar.
- Left Menu (section heading Left Menu Design): the buttons in the slide-out left menu.
- User Roles: which WordPress roles get their own app content.
- Previewer App: QR codes for loading your app in the Previewer.
Pick the tab for where the button should live. Where you add the button is where it appears, so there is no separate placement step.
If your app plan includes a preconfigured home screen and bottom navigation, you’ll see a notice at the top of the page saying those sections are managed automatically and can’t be edited. In that case, add your button on the Left Menu tab, which stays yours to customize.
2. Choose the role
At the top of the tab, the Content for Role dropdown picks whose buttons you are editing. Any User Not Logged In is the list visitors see before they log in; each managed role has its own list.
Buttons are stored separately for each role, and a role does not inherit buttons from any other role. If a button should appear for several roles, add it on each role’s list.
To copy a whole list, use Clone from Role at the bottom of the tab: pick the role to copy from and click Clone. This replaces the current role’s list on that tab with a copy of the other role’s buttons. The copies are new buttons, so their per-button settings (step 5) start fresh.
3. Add the button
Click the red + next to “Click the + to add a button to your app.” A new row appears with:
- a title field (it starts as “Button”; type the label you want the app to show),
- a Select Icon button,
- a drag handle on the right for reordering,
- an expandable panel with the Content Type dropdown and the Content Source for that type.
New buttons start as Web URL, whose Content Source is a text field for the address (it starts with http://). Pick a different content type from the dropdown if you need one. The Content Source changes to match: a category picker, a form picker, or “No settings required” for types that have nothing to configure.
Picking a content type fills in that type’s default icon (a globe for Web URL, for example) as long as you haven’t chosen your own. To use a different icon, click Select Icon and choose from the built-in icon sets or your Media Library.
A list holds up to 12 buttons. Once you reach 12, the + is hidden.
4. Nothing to save
Every change on this page saves itself the moment you make it: the title, the icon, the content type and source, and the order when you drag a row. You’ll see a “Saving Changes” message followed by “All changes have been saved.” There is no Save button.
To remove a button, expand its row and click Delete Button. It is removed right away, with no confirmation step.
5. (Optional) Configure per-button settings
Per-button settings live on a different page: Mobile App Mgr → App Settings. Choose the same role in the Content for Role dropdown, then click the button’s own tab. Tabs are named Main – your button title for Main Navigation buttons and Left – your button title for Left Menu buttons.
What you see depends on the button’s content type:
- Most buttons show a single page of panels, such as Screen Type with the Screen Title and any other options for that kind of screen. Content types can add panels of their own, declared through
app_settings_categories(). - List, directory, and calendar buttons (for example a directory or events listing) get sub-tabs: General Settings, Layout Settings, Content Sections (when the content type offers sections), Tab Bar Manager (when it offers tab bar buttons), and Add Item Form.
Unlike App Navigation, these pages don’t autosave. Click Save Changes on each page before you move on. Settings are saved per role, so repeat them on each role’s copy of the button. The Clone from Role control on a button’s General Settings page copies settings from a button on another role.
If this is the first time you’ve opened App Settings, it first asks for your theme’s dark and light colors. Save those and the button tabs appear.
6. (Optional) Put the button in the bottom tab bar
The app-wide bottom tab bar is built from your Main Navigation buttons for each role, in the order you drag them. There is no separate tab bar page: to put a button in the tab bar, add it on the Main Navigation tab.
The tab bar’s look is set in Mobile App Mgr → App Settings → General Settings, in the Bottom Tab Bar panel: the bar and icon colors, Hide Tab Bar titles, and Use Tab Bar for Home Screen, which presents the home screen itself as one of the tabs.
For a Home tab, add a Main Navigation button with the Home Icon for Tab Bar content type. See Recipe: Configure the tab bar for the full layout.
7. (Optional) Detail-screen tab bar buttons
List, directory, and calendar screens can also show a small tab bar on each listing’s detail screen, with actions such as Favorites, Map, Email, Phone, or Website. These are set on the button’s Tab Bar Manager sub-tab in App Settings (step 5). Each available button shows its purpose, a Title field, a Show Button checkbox, and a drag handle for order. Click Save Changes when you’re done.
The list of available buttons comes from mam-main and your installed plugins; you choose which to show, you don’t add new ones here. These settings belong to the button itself, so they apply to every role that shares that button.
If one of these buttons needs per-listing logic (pre-populate a form, gate by user role, hide for listings the user doesn’t own), register a mam_main_add_tab_bar_item_{slug} filter from your sibling plugin. See Hook: mam_main_add_tab_baritem{slug} for the canonical pattern.
8. Verify in the Previewer
Open the Previewer App tab on App Navigation and scan the QR code to load your app in the Previewer. Log in as a user with the role you configured (or stay logged out for Any User Not Logged In) and find the button. It should appear with the title, icon, and content you set.
If it doesn’t appear:
- Check the role. Buttons are per role, so make sure you added it to the list for the role you’re testing.
- Check which tab you added it on. A Left Menu button won’t show on the home screen or tab bar.
- For a detail-screen tab bar button: make sure Show Button is checked on the Tab Bar Manager sub-tab and that you clicked Save Changes. Unchecked buttons are skipped entirely.
- For a tab bar button with a
mam_main_add_tab_bar_item_{slug}filter: returning[]hides the button on purpose. Return either a complete button or[]; a result without anidis dropped. - Check
mamdebugoutput for'missing tabbar'entries. This is logged when a visible tab bar button has no matchingmam_main_add_tab_bar_item_{slug}filter, so nothing can build it.
Verification
- The button appears on the Main Navigation or Left Menu tab of Mobile App Mgr → App Navigation for the role you configured.
- The button has its own Main – or Left – tab on Mobile App Mgr → App Settings for that role.
- The button renders in the Previewer app for the right role, in the spot you expected (home screen, bottom tab bar, or left menu).
- For dynamic detail-screen tab bar buttons, the filter callback fires once per listing each time the app loads that list (verify with a
mamdebuglog inside the callback).
Developer notes
- Buttons are stored per role and per location (
mainorleft) in the{prefix}mam_app_settings_buttonstable, scoped by account code. The olderlocal-app-button-array*options are migrated into this table. - The phone-data pipeline reads buttons through
apply_filters( 'mam_app_settings_get_buttons', false, $role, 'main'|'left' ), so per-role separation is enforced at fetch time. - The App Navigation page writes button changes through
mam_app_settings_set_button. Per-button settings from App Settings are written throughmam_app_settings_set_setting, and detail-screen tab bar choices throughmam_app_settings_set_tab_bar_settings.
Related articles
- Content classes overview
- Recipe: Configure the tab bar
- Recipe: Register a tab-bar button
- Hook: mam_app_settings_get_buttons
- Hook: mam_app_settings_get_setting
- Hook: mam_tab_manager
- Hook: mam_main_add_tab_baritem{slug}
- Hook: mam_main_skip_tab_bar_button
- Frozen public contracts reference
Metadata
| Field | Value |
|---|---|
| Article type | Recipe (Admin) |
| Plugin slug | mam-main |
| Applies to plugin version | 2.1.11+ |
| Category | Building Your App |
| Audience | WordPress admin |
| Estimated time | 10–20 minutes |
| Last verified | 2026-09-24 |
