Add a new screen (button) to your app

Goal

Every screen in your app starts life as a button — one you place on the home screen or in the left menu, then hand a job: a Web URL to open, a Map to show, a WordPress category to list, and so on. Give it a name, point it at the right content, and the screen is built. In MAM Suite, a “button” and the “screen” it opens are really the same thing: the button is what the user taps, and the content type you pick decides what appears when they do.

Before you start

  • Where you work. You’ll do all of this inside the WordPress admin, under Mobile App Mgr → App Setup. No code, no app rebuild — buttons live as app content and go out to your app the moment you publish.
  • Two placements. Every button lives in one of two spots: the Home Page (the main grid of buttons / tab bar) or the Left Menu (the slide-out drawer). Which tab you’re on in App Setup decides which one you’re building.
  • Content types depend on what’s installed. The screen types you can pick from come from the content classes registered in your install — think of these as the building blocks behind each screen type. Core ships types like Web URL, Map, WordPress Post Category, WordPress Page Content, Favorites, Make Phone Call, Social Media, and Login / Logout. Directory and listing types (for example GeoDirectory, Business Directory, WP Store Locator, The Events Calendar) only show up once the matching MAM plugin is active. Don’t see a type you expected? The plugin that provides it is probably not installed, or not yet active.
  • A note on naming. We describe the UI labels here — tab names, button text, section headers — as they appear in a standard install. Yours may word a few things differently depending on theme or version, but the flow you follow is the same.

Steps

1. Open App Setup and choose a placement

  1. In the WordPress admin, go to Mobile App Mgr → App Setup.
  2. Decide where this new screen should live:
    • To add it to the home screen, stay on the Main Navigation tab (the “Home Page Design” panel).
    • To add it to the slide-out drawer, switch to the Left Menu tab.

If your app uses managed user roles, you’ll find a Content for Role dropdown at the top of the panel. Pick the role you’re building for before you do anything else — buttons are stored per role, so a button you add while “Any User Not Logged In” is selected is a different button entirely from one added for a logged-in role.

2. Add the button

  1. Scroll past your existing buttons to the add-new section at the bottom of the list. It shows a red + (plus) icon with the prompt “Click the + to add a button to your app”.
  2. Click the + and a new button appears at the bottom of your list, already carrying a default name and a default content type (Web URL) — so there’s always something to configure, right from the start.

Each placement tops out at twelve buttons — once you hit that limit, the + disappears. Need more entry points? Tuck extra content into the left menu or onto detail screens instead.

3. Choose the screen type (content type)

  1. Expand the new button if it isn’t already open (click its row, or the chevron on the left of the button).
  2. Find the Content Type dropdown inside the button’s options.
  3. Pick the type of screen this button should open — for example:
    • Web URL — opens an in-app browser to a web address.
    • Map — shows a geo map with markers.
    • WordPress Post Category — shows a listing of posts from a category.
    • WordPress Page Content — renders a single WordPress page or post inside the app.
    • Favorites — shows the user’s saved items.
    • Make Phone Call — taps to dial a number (an action, not a screen).
    • A directory / listing type (GeoDirectory, Business Directory, etc.) — shows a searchable list of records, when the providing plugin is installed.

This choice is what turns the button into a particular kind of screen. Pick a listing-style type (directories, maps with records) and you’ll also get a Total Listings field, letting you see — and cap — how many records are pulled into the app.

4. Point the screen at its content (Content Source)

Most screen types need more than a category — they need to know what to show. Pick a type that requires it, and a Content Source field appears directly under the Content Type dropdown:

  • Web URL asks for the address to open.
  • WordPress Post Category asks which category to list.
  • Map and directory types ask which source / directory to pull from.

Fill in the Content Source for whatever type you picked. Some types — Login, Logout, Share App, or a plain action button, for example — don’t need a source at all, so this field simply won’t appear.

5. Name the screen and set its icon

  1. In the button’s header row, type the button name into the title field — this is the label your users will actually see, whether it’s under the button on the home screen or as the row text in the left menu.
  2. Click the icon area on the button to pick an image — choose from the bundled icon sets (Font Awesome, Ionic, and a Popular set) or upload your own from your media library. New buttons start out with a default placeholder icon until you do.
  3. Use the Text and Image checkboxes on the button row to decide whether users see the label, the icon, or both.

6. Configure the screen’s detailed settings

Adding the button gets the screen onto the map — but many screen types have a settings panel of their own, for layout, colors, and behavior, waiting just underneath.

  1. Open the screen’s settings (the per-button settings panel — typically reached from the app settings area for that button).
  2. You’ll find the settings grouped into categories. Richer screen types — lists, directories, maps, calendars, favorites — organize the panel into sub-tabs such as General Settings, Layout Settings, Content Sections, Tab Bar Manager, and Add Item Form, and you’ll only see the tabs that actually apply to your chosen type. Simpler types keep it to one General Settings view.
  3. Adjust whatever you need — the list layout, header colors, which content sections appear — and save.

Leave a color at its default and it inherits your app’s configured dark/light theme colors automatically — so a brand-new screen usually looks on-brand from the moment it’s born, no extra styling required.

7. Reorder, preview, and publish

  1. Drag buttons by the move handle — the up/down arrows on the button row — to set the order they’ll appear in.
  2. See it before anyone else does: use the App Setup → Previewer App tab to scan a QR code and view your changes in the WPMAM Previewer app before going live.
  3. When it looks right, publish — that’s what pushes the new screen out to your app. No need to worry about an App Store or Play Store rebuild; a screen change ships as app content, live as soon as you publish.

Notes and gotchas

  • Buttons are per-role and per-placement. A button you add on the Home Page for one role has no connection to the same idea added to the Left Menu, or to another role entirely. If a screen seems to “disappear,” the first thing to check is whether you’re viewing the same role and placement you created it under. Clone from Role lets you copy a role’s whole layout as a starting point, if that’s faster.
  • Deleting a screen. Each button carries a Delete Button link in its expanded options. It’s a narrow delete — removing the screen only from that specific placement and role, nothing more.
  • Missing content type. A saved button showing “… Not Installed!” just means the plugin behind that content type isn’t active right now. Re-activate the plugin, or switch the button over to a different content type.
  • Per-screen settings keys are frozen. Behind the scenes, every saved button stores its type (the content type) and source (the content source) as part of your saved app layout. Change a screen’s type after launch, and you change what users see — so it’s worth re-checking the Content Source any time you switch types.
  • Content classes overview — the catalog of screen types and what each one renders.
  • Building Your App: Home screen layout — arranging buttons, the tab bar, and the grid.
  • Building Your App: Left menu — adding entries and separators to the slide-out drawer.
  • App Settings Reference — the per-screen settings (layouts, content sections, tab bar) available for listing-style screens.

What’s next

With the screen in place, here’s where most people go next: pick its layout and colors under Layout Settings, add Content Sections to build out richer list screens, and — for directory or listing screens — set up the Add Item Form so app users can submit their own records. Then preview, and publish.

Was this article helpful?
Contents

    Need Support?

    Can't find the answer you're looking for? Don't worry we're here to help!