Build your first mobile app in 15 minutes

By the end of this tutorial you’ll have a working mobile app running on your own phone. It will pull listings, layout, navigation, and branding straight from your WordPress site, and you’ll see it live in the WP Mobile App Manager Previewer app. No code, no app store submission, and no waiting — just your content, in an app, in about 15 minutes.

This is the fastest path from a fresh MAM Suite install to “I’m holding my app,” and that’s by design: the Setup Wizard picks sensible defaults for everything, and you can refine all of it later in the App Settings Manager. The goal here is first success, not a finished app.


What you’ll have at the end

  • MAM Suite installed and the App Setup Wizard completed
  • A home screen layout, bottom-navigation tabs, and brand colors chosen
  • The Previewer app installed on your phone
  • Your live WordPress / GeoDirectory content showing inside that app

Prerequisites

Before you start, make sure you have:

  • A WordPress site you can log into as an administrator (you need the manage_options capability).
  • The MAM Suite (Mobile App Manager) plugin, installed and activated, with a valid MAM account/entitlement.
  • GeoDirectory active on your site. MAM’s core content integration is built around GeoDirectory. The wizard checks for it on the very first step — if it isn’t active, the wizard stops at the welcome screen and points you to supported plugins instead of continuing. (WooCommerce, Business Directory, and other integrations are supported too, but the 15-minute path assumes GeoDirectory.)
  • A phone or tablet (iOS or Android) with a camera, where you can install a free app.

You do not need any GeoDirectory listings yet. If your site has zero listings, the wizard will tell you so and still let you preview an empty app shell. You’ll just see more once you add listings.


Step 1 — Open the App Setup Wizard

In your WordPress admin, go to the Mobile App Manager area and open the App Setup Wizard. If you’ve just installed MAM, you’ll also see an admin notice prompting you to finish configuring your app — that link takes you to the same place.

The first screen is Welcome to the App Setup Wizard, and it explains the basic idea: your app automatically pulls content from your WordPress site, so whenever you update something on your website, it shows up in the app with no extra steps.

On this welcome step the wizard checks whether GeoDirectory is active:

  • If GeoDirectory is active, you’ll see a confirmation and a count of how many GeoDirectory listings it found on your site.
  • It will also offer to install the MAM GeoDirectory plugin if it isn’t already installed. This is the integration that connects your listings to the app. Click Install MAM GeoDirectory Plugin and let it install and activate.

Once MAM GeoDirectory is installed, the Next Step: Set Up Your Home Screen → button becomes active. Click it.


Step 2 — Choose a home screen layout

The home screen is the first thing your users see when they open the app. The wizard offers three pre-built layouts:

  • Layout 1: Classic Directory
  • Layout 2: Modern Carousel
  • Layout 3: Events and Venues

Click the layout you like. Your choice is saved automatically as you click. You can fully customize any of these later in the App Settings Manager (where you can add GeoFilters, tag clouds, filter bars, date selectors, and more), so don’t overthink it — pick one and move on.

Click Next Step: Configure App Navigation →.


Step 3 — Set up your bottom navigation

This step controls the tabs in your app’s bottom navigation bar. You’ll see a list of tabs on the left and a live preview of your chosen layout on the right.

  • The Home tab is fixed and always first — it’s locked.
  • The other tabs (such as Deals, Map, Events, and Favorites) can be renamed by editing their labels and reordered by dragging them up or down. Changes save automatically.
  • Some tabs depend on extra plugins. To get Deals, the wizard offers to install MAM Special Offers; to get Events, it offers to install GeoDirectory Events. Install whichever ones you want now, or skip them — you can add them later.

When the order and labels look right, click Next Step: Colors and Branding →. (Clicking this also writes your navigation choices into your app settings.)


Step 4 — Pick your brand colors

Choose two colors that define your app’s look:

  • A light color (used for text and active icons on colored backgrounds)
  • A dark / highlight color (used for headers, buttons, and highlights)

The preview on the right re-colors as you adjust the dark color, so you can see the effect immediately. These are just your two starting colors — you can fine-tune every individual color later in the App Settings Manager.

When you’re happy, click Next Step: Get the App Previewer →.


Step 5 — Put the app on your phone

This is where it becomes real. The wizard shows you two QR codes:

  1. Download the Previewer. The first QR code links to the WP Mobile App Manager Previewer app, available on both the App Store and Google Play. Scan it with your phone, then install the free Previewer app.
  2. Load your content. After the Previewer is installed, scan the second QR code with your phone’s camera. This loads your site’s data into the Previewer and shows your content — your layout, your tabs, your colors, your listings — live inside the app.

That’s first success: your WordPress content, running as a native mobile app in your hand.

Click Final Step: Next Steps and Resources →.


Step 6 — Finish the wizard

The final screen confirms you’ve completed the App Setup Wizard. Your basic app structure is now in place. From here you can:

  • Add more features in MAM → App Settings Manager (GeoFilters, reviews, events, and more).
  • Refine your branding — colors, icons, and layouts, any time.
  • Re-preview your changes instantly: edit content or settings in WordPress, then reload in the Previewer to see them.

Click Finish & Go to the MAM Dashboard → to exit the wizard.


Troubleshooting

  • The wizard stops at the welcome screen. GeoDirectory isn’t active. Activate it, then reopen the wizard — the remaining steps appear only once the wizard detects a supported core plugin.
  • “It looks like you don’t have any GeoDirectory listings yet.” That’s fine for previewing. Add a few listings in GeoDirectory and reload the Previewer to see them populate.
  • The Previewer shows nothing after the second QR scan. Confirm you scanned the second (content) QR code, not the download one, and that your phone has internet access. Re-scan to reload your site’s data.

What’s next

You now have a running app and the muscle memory for the wizard loop: change something in WordPress, reload in the Previewer, see it live. From here:

  • Customize deeper in the App Settings Manager — this is where the no-code power of MAM Suite lives.
  • Add the plugins you skipped (Special Offers for Deals, GeoDirectory Events for Events) to light up those tabs.
  • When you’re ready to ship, use the Publish App menu to start the App Store and Google Play submission process — our team handles the heavy lifting from there.

See the rest of the Getting Started and Building Your App sections of the Codex to go from a previewed app to a published one.

Was this article helpful?
Contents

    Need Support?

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