How to Turn Your WordPress Site Into an App, Step-by-Step

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 because it was simply too difficult. But thankfully, things are different now. You no longer need much money or coding knowledge to build a competent app. Let’s explore them, shall we?

A Note on Free App Builders

Over the last few years, a ton of free options for building an app have shown up, but the simplest 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 for Android, Windows 8 and iOS simultaneously – saving you plenty of time. However, be warned that only Android and Windows 8 are free. More on that later.

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. That’s why our first step is to…

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. There are plenty of plugins that can do it for you.

WPTouch WordPress Plugin

WPtouch and iThemes Mobile will both 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 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 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.

Using PhoneGap Build to Create an App

1. Preparation

Before you start, know that it’s easiest to test mobile apps on an Android device. So, if you don’t already have one, buy one, dig up an old one or borrow one from an unusually patient friend. Next, create a PhoneGap Builder account. PGB has a free plan that allows for a single private app or unlimited OpenSource apps. So, if you’re only making one, this is all you’ll need.

2. Create the App Files

Your root directory needs to contain an index.html, a config.xml, a couple of default icon files in png format and a res directory with OS-specific icons for home screens and splash pages. Next, you’ll need to make the icons. You can use any image processing or vector program for this, as long as the result is a .jpg, .png, or .psd larger than 1000×1000 pixels.

The App Icon Template, a package of textures, gradients and Photoshop actions made for this specific purpose, is a great tool to help you achieve a professional look. If you need a central graphic, IcoMoon has an excellent collection of logos, many of them free. After that, there are plenty of websites and apps you can feed it to that will transform it into a usable icon. Here are a few:

3. Configure the App

The config.xml controls most of the app’s functions. It works across all platforms, so you don’t have to worry about modifying it for any specific OS. For your app, you’ll be changing the widget@id, name, description, author, content@src and access@origin listings. A much more thorough guide than I can provide through this article can be found here.

4. The Actual Build

Go to the PhoneGap Builder website and sign in. You’ll be presented with the empty apps screen. If you’ve signed in through GitHub, all your repositories will be available in the find existing repo. If you signed in via Adobe, and have the zip file on your hard drive, then you know what to do: upload it via the button to the right. The program will analyze your data and present you with a screen showing the details of your app-to-be. All you have to do from there is click ready to build, and it’ll get to work.

An important note: PhoneGap Builder can only work with iOS if you’ve joined the iOS Developer program. This costs $99 a year. With the program’s software, you can actually build the app there yourself, but the reason we’re using PhoneGap is so we 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 have no intention on using, but if you want your app on any iProducts, they kind of have you over a barrel here.

Anyway, your app should be done by now, so you can test it by clicking the Android icon to download it to your device. Or, you can navigate to the app’s public page on an Android device and download it from there, then install it from your downloads file. If the app’s icon doesn’t show up, you’ve probably got the URL wrong in the config.xml file. Fix it, re-upload and rebuild.

If everything’s OK though, test the app, play around with it and put it through its paces. You shouldn’t have to spend too long on this because, after all, it is your own website. But if something’s gone wrong and you need to rebuild it, then update the files in your GitHub repo, go to the app page in PhoneGap Builder and click on update code. If this doesn’t work, try rebuild all.

Alternative App Builders

In addition to iOS’s tools, there are plenty of other app-building services and plugins you can use, many of which will also build, at least, an Android app at no cost.

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.

WP Webapp is a WordPress plugin that does roughly the same thing as the PhoneGap method above, but easier, with some extra bells and whistles. You don’t have to go through the trouble of messing around with your folders or editing the config file. There are two other levels, Pro and Enterprise, that offer things like one-click install, splash screens and installation for up to 25 websites.

Finally, there are a bunch of people you can pay to do it for you. However, when there are so many easy and cheap ways to DIY, you don’t really need to go to them for a basic app.

Conclusion

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!

 

Tom Ewer
Post Author: Tom Ewer

Tom Ewer is a professional blogger, longtime WordPress enthusiast and the founder of WordCandy.

Disclosure: This page contains external affiliate links that may result in us receiving a comission if you choose to purchase said product. The opinions on this page are our own. We do not receive payment for positive reviews.
Got something to say? Join the discussion.
  1. Benjamin L. says:
    Thank you for this article. While I would fully understand that you don't publish my comment, I wanted to point you to WP-AppKit, a plugin to create PhoneGap apps and connect them to WordPress : uncatcrea.com. The plugin is in its beta stage before we release it on WordPress.org.
    • Jon Sellers says:
      Why is App Kit's plugin not on WP.O? WP_AK is the best app framework. OpenSourced with no license limit, simple WP plugin with multi app manager, works with Android iOS & Wpn, comes with 2 starter themes, bootstrap build your own theme tutorial. Git repository, Json Api, Cordova based, PhoneGap ready. No license limits, 100% free apps, as many as you want, you publish them where ever you want their yours.
        • Uncategorized Creations says:
          Thank you for this kind words. There's no mystery behind the fact that we are not in the WordPress Plugins Repository. We will submit it when reaching the 0.6 version. We felt that we had to have a rock solid plugin before getting more exposure :-)
  2. Hilman (@Hilmanrdn) says:
    hey, i didn't get which parts connect it to the wordpress. I see that phonegap can build by html css js, but how to do it with wordpress. Thanks
      • UncatCrea (@UncatCrea) says:
        I think, what may lack in the article is how to effectively load a remote website with PhoneGap. This article explains how to do it: http://antonylees.blogspot.fr/2013/02/launch-website-as-mobile-app-using.html.
    • UncatCrea (@UncatCrea) says:
      What PhoneGap does is that it calls the phone's browser engine (aka. webview) and loads a webapp (ie. built with the HTML/CSS/JavaScript stack). What this article explains is how to call a mobile website with a PhoneGap encapsulated browser. So, there's no connection to WordPress (eg. with web servcies), your application === your website.
  3. Amit Ahuja says:
    That's a nice piece of info and I am looking for was ways to convert my blog into an app and probably that can support banner ads too.
  4. Rob Jackson says:
    Have you tried DroidPress? It's only for Wordpress to Android but it produces - by far - the best looking apps for Android for Wordpress bloggers and site owners.
  5. Iner Sadat says:
    A new WP plugin that converts WordPress into mobile apps (Android and iPhone), while using a responsive theme is this one: https://wordpress.org/plugins/wp-2-app/ Very simple but gets the job done. Great support as well.
  6. Tendai says:
    this article will only make sense if you read the linked article: premium.wpmudev.org/blog/creating-a-mobile-app-for-your-wordpress-site-a-diy-guide/ Anyway i wanted to find out how to make this app work on any version of Android.
    • Kyla says:
      Kyla
      I know that getting your app into the Google store is MUCH easier than the Apple store, but both have strict guidelines that you can find on their site :-) Best of luck!
      Admin
  7. Bhanu says:
    The above two plugins are not for the mobile app. @ Sadat - The website wordpress.org/plugins/wp-2-app/ is not working.
    • Kyla says:
      Kyla
      Hmm - when I check all of the plugins listed are still available, so I'm not sure what you are asking? Oh, and that link seems to be working fine for me as well :-)
      Admin
  8. sprashid says:
    On WP 4.2.4 wp-2-app is not working, it wordpress.org it is stated that it has compatibility up to 4.1.7
  9. Arbind says:
    Has anybody used appsconda.com to create a mobile app? I am trying to use it but would like to have an opinion first.
  10. aimrancars says:
    That’s a nice piece of info and I am looking for was ways to convert my blog into an app and probably that can support banner ads too.
  11. Ben says:
    Great tutorial - just one issue though - I tried to push my app to Google Play, however it was rejected on the basis of being vulnerable, and suggested upgrading to Cordova 3.5.1 - any suggestions on how to do this? Thanks,
  12. Kishan says:
    Thank you for the great post. I will create a mobile app for my website,
  13. Rabia says:
    Thanks, i would like to ask you about adsense ads, if i build an app using the said techniques will my ads show up or ill have to switch to admob?
    • Kyla says:
      Kyla
      I think that Google ads will still work, but that's just an educated guess based on the fact that when I've purchased ads I have the choice to target mobile apps. To get a better answer I would suggest contacting the Adwords or Adsense support team :-)
      Admin
  14. Rajendra Reddy says:
    Is there any plugin available for wordpress without mobile version if i can create android app
    • AJ Clarke says:
      AJ Clarke
      Basically need to add some code that displays a popup to recommend the app instead of the site. But I would never recommend disabling the site completely on mobile, you should still use a Responsive WordPress Theme so that it can be viewed on any device, even if you do have an app. Your app should simply "complement" your site as an alternative.
      Admin
  15. Franck PARIENTI says:
    WP-Appkit is a great tool. I've met the team at Wordcamp Paris. I own 150 WordPress. What's the best solution for get all my WordPress to iOS and Android ? For me it's WP-Appkit and it's free. Who's the partner freelance or company for use the best solution to convert my sites to Apps ?
  16. Lily Okamoto says:
    We are developing new service Joren (joren.io) which helps WordPress website converting into a native app for both iOS and Android. You can publish your app for free. We are in Beta now, please check us out if you are interested :)
    • AJ Clarke says:
      AJ Clarke
      Looking good! When you guys are done if you want to write a guest post about your project hit us up on twitter and we can discuss further.
      Admin
      • Kyla says:
        Kyla
        Maybe do a quick Google search for the company to see if they're live yet?
        Admin
  17. Mobile app developer says:
    In my knowledge use Apppresser plugin in WordPress turn into your site in App.The only thing I don't like about apppresser is that, they provide the core plugin for free but the project files to build the app are not provided for free, you need to purchase something from them.
  18. Cara Mooralian says:
    Thanks for sharing such good article. This is really helpful. I will create a mobile app for my website,
  19. blairsutherland says:
    I build a mobile app for my site and it works! My site has links out to external sites that I want to open in the device browser (ios safari etc) not in the app itself. Any advice on how to do that?
    • blairsutherland says:
      I found my answer. It seems that allow-navigation will permit the user to keep the specified site content within the app and everything else opens the device browser. Here is the code:
      • AJ Clarke says:
        AJ Clarke
        Sorry looks like the code didn't go through for security reasons if you want to try again wrapping your code in pre tags first that should work or posting a link to a gist with the code for others to see. Thanks!
        Admin
  20. Michael Opydo says:
    There are services that do that, like Mobiloud, AppPresser and PressPad News - the last one is where I work ;) You can have your app with many features, analytics etc. with no technical knowledge whatsoever. If you want to see how it can look like, check out "App marketing in digital publishing" in the Apple App Store.
  21. Wapppress999 says:
    Thanks for this useful information. Word press site users you can also try our plugin i.e. Wapppress to create a mobile app for your word press web site.
  22. Robert Smith says:
    Hello great information, this article is very helpful for me. In this article we have an idea to create a app for my product and website. so I am highly thankful to you for providing me a great and useful information.
  23. Orit Alexander says:
    very nice information , Really good content,Thanks to tell me how to turn wordpress website into app
  24. Emran says:
    It is a difficult procedure. lets see I will try to convert my WordPress Blog into app.
  25. Florian says:
    Great article. I would add that for those who are freelancers or developers themselves, it might be a better idea to use a mobile native app template and build on top of it. In this way, they get a lot of stuff out of the box and it's also super easy to customize everything they want.

Leave a Reply