Case Study: How To Make An App For A WordPress Website
I’ve just completed a client project where I built an app from a client’s WordPress site, in this case study I will show you how to make an app for a WordPress website.
My client runs the website skopemag.com and he wanted an app for his audience. His tag line says “Diverse Music Media For The Digital Age” and has has a wide range of stories about new music.
His site (and now the app) is a multi media combination of news stories, video and of course audio files for the new music he features.
His content is an ideal candidate for an app, it is for peoples entertainment, they don’t want to be stuck behind a computer screen, rather, they want to be on their “lay back” device or the device they can enjoy content on while relaxing on the sofa.
Sure a mobile responsive website can do this (more on that later) but my client wanted an app.
You can download a copy of the app from your preferred app store below.
The Technology I Used
I used a technology called Shoutem to create the app. I like to think of this as WordPress for apps. I wouldn’t custom code a website I would use WordPress, so I would not custom code an app I use Shoutem.
The beauty of Shoutem is it has an extension system (think plugins in WordPress speak) and the theming system (same idea in WordPress) so you don’t need to re-invent the wheel just re-use and adapt their pre-coded systems.
It also has the ability to build you own custom extensions and themes so I can code up my own modules too to make a truly custom app.
It has extensions to link to third party services including a CMS extension to connect to WordPress.
It has extension to Shopify to sell things, extension to YouTube to display video, extensions for Eventbrite to sell tickets, the list goes on.
You can pull your podcast into the app via an extension so all your content is in one place, no need to jump over to apple podcast it’s in your app.
If there is not an extension you can write your own, for example I could write an extension to pull in your wooCommerce store and use that to checkout.
If all things fail you can also embed a WordPress page into you app to do your required thing.
Update At WordPress And It Pushes To The App
I know what you are thinking “Not another place to add updates!”.
The way this app was built you only need to update WordPress (or YouTube or Shopfiy) and it automatically pushes to the app in almost real time.
I install a plugin at the WordPress level, link it to Shoutem and my post are available in my app. I can use the WordPress category system to organise posts in my app. As I add new content it is automatically added into the app.
I can use automated push notifications to tell my app users whenever I add a new post.
Why I think Apps Beat Mobile Responsive Websites
Shock horror Neil the WP Dude coming out against WordPress, well this is not the first time I have done this, I think apps are better than mobile sites in a few ways.
Apps are designed for mobile first and don’t carry all the design baggage of the desktop version of site tweaked to fit a mobile device.
Apps also bring with them features that you cannot get from a website yet namely:
- Push notifications – send messages to a persons push notification, I bet you open more of these than you do emails as soon as you get them
- Push to call – initiate phone calls directly from an app, I know the tel: link on a mobile site does the same, but apps do it much more seamlessly
- Gelocation services- GPS tells a person where they are in relation to the app owners location so you can use gelocation service to direct people to yoru physical location or to send offers when they are close by.
- Sits on the screens of our always with us device. – I need to navigate to skopemag.com to get the content, now it sits on my device and I can access it very quickly, add in a push notification and I’m there in a single click without leaving the sofa.
Features Of The App
I added the following features to the app:
- Minimal dark design to fit the content of the app and match the website
- WordPress categories pulled into the app
- Share with social networks
- Push Notifications
- Analytics (downloads sessions, screen usage)
- Advertising linked to MoPub so he can sell ad slots
- Linked to Youtube channel (with auto update as videos are added)
- About us page with geolocation and push to call
- Added code to his website so mobile uses are offered an app download
- Banner ads
- Contact Us via email which open the email app
- Links to website and social media
Downsides of App = Cost
We are still at an early stage for B2B apps, so there are a few additional costs you need to consider over website development
- Hosting costs – it costs more per month to host an app than it does a website.
- Apps store costs – you need to factor in $99 per year for apple and $25 for google play.
- There are not as many app developers as there are open source WordPress developer so that cost is higher.
You can publish what you want on your website but you still need to do the Apple app approval dance to get your app into the store
You bow down and submit you app before the iOS gods and the deign to look down upon your poor offering. If and only if it meets their approval are you allowed to publish.
I know they are only protecting their infrastructure but sometimes the disapproval reasons are draconian. This can take up to 10 days, for our app it was about 5.
Wrap Up – How To Make An App For A WordPress Website
This has been on of my favourite projects of recent days, it makes a refreshing change to swap technologies.
Checkout the website and download the app for a feel for how they work together.
I’m planning on launching my own app, later in the summer, which I will use to teach people how to market their business with an app. Once you see the stickiness of app content and how you can market to people I’m sure you will get the app bug in addition to your website marketing efforts. Watch out for that.
If you would like to start a conversation about getting your own app, here is the starting point my
wordpress app development page just mention apps in the request :).