Simple Steps to Convert Your WordPress Site into an App

You may be having a WordPress website that is bringing you a good amount of traffic, and your website may be working well on the mobile as well. Then, the obvious question coming to your mind is that why do I need a mobile app when my Is WordPress site working well on mobile?


Here is why your WordPress Site needs a mobile app


Though you may not be considering apps as a direct marketing tool anymore, they are easy and convenient for the customers to use and you can provide users with immersive experiences with apps that are not possible with websites. Apps increase the visibility of your app and give users more choice of the way in which they want to interact with your site. Brand awareness and customer engagement can be enhanced with apps. A more immersive experience can be provided to customers using data analytics and other new developing technologies. You can also collect ad revenue with your mobile app by activating ads and building your audience. All these advantages of developing mobile apps can help you stay ahead in the competition.


Moreover, the time involved to build a mobile app from WordPress is reduced to a couple of seconds with the use of plugins. The price and frustration involved in developing a mobile app due to excessive coding have also decreased. All the above reasons justify the need for a mobile app even if your WordPress site is fully functional on mobile.


Plugins available for converting WordPress sites to mobile apps


Plugins are available either freely or as paid options. A few major ones are Adobe’s PhoneGap Build (free), AppPressor (free), Worona (free), Reactor (paid), MobiLoud (paid), WiziApp (paid). Of these, PhoneGap Build is easy to use and saves you plenty of time as it builds simultaneously for iOS, Android, and Windows 8. You need to upload your Javascript, HTML, and CSS files and the site will assemble them into an immediately-downloadable app.


Step #1: Ensure that your WordPress site’s mobile version works


Using Adobe’s PhoneGap Build you actually just give the form of an app to your homepage so that when the viewers tap the icon, they will be directed to your WordPress mobile website. Thus, you need to ensure that your WordPress site is optimized for mobile view. If not, you need to optimize it first before moving any further. For this, you can simply use any mobile responsive WordPress theme. Plugins are also available for making your WordPress theme responsive such as WPTouch plugin and iThemes Mobile in which you can use the administrative panel to create simple but effective mobile themes based on your current site design without messing with the code for customization of most aspects of the appearance. You also need to use any Mobile Theme Switcher plugin to detect the device being used by your viewer and display the device compatible theme. You can also use the WordPress Mobile Pack plugin to host cross-platform mobile web applications, Google analytics integration, and UI and theme options.


Step #2: Register with Adobe to use Adobe PhoneGap Build


By clicking on the “completely free” plan button creates your free Adobe account or login with your credentials if you already have an account. Using the free plan, you can either create a single private app or unlimited OpenSource apps up to 50MB in size. You can also opt for Adobe Creative Cloud membership to avail the benefit of being able to create up to 25 private apps (up to 1GB) along with other benefits such as the latest versions of PhotoShop, Illustrator, etc., and a free online Adobe Portfolio.


Step #3: Create the app files


You need to create root directory files using the template files that can be downloaded to see how the structure of app files work. These core files are index.html and config.xml, and additional folders containing CSS, JS, images, and res directory folder (default icon and OS-specific icons are added here).


Step #4: Create icons for res folder


After this make icons for your res folder using any image processing or vector program. The images resulting from this should be larger than 1000×1000 pixels and in the .jpg, .png, or .psd format. Tools such as IconsFlow or free App Icon Maker can be used to create professional app icons quickly. You can either use your icons and resize them for different devices and operating systems or use preset images, colour options, gradients, etc. provided by the tool after creating a free account. The finalized icons can then be downloaded. A simple, quick Google search can also provide you many other websites, services, and apps to help you create your icon.


Step #5: Configure your app


The configuration file of your app, config.xml, works across all platforms without any need for modification and controls most of the functions of the app. Include the general widget information such as version, reverse domain id, and version code; name, description, author, and platform (in case you want to specify a single platform).


Step #6: Start the actual build


Sign in to the PhoneGap Builder website and upload your structured zip file using the button on the right.  You can also connect your Adobe account to your Github to avail the advantage of being able to pull from your repositories. Start the process by clicking any one of the two big buttons, and the screen will show the details of your would-be app after analysis of your data. You just need to click ready to build to make the builder get to work.


Step #7: Test your app


When you are done and ready to go, you need to test it. For this click the specific icon to download the app platform to your device. Alternatively, you can download the app from its public page on an Android/iOS device and install it there. After that test your app by playing around with it. If you find something wrong, you will have to rebuild it and update the files in your GitHub repo. After this, you need to update the code on the PhoneGap Builder app page or try the rebuild all option.


Summing up


Mobile traffic can be significantly increased by owning a mobile app to improve business. It also improves sales and brings new leads. Thus, owning a mobile app is a must in the present scenario. The above method may not be the only way to build a mobile app, but it is incredibly simple. The only requirement has a good mobile website to start with.


Author Bio:


Juned Ahmed is an IT consultant at  a mobile app development company in  India & USA, he likes to solve problems related to mobile and web app. Feel free to contact him out if you need any help.

Rate This Article

(19 out of 44 people found this article helpful)