Did you know that WordPress can power a mobile app, not just your website?
For example, let’s say you have a church website in WordPress. You can create a mobile app that shows your video sermons, event photos, articles, and more. If you have a restaurant website, you can display your menu, ordering instructions, and store locations.
You can even create an app for your online store using WooCommerce that allows people to purchase your products through the app and sends them push notifications.
This is all possible because WordPress has grown from a blog, to a CMS, and now to an application platform. New technology such as the WP API is pushing WordPress into the future by allowing it to power things like mobile apps.
What this means for you is that you can connect with your audience in new and exciting ways such as by sending a push notification when you have a sale, or allowing people to read your articles while they are away from their computer.
Do you need a mobile app?
Not all WordPress sites need a companion mobile app.
If you are a casual blogger using WordPress.com, a mobile app is probably not right for you. However, many people prefer using mobile apps over browsing a website and many businesses may find advantages.
- Mobile apps help your audience get your content faster.
- They can show some content offline
- Send push notifications
- Make use of device features such as geolocation, camera, contacts, and more
- Provide interactivity not possible on a website
Statistics show that more time is spent in apps than on the mobile web and things like push notifications can create higher engagement than web pages.
If you’ve decided a mobile app is right for you, let’s talk about how to make your app.
How to make a mobile app with WordPress
There are several ways to make a mobile app using your WordPress content.
Get a custom app
Having someone build you a custom app is a great way to get all of the features you want, especially if you have unique needs. This can be fairly expensive – anywhere from $20,000 and up. If that’s not in your budget, keep reading.
App builders are a great way to build an app yourself on a budget. Instead of paying a large upfront cost, you can pay a monthly fee for app hosting and features.
There are a variety of visual app builders available that can help you put your WordPress content in a mobile app without writing code. Pricing and features vary, and they all have different levels of integration with WordPress.
Our friends over at AppPresser has recently launched a new product called Reactor.
Unlike other app builders, Reactor is specifically designed to make it easy to build an app that connects to your WordPress website.
You can add WordPress posts, pages, photos, videos, custom content like events and more. It even has deep integration with things like custom post types, and certain plugins like WooCommerce.
Lots of app builders include WordPress as an afterthought, but it’s not always easy to configure. Reactor includes things like custom post types as a priority.
Other features include push notifications integration, a handy live app preview, and automatic app building.
How to Build a Mobile App with Reactor
Building a mobile app with Reactor is all done through their app building interface. It connects to your WordPress website to display your content, and makes it easy to put your app together.
To build your app, first you’ll need a WordPress website with the Reactor Core plugin installed. You need to login to your WordPress admin and go to Plugins » Add New. Next, search for Reactor Core to install and activate this plugin.
*You’ll need an account on Reactor for the steps below, you can sign up for a free trial here.
Login to your app building dashboard on Reactor. The first thing you’ll notice is that it is a very familiar WordPress interface, so you will feel right at home. There are some videos to help you get started on the dashboard, just click an item to reveal the video.
Building your app is similar to building a website: you create some pages, put those into your menu, and then you put it all together under Apps.
Adding App Pages
Let’s start by adding some content to your app. You can do this by creating a new page. Go to App Pages » Add New.
You have a choice of several page types:
- Media List
- Card List
- WooCommerce Two Column
- Page From Site
- Photo Gallery
- Google Map
These various page types do different things, let’s start with a list. If you choose any list from the Page Type drop down, you will be prompted to select what type of content you want in the list. For example, you can display posts or custom post types, and optionally choose a category or tag.
That will create an app-style list of the posts you chose that looks like the images below. Clicking on a list item goes to a full page view, just like you’d expect.
If you are using WooCommerce, you can choose a WooCommerce product list to show your products. A price will be displayed along with the product image, and your customers will be able to view product details and purchase through the app.
Besides lists, you can also add text/html pages, which is a page you can create from scratch. This page will only be shown in the app, and it will not be a part of your WordPress site. It is handy if you want to create content that only shows up in the app.
With a text/html page you can add media like video and audio embeds, text and images, and more. You can also add custom components from the Ionic Framework, located here.
Each page you add gives you the option of adding a slider, social sharing, and changing the full page view formatting. These options are just so you can tailor each page to your liking.
Other page types include a Google Map with a store locator, a photo gallery, and a single page from your site. To setup those pages, just choose them from the Page Type drop down. Here’s what the map, product list, and gallery pages look like:
Creating an app menu
After you’ve created some app pages, you need to add them to a menu to get them to show up in your app.
The process is very similar to adding a custom menu in WordPress. You can add pages to your menu, move them around, and even add icons.
Adding a menu icon is easy. Reactor uses the Ionic Framework which comes tons of icons.
Now let’s put it all together and see what it looks like!
Previewing your app
Click on Apps in the left hand menu, and click on your app. This is where we will preview your app, add push notifications, and build it for testing on a device.
First add your website url that has the Reactor Core plugin activated, then choose your app menu and design. Next, save your app by clicking the blue update button on the right.
After updating, we can preview our app to see what it looks like. Scroll down and you’ll see a fully functional app preview that shows your design, menu, and app pages. Click around to make sure everything looks right.
*Note: some features such as social sharing and product purchase links do not work in the preview, and they require testing on a device. To find out how to do that, see below.
Building your app
To actually see your app on a device, click over to the build/test tab. Your app will be compiled automatically, and you can simply scan a QR code to download the app to your device.
You will need a free Phonegap Build account for this part. You can get one here. You’ll also need to add the auth token from your Phonegap Build account to Reactor. Go to Apps » Phonegap Account to add this auth token so you can build your app.
To build your app, just check the “Build app” checkbox, and then click the blue update button. Your app will be created and about 20 seconds later you can refresh the page. You should see a QR code. Scan this QR code with any QR scanner app to download and test your app.
Android phones can instantly scan the QR code and start using the app. iOS devices require some certificates from your developer account to test, that process is explained in the documentation.
If your app looks good, then you’re ready to submit to the app stores! Submitting to the app stores and setting up push notifications is beyond the scope of this article, please consult the documentation for that.
Creating a mobile app for your WordPress website is getting a lot easier with solutions like Reactor. We hope this tutorial helped you create a mobile app for your WordPress site.