Why make an app in the first place, I hear you ask? Apps might not be very useful for marketing anymore, but they’re quite convenient for your customers – giving them more of a choice as to how they interact with your site. With the continued rise of mobile internet (more people now access the internet via mobile apps than desktops) apps are blossoming, as most are nowhere near as awkward or problematic as mobile web browsers.
The cost and frustration involved in building one has gone far down, too. In the old days, a lot of businesses were interested in apps, but most weren’t able to build them. It was simply too difficult. Or costly (most devs charge upwards of $100 per hour)
But thankfully, things are different now. You no longer need much money or coding knowledge to build a competent app. And even better – you have options. Today we’ll look at:
- Making sure your WordPress site is mobile responsive
- Building (and coding) your own app with PhoneGap
- Use a WordPress Plugin to create your app (aka the easy way)
A Note on Free App Builders
The result won’t be anything too fancy. In fact, all this method really does is disguise your homepage as an app. When the viewer taps the icon, they’ll just be taken to the same mobile website they’d see if they were to access it via their phone’s browser. So, in order for this method to be effective, you have to have an existing site that’s optimized for mobile viewing.
1. Make Sure Your WordPress Site Has a Mobile Version
If your WordPress site isn’t optimized for mobile devices, there’s really no point in this. So optimize it! Of course it’s easiest to simply use a mobile responsive WordPress theme like Total. But if your theme isn’t responsive there are plenty of plugins that can help.
iThemes Mobile will let you create simple but effective mobile themes based on your current site design. The administration panel lets you customize most aspects of their appearance without having to mess with the code.
Any Mobile Theme Switcher
Any Mobile Theme Switcher is a basic plugin that will detect the device your viewer is using and display a specific theme for that device. So if you want to balance multiple themes – one for each mobile OS – you can do it that way.
WordPress Mobile Pack
Finally, there’s the WordPress Mobile Pack, which offers a host of cross-platform mobile web applications, UI and theming options, and easy integration with Google Analytics.
2. Use PhoneGap Build to Create an App
If you’re tech savvy and want to get hands on you can use Adobe PhoneGap to actually create an app for your WordPress website. Adobe has a full step-by-step guide in their docs, but here’s a quick look at the steps you’ll need to follow.
Step 1: Preparation
Before you start make sure you have a way to test your app on hand. You can use browser dev tools to imitate mobile device views, or try a service like CrossBrowser Testing. But if you can manage it really is best to have an iOS and an Android device on hand.
Next, you’ll need to install Adobe PhoneGap Build on your computer. Click to download the Mac or PC version, and follow the on-screen prompts. Adobe also suggests installing a complimentary PhoneGap Developer App so you can instantly test your app as you build.
Step 2: Create you App
Next use the PhoneGap program to create your app. Please note – PhoneGap is based on Cordova, so you’ll need to have an understanding of it to actually code your app.
Choose from a default “Hello World” example, Framework7, Push Notification, React Hot Loader or Blank template to get started. Then you’ll need to choose where on your local hard drive you’ll be working on your project, and provide a name and ID. When you’re done, PhoneGap will provide a server address that you can use to view your app.
To give you a look, your root directory will need key files for PhoneGap to actually create your app. Specifically your index.html (at minimum), config.xml and sub-directory folders (that last one is operating system specific).
Here’s an example straight from PhoneGap app project structure page:
You’ll also need to create your own icons. You can of course handle this yourself or use a free online tool. IconsFlow is a great tool to help you create professional app icons quick using preset images, colors options, gradients, etc. Just design your icon, create a free account and download your files. If you already have an icon but need it resized for all devices and operating systems, the free App Icon Maker can do just that. But if you do a quick Google search you’ll find there are plenty of other websites, services and apps to choose from to create your icon.
Step 3: Testing Your App
With your app done and ready to go you can test it using the PhoneGap Developer App installed earlier. Be sure to use the server address that was provided. From there you can view your app on your mobile device, troubleshoot any issue, add fixes, re-upload and rebuild until perfect.
An important note: PhoneGap Builder can only work with iOS if you’ve joined the iOS Developer program (which was priced at $99/yr when this article was written) and provided your certificates. With the program’s software, you can actually build the app there yourself. But the reason we’re suggesting PhoneGap is so you can save time by doing all three at once – negating the need to do any separately. So yes, you’re paying for a bunch of services you might not end up using, but if you want your app on any iProducts, they kind of have you over a barrel here.
3. Use Alternative App Builders for WordPress
In addition to iOS’s tools, there are plenty of other app-building services and plugins you can use. These are significantly easier than building an app yourself. Some of them will also build (at the least) an Android app at no cost. Though you should definitely check the developer’s main site to be sure.
Create an app for your website with AppMySite. This easy to use plugin and service makes it easy to turn your WordPress site (or even WooCommerce store) into an app in just a few steps. First, get the plugin and register your account. Then get to work personalizing your app – there are plenty of built-in layouts and features to choose from. When you’re done just submit to publish your app (Android & iOS supported). Plus AppMySite syncs with your website in real-time, to keep your app up to date with any new posts or products you publish.
Other features include multiple language support, cart, and checkout integration, push notifications, social media integration, as well as for analytics that you can use to monitor app performance.
AppPresser is the biggest, the most popular and supposedly the first mobile app Framework for WordPress. It offers full integration: where most app builders only use a feed from your WordPress site, AppPresser lets you use all your plugins, posts and pages. In addition, it automatically updates the app as soon as you make any edits to your site. It features full support for e-commerce, too.
WPMobile App allow you to create both Android and iOS apps for your site. While the base plugin is free, you do need to pay for a lifetime license to actually create your app (starting at 79€ for one app format, or 149€ for both). With WPMobile App you’ll have customization options, free live test, automatic app updates, push notification support, social integration and premium support (a welcome feature if you get stuck).
While pricier (starting at $120/mo), MobiLoud handles pretty much everything for you (including submitting your app to the App Store and Google Play), thus making the price pretty reasonable. With MobiLoud your final app offers cross device compatibility, easy social sharing, monetization (via ads or subscriptions), push notifications, and more. And when the service is paired with their plugin (linked above) your can manage your app and push notifications from within WordPress.
Finally, there are a bunch of people you can pay to do it for you. However, with so many easy and affordable ways to DIY, you don’t really need to go that route for a basic app.
There are a ton of ways to build an app, and although it seems intimidating at first glance, the above methods make it incredibly simple. Just make sure you have a good mobile website to start with, okay? Now let me have it. Did I get anything wrong here? Are there any other methods I should know about? Feel free to leave your feedback below!