Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme!Learn More

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

July 27, 2018
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 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 one of the easiest 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 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. 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! 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.

WPTouch Responsive 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.

Use PhoneGap Build to Create an App

Adobe PhoneGap Build

Now you can get started with Adobe PhoneGap to actually create an app for your WordPress website.

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, head over to Adobe’s PhoneGap Build and click on the giant “completely free” plan button to create a free Adobe account (or sign in with your current logins) to get started. The free plan allows for a single private app (which uses a private Github repo) or unlimited OpenSource apps (public Github repos) up to 50MB in size. So, if you’re only making one app the free plan should work fine.

Though it’s worth noting if you’re an Adobe Creative Cloud member you get tons more with PhoneGap Build. You’ll be able to create up to 25 private apps, and you can create apps up to 1GB. If you’re a web designer or developer we highly recommend getting a Creative Cloud membership anyway since you’ll always have the latest versions of PhotoShop, Illustrator, etc plus a free online Adobe Portfolio. It’s a must have toolkit item in our opinion. But back to the point, let’s move on to the next step in creating your app.

2. Create App Files

Your root directory needs to contain key files for PhoneGap to create your app. Specifically your index.html, config.xml and a res directory folder (that last one is where you’ll add your default icon and OS-specific icons).

You can download the example PhoneGap Hello World template to see how the structure works. If you open it up, it’ll look like this:

PhoneGap Template Structure

So as you can see, your two core files will be the config.xml and index.html with added folders for CSS, images, JS and the res folder we mentioned.

Next, you’ll need to make the icons to go in your res folder. You can use any image processing or vector program for this, as long as the result is a .jpg or .png larger than 1000×1000 pixels.

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.

3. Configure Your App

The config.xml is your app’s configuration file which 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. Here’s the sample provided in the PhoneGap docs:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.phonegap.example"
    versionCode = "10"
    version     = "1.0.0" >

<!-- versionCode is optional and Android only -->

  <name>PhoneGap Example</name>

  <description>
      An example for phonegap build docs.
  </description>

  <author href="https://build.phonegap.com" email="support@phonegap.com">
      Hardeep Shoker
  </author>

</widget>

For your app, you’ll be including general widget information (reverse domain id, version and version code for Android), name, description, author, and platform (but only if you want to specify a single platform – leaving this out means all 3 platforms will have apps created). A much more thorough guide than I can provide through this article can be found in the PhoneGap Docs.

4. The Actual Build

Adobe PhoneGap Build App

Go to the PhoneGap Builder website and sign in. You’ll be presented with the empty apps screen. With your structured zip file on hand you should know what to do next: upload it via the button to the right.

Alternatively you can connect your Adobe account to your Github. The advantage to this is being able to pull from your repositories, but it’s up to you. IN any case – click one of the two big buttons to start the process.

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

Testing Your App

With your app done and ready to go you can test it by clicking the icon to download a specific app platform it to your device. Or, you can navigate to the app’s public page on an Android/iOS 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.

AppPressor Mobile App Builder

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.

WPWebApp Mobile App Creator

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, with so many easy and affordable ways to DIY, you don’t really need to go that route 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!

wordpress-website-app
Article by Tom Ewer WPExplorer Author
Published on: September 19, 2014
Last updated on: July 27, 2018
Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

56 Comments

  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.

      • Kyla Avatar Kyla says:

        I hadn’t heard of them before – thanks for sharing! 🙂

        • 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

    • im.sham says:

      It is a bit unclear in the phone gap instructions

      • 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: 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. im.sham says:

    Would a responsive design work or is mobile specific necessary?

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

  7. brandon171 says:

    Do you know how well AppPresser works with the Genesis Framework?

  8. bravokeyl says:

    I use AppPresser and it has a ton of hooks for developers 🙂

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

  10. HDSA says:

    How do you get your app into that app store?

    • Kyla Avatar Kyla says:

      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!

  11. 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 Avatar Kyla says:

      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 🙂

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

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

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

  15. 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,

  16. aanchalsaroha says:

    thanks a lot

  17. Kishan says:

    Thank you for the great post. I will create a mobile app for my website,

  18. 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 Avatar Kyla says:

      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 🙂

  19. Rajendra Reddy says:

    Is there any plugin available for wordpress without mobile version if i can create android app

    • AJ Clarke Avatar AJ Clarke says:

      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.

  20. 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 ?

  21. 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 🙂

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

  23. Cara Mooralian says:

    Thanks for sharing such good article. This is really helpful. I will create a mobile app for my website,

  24. 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 Avatar AJ Clarke says:

        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!

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

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

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

  28. wapppress999 says:

    Thank you for great information. This is really helpful.

  29. milad says:

    hi this is very nice!
    but i need real android app.

  30. Orit Alexander says:

    very nice information , Really good content,Thanks to tell me how to turn wordpress website into app

  31. Emran says:

    It is a difficult procedure. lets see I will try to convert my WordPress Blog into app.

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

  33. Spooky Boo says:

    Thank you for this. Trying it out now 🙂

  34. Sandra 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!

  35. Aziz Khan says:

    this is really some great info, i managed to create my first app with the help of this article, way to go and to improve, does anyone know how i can create the app using Android Studio? i am good at making simple apps using Android Studio, i was curious if someone could give me some heads up to start on how to create the web app using Android Studio, highly appreciated, Thank allot.

  36. Ashu says:

    This post is really awesome.This post really helps me a lot to complete my client project.Thanks for sharing this kind of project.

  37. Paulina Kubala-Chuchnowska says:

    Hi, you wrote an excellent article!! There are services like PressPad News which do it and you don’t need any technical skills to enjoy your mobile app 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.