In this article we’re going to show you how to setup the WordPress Project App plugin for your website. We recently made a video where we show all the features of the Project App plugin. The plugin is very user-friendly and your app will be ready in minutes. Watch the video tutorial below.
Prefer a written version? Read the article.
What we’re going to talk about in this article:
- Installing and activating the WordPress Project App plugin
- Choosing a homepage for your app
- Choosing a theme for your app
- Creating menus for your app (Only for compatible app themes)
- Creating side widget for your app (Only for compatible app themes)
- Using the project app customizer (Only for compatible app themes)
- Publishing your app in the app stores
Installing and activating the WordPress Project App Plugin
Installing and activating the WordPress Project App plugin is just like installing and activating any other WordPress plugin. Because our plugin can be found in the WordPress plugin directory, you can just go to Plugins -> Add New and type in ‘Project App’ in the search field. Next click on install, activate and you’re done.
Choosing a homepage for the mobile app of your WordPress website
You probably already have a homepage for your WordPress site, but we can imagine people wanting a seperate homepage for their mobile app. That’s why we created the option of choosing another homepage for you WordPress website’s mobile app. You can do this by clicking on the ‘Mobile App’ menu item, which should be in the side menu of the WordPress admin panel.
As you can see here, we use the ‘About’ page for our WordPress app. You can use any WordPress page you created as your app’s homepage, however, you can not use a post as a homepage for the app.
As you can see in this area you can also choose a theme for your app, which we’re going to explain further right now.
Choosing a theme for your app
Choosing a theme for your app is just as easy as choosing a home page, however not every theme is compatible with the customizer and with the menu and widget editor of the Project App plugin. Every theme is usable for the app though, so you can choose from every single design you want. You can use all the thousands of themes created by developers for WordPress.
You can also read how to create a theme that is compatible with the project app customizer and / or widget and menu editor here.
Creating a menu for your app
Creating menus for the app doesn’t go via the Mobile App settings pages. Instead, you can (just like with the theme installed on your WordPress site) configure to the Appearance -> Menus section of your WP installation. in the ‘Manage Locations’ section of this page, you now see ‘App Menu’, it’s registered by the Project App plugin. Now choose the menu you want to use as app menu and you’re good to go.
Creating a side widget for your app
This is similar to adding an app menu. Go to the Appearance -> Widgets section of your WP installation, you can see a section that says ‘App Sidebar’. Add some items in there if you want to. This will function like a sidebar in your app, but only shows if you tap a certain icon, which we’ll show you in a few, when we move on to the Project App customizer part of this article.
Using the Project App customizer
We made this part as user friendly as possible and we made sure you can customize about any aspect of the compatible app theme you’re using. Remember, you’ll need a theme that is compatible with the Project App’s customizer if you want to customize the colors of your theme this way. We made this customizer, so you’ll never have to actually activate the theme on your WordPress site, this way visitors don’t get confused when all of a sudden your WP site has a different theme.
You can customize and manage your app even if it’s already in the app store!
To access the customizer, go to the Mobile App -> Customize App area. Here you see many different color pickers whit which you can customize your app theme. We won’t go into adding all the different colors right now, we’ll make a video later to explain this better. There is a ‘clear all’ button, with this button you can clear all the color fields at once.
You can also preview your app in the iPhone emulator we created. You can preview your menu by clicking on the hamburger icon at the top left of your app, and you can see your sidebar by clicking on the three dots on the top right of your app.
Your app will also be compatible with all plugins. Look at the Woocommerce shop below for example.
Don’t mind the scrolling bar, it won’t be visible in the app when it’s launched.
Publishing the app
Publishing the app is very easy. Unfortunately this is the only aspect that is not free, and we have no influence on this, because the app stores ask money for publishing apps into the app store. You can however to this very cheaply via us, by subscribing to one of our WordPress App plans. You can also still choose to publish the apps to the app stores yourself for a one time payment of just $30,-
You’ll need to have your unique app key to publish your app. This key is free and is generated when you first activate the Project App plugin. It can be found below ‘PUBLISH NOW’ button on the customizer page of the Project App plugin.
To publish your app, click the ‘PUBLISH NOW’ button.
You’ll be redirected to our website, choose one of our plans.
We’ll choose the all in one plan for this tutorial. Click the ‘ORDER NOW’ button.
Now you almost reached the final step.
Here you’ll have to fill in all required info of your app. Screenshots are optional.
See the app key? This is what we talked about earlier. It’s the unique key of your app, we need it to configure your application.
Click continue and follow the checkout process.
Congratulations! Your app will be published within 24 hours. If we encounter any problems we’ll contact you immediately.