Tutorial

Methods to Flip Your WordPress Web site Into an App, Step-by-Step – WhoClick

Why make an app in the first place, I hear you ask? Apps might not be very useful for marketing anymore, but...

Written by admin · 5 min read >
WordPress Mobile Ready

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

Over the last few years, a ton of “free” options for building an app have shown up, but one of the most trustworthy is Adobe’s PhoneGap Build. As their site advertises you simply upload your HTML5, CSS and JavaScript files and the site will do the work of assembling them into an immediately-downloadable app. Best of all, it can build three simultaneously for Android, Windows Phone 8 and iOS – saving you plenty of time.

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

iThemes Mobile

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

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

WordPress Mobile Pack Plugin

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

Adobe PhoneGap Build

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:

PhoneGap app project structure

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.

AppMySite

AppMySite

Create an app on autopilot 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 you 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 analytics that you can use to monitor app performance.

AppPresser

AppPresser

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

WPMobile App

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).

MobiLoud

Mobiloud

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!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *