What you’ll accomplish
By the end of this guide, your app will show a Home icon in the bottom tab bar. From any screen, tapping it takes the user straight back to your home screen — the most common way to give people a reliable “start over” button, without making them back out of screen after screen to get there.
The Home icon is a special kind of tab bar button — under the hood, it’s the Home Icon for Tab Bar content type. Unlike most buttons, it has no content source of its own: it simply points at the home screen you’ve already built, so once it’s placed there’s nothing else to configure.
Before you start
You’ll need:
- A MAM Suite app with MAM Main active (the Home Icon button type ships with MAM Main).
- An existing home screen — the buttons, content, or categories users see when they open the app. The Home icon sends users to this screen, so it should already be set up.
- Admin access to Mobile App Manager in WordPress.
If you haven’t built a home screen yet, do that first under App Setup → Home Page Design, then come back here.
How the Home icon fits together
It’s worth knowing what each piece does before you start clicking around.
- The home screen is what the user sees on launch. You build it in App Setup → Home Page Design by adding buttons, picking content for each, and styling the background.
- The Home icon is a tab bar button whose only job is to navigate back to that home screen. It doesn’t define any content of its own — when you select it as a button’s Content Type, the Content Source row simply reads “No settings required,” so there is nothing to fill in.
- “Use Tab Bar for Home Screen” is the app setting that makes the home screen render as a tab in the bottom tab bar, rather than as a standalone launch screen. How your app is structured determines whether you need this turned on for the Home tab to behave the way users expect.
Put simply: build your home screen once, add a Home icon button to surface it in the tab bar, and if needed, turn on the tab-bar home-screen setting so the two work together.
Steps
1. Open App Setup
In WordPress admin, open the Mobile App Mgr menu and select the App Setup tab. It opens on the Main Navigation sub-tab, where you’ll find the Home Page Design section — this button list is what makes up your bottom tab bar.
2. Add a new button
In the Home Page Design button list (on the Main Navigation tab), click the + — the red plus-circle, labeled “Click the + to add a button to your app.” A new button row appears; these main-navigation buttons are what build your bottom tab bar.
3. Name the button
Give the button a title — Home works well. Depending on your tab bar style, this may show up as a label beneath the icon.
4. Set the Content Type to “Home Icon for Tab Bar”
In the new button’s Content Type dropdown, choose Home Icon for Tab Bar.
Once you do, the Content Source row will read “No settings required” — there’s no field to fill in, and that’s expected. The Home icon always points at your existing home screen, so there’s nothing else to pick.
5. Choose an icon
Pick the button’s icon from the icon picker, choosing something that reads clearly as “home” to your users — a house outline is the common choice. Like any navigation button, the Home button will show whatever icon you pick here, so choose one before you save.
6. (If needed) Turn on “Use Tab Bar for Home Screen”
If you want the home screen itself to live inside the bottom tab bar as a tab, enable the Use Tab Bar for Home Screen setting, found under App Settings in the Tab Bar group. When it’s on, the home screen shows up as one of the tabs in the bottom tab bar instead of appearing as a separate launch screen.
7. Save and preview
Save your changes, then open the Previewer App tab in App Setup (or scan the previewer QR code) to load the app and confirm:
- The Home icon shows in the bottom tab bar.
- Tapping it from a deeper screen returns the user to the home screen.
Verify it works
- Open the app in the previewer.
- Tap into a listing, category, or other screen so you’re no longer on the home screen.
- Tap the Home icon in the bottom tab bar.
- Confirm you land back on the home screen you built in Home Page Design.
If the icon is missing or doesn’t navigate home, see Troubleshooting below.
Troubleshooting
The Home icon doesn’t appear in the tab bar.
Re-open App Setup and confirm the button’s Content Type is set to Home Icon for Tab Bar and the button is saved. If your home screen is meant to be a tab, also confirm Use Tab Bar for Home Screen is enabled.
Tapping Home doesn’t go anywhere useful.
The Home icon navigates to the home screen you’ve defined. If that screen is empty, build it out under Home Page Design first. The Home button has no content of its own to fall back on.
The button shows a “Not Installed!” warning.
This means the content type isn’t available — usually because MAM Main isn’t active. Confirm MAM Main is installed and active, then reload App Setup.
How it works under the hood (optional)
For admins who like to know what’s happening:
- The Home icon is the Home Icon for Tab Bar content type, registered by MAM Main as a content class. It has no content-source form — its setup form returns “No settings required.”
- When the app requests its data, the Home button delegates to the
mam_tab_managerfilter with a tab type ofhome_screenand a tab location ofcontent. This is how the app knows the button represents the home screen rather than a standalone destination. - The actual home screen content is stored separately as a home screen stack (and home screen categories), managed under Home Page Design — not on the Home button itself.
Related
- Use Tab Bar for Home Screen (app setting:
use_tabs_for_homepage) - Building Your App: Designing your home screen
- Building Your App: Adding buttons to the tab bar
