In this article, we will teach you how to create a basic iPhone or Android app using WordPress and the AppPresser framework. Since the release of AppPresser, it is much simpler to create a great iPhone or Android app with your already developed WordPress skills.
What is AppPresser?
AppPresser is a new tool recently released that will allow you to use WordPress as a full framework to develop beautiful and responsive apps. Within it, it offers a wealth of tools, along with those offered by Adobe PhoneGap to perfectly deliver a great app that your users will love.
Getting started
To get started, you will first need to install WordPress, as well as have a few plugins available. This includes the AppPresser plugin, and various other extensions available. In this example, we will also use the pre-made theme offered by AppPresser which is an excellent framework to get started in designing your new iPhone or Android app.
Install the AppPresser plugin
- First, log into your WordPress admin.
After you are logged into your WordPress admin, look over to the left and click on Plugins, then click on Add New. You should then see a search box here. A search for AppPresser should generate the appropriate plugin within the results.
Now that you have located the AppPresser plugin, click on Install Now. WordPress will then automatically handle the download and installation of the AppPresser plugin for you. Once complete, be sure to click the Activate Plugin link to activate it. Once installed and activated, you will be ready to move onto installing other components that we will use within our new app.
Install other components
There are a few components that we will be using in this tutorial that are offered directly from the AppPresser website.
- AppWoo to integrate WooCommerce with AppPress.
- AppTheme for an easy theme to build upon.
Once you grab these plugins, install them from the zip files that are provided in the download. Be sure to also note the license keys that are provided so that they can be automatically updated. If you are unsure of how to install these plugins or add the license keys, we will teach you how to do so in the next step as well.
First, we are going to install the AppWoo plugin. To do so, look to the left of your WordPress dashboard and click on Plugins, then on Add New. At the top of this page, there is a link that says Upload. Click on this to enable the ability to install via a zip package.
Now that you are on the page that will allow you to install plugins using a zip file, browse for the AppWoo file that you downloaded earlier and press Install Now. WordPress will then take care of the installation for you. Be sure to click the Activate Now link when done to activate it.
Next, we will install the AppTheme WordPress theme. To do so, look to the left of your WordPress dashboard and click on Appearance, then Add New. On this page, you will see a tab that says Install Themes. Inside this tab, click Upload. Now that you are on the upload page, browse to your AppTheme package, then click on Install Now. WordPress will then take care of the installation for you. Be sure to click the Activate link to activate it.
Now that the plugin and theme that we are using is installed and activated, we will want to enter the license code that we got from AppPresser to make sure that everything can get updated properly when needed. To do so, click on the AppPresser menu option to the left side of the WordPress dashboard. Here, you will see a few fields to enter in your license keys. Be sure to click Save Settings when done.
Obtain and extract the PhoneGap project files
Your actual build will be done using the AppPresser PhoneGap project files which are available on the AppPresser website. Once the zip file is downloaded, extract it into a place that you remember. You will need these later after your app is designed.
Configuring your app menu
Of course, no app is any good if people can’t navigate it. Thankfully, AppTheme includes a great flyout menu that we can use to start with. Of course, as this is WordPress, you can use just about any theme that you want to create. AppPresser can use any menu that you have defined in WordPress, so doing so is quite easy.
First, look to the left of the WordPress dashboard and click on Appearance, then click Menus. From here, you can then create any menu that you want. Once done, jump back over to the AppPresser menu option and select your menu in the dropdown box labeled Main App Menu.
- Once completed, you will have a menu that can pop out of the left side of the screen, allowing you to save precious screen space, and look great for any of your app users.
Customizing the AppTheme WordPress theme
To customize things such as colors, fonts, taglines, and much more, you may use the standard customization tools that are included within WordPress. To get to these tools, click on Appearance on the left navigation of the WordPress dashboard, then click on Customize. Within this screen, you can change many appearance options within the theme, as well as preview it.
Setting your app home page
Most will want to use a custom home page for their app instead of the default theme home page that, by default, just shows your recent WordPress posts. To set a specific home page for your Android or iPhone app, click on AppPresser to the left side of the WordPress dashboard, then enter your page into the field labeled Use a unique homepage for your app. Of course, click Save Settings when complete.
Changing the app icon
To change your app icon, open up the PhoneGap project files folder that you created previously. Inside here, you should now see a file labeled icon.png. Replacing this with your desired app icon will allow you to change what is displayed within the device. A good size for this image is 128×128.
Changing your app name, description, and ID
To change your app name and description, open your PhoneGap project files folder, and look for the config.xml file within the www folder. Upon opening this file, you will see several lines there at the top that determine how your app is displayed. Changing the content between the ID, name, description, and author tags will allow you to change this content.
Building your Android or iPhone app with AppPresser
Building your app is quite a simple process to do thanks to AppPresser. In fact, it can be built within minutes once the general layout and functionality is built within WordPress.
Now that you have created your app within WordPress, the app will need to know where to locate the app itself. To fix this, open your config.xml file that we referenced previously and look to the bottom of the file for a link that says content src. Edit this link to reflect your domain that the app is hosted on, such as:
<content src=”https://myexampleapp.com/?appp=1″ />
- Next, you will need to create a zip archive out of some of your PhoneGap files. On most Windows computers, right-click on the www folder and click Send to then click on Compressed (zipped) folder.
Now that you have a zip file created of your www folder, you will need to visit the PhoneGap website to create your new app. If you do not already have an Adobe account, you will need to create one to continue.
From within the PhoneGap build page, click on the Upload a .zip file. Then, browse to your zip file that you previously created and upload it.
Once the upload has completed, you will be taken to an app information page on the PhoneGap site. This will display various information about the app that you have created. Click the Ready to build button to begin the build process.
PhoneGap will then begin building your app for you. Clicking on the Android or iOS icons will allow you to view your app files once built. Keep in mind that if you do not have an Apple iOS developer key, you will not be able to build your iPhone apps. If you have one, you may select or add your key to complete the build process. If you do not have one, you will need to purchase an iOS developer license from Apple and obtain your key from them.
What to do now?
Now that you have a basic understanding of AppPresser and have built your first basic app using WordPress, the sky is the limit. Continue building upon your app and you may be surprised at what you come up with. Whenever you’re completely happy with it, submit it to the app stores for the world to see.
