In addition to serving as an excellent website development software, WordPress also has the caliber of powering your mobile application.
For instance, if you own an events website developed in WordPress, then you can get on with creating a stunning mobile apps that would showcase all the event photos, event-related articles, videos and a lot more. Additionally, you can even avail the flexibility of creating an app for your online store using the popular WordPress e-commerce solution named as WooCommerce.
What you’ll find in this tutorial?
Well, in this tutorial, I’ll be elaborating on the different steps associated with the perfect use of a renowned app builder called Reactor.
Why Choose Reactor for creating a mobile app out of your WordPress website?
Before I proceed to the steps of building a mobile app using Creator, I would throw some light on why I’ve chosen this particular app builder only.
As compared to a wide range of app builders available in the market, Reactor has been designed for making it convenient to build a mobile app that connects to your existing WordPress website. With this app builder, you can even avail the flexibility of adding WordPress posts, photos, pages and a range of custom content like post types, events etc. Also, in contrast to other app builders(designed for WordPress), Reactor is much more easy to configure and includes custom post type as the topmost priority. Some other commendable features available with Creator include automatic app building, push notifications integration and a live app preview option.
And now, let’s head on to the steps that need to be followed for building an app using Reactor:
Step 1- Install Reactor Core plugin into your WordPress website.
As the very first step, you need to install the Reactor Core plugin into your WordPress website. For this, all you need to do is simply login to your WordPress admin area and go to Plugins-> Add New. Here, search for the Reactor Core plugin and choose to install and activate it for your website.
Step 2- Create an account on Reactor.
In order to build a mobile app for your WordPress website using Reactor, you’ll be required to create an account on Reactor.
Step 3- Login to the Reactor dashboard.
Now that you’re done with installing Reactor into your WP site and creating a new account on Reactor, it’s time to login to Reactor’s dashboard. You’ll find the same to be quite similar to the WordPress admin dashboard. The screen-shot for the same is displayed below:
Step 4- Add App Pages.
Next, go to App Pages-> Add New for creating a new page that would be added into the mobile application. Here, you can choose from a wide collection of page types viz: Media List, WooCommerce Two Column, Photo Gallery, List, Card List, Page from Site, Google Map and many more.
For instance, if you choose the option to the option “List” from the drop-down available for Page Type field, then you’ll be further prompted to select the type of content that you’d want to add within this new list.
Here, you can avail the flexibility of displaying custom post types, categories, tags etc. After inserting your specific preferences, an app-style post list would be created as shown in below screen-shot:
Moreover, if you’re using WooCommerce, then the WooCommerce product list can be used for displaying the products. Each product image will be accompanied by a price and the targeted customers would be able to view the product details and purchase the product via the mobile app itself. Do remember each page added into the app will provide you an option of adding social sharing, a slider and the additional flexibility of changing full page view formatting.
Step 5- Create an app menu.
After you’re done with creating certain app pages, it’s time to add them to a suitable menu to make them visible within the app. Quite similar to the process of adding a custom menu in WordPress, adding pages to an app menu is simple. Have a look at this screen-shot:
Moreover, Reactor utilizes the Ionic Framework which is pre-loaded with tons and tons of icons.
Step 6- Preview the application.
Now, go to your Reactor dashboard and within the left menu, click on Apps, followed by clicking on your app. It is here that I would be previewing the app, adding push notifications and building it for testing purpose.
So, firstly add the website URL which includes an activated Reactor core plugin. Next, choose the app menu and design and save it by clicking on “Update” button.
Here’s a screen-shot for the same:
After finishing the update process, you can preview the app to see how it would look like. Here’s how the App Preview page looks like:
Do note that some features including product purchase links and social sharing functionality won’t work on the preview page and you’ll have to test them on a different device. The next steps shows you how to do the same.
Step 7- Build the app.
To see how the app looks on a device, just click over the Build/Test tab available on Reactor dashboard. Doing this will automatically compile your app and you’ll further be able to scan QR code for downloading the app to your specific device.
Now, you’ll need a PhoneGap Build account, followed by adding the auth token fetched from PhoneGap Build account to Reactor. For this, just go to Apps-> PhoneGap Account.
Finally, check the “Build app” checkbox and click the blue colored “Update” button. The app would get created and you can later refresh the page to see a QR code. Scan this code using a suitable QR scanner and get on with downloading and testing the app conveniently.
With a handy solution like Reactor, creating a fully-functional mobile app for your WordPress website has become a breeze. Here’s hoping the steps explained in this post would help you in your next endeavor of building an app from your existing WP site.