WordPress/BuddyPress Mobile Theme and App

30% of all web traffic comes from mobile devices, and it is increasing. If you are a business owner which is integrated with internet, then you most likely have a website. Assuming built on WordPress, most popular CMS, or BuddyPress based community site, you might already using responsive themes or adaptive design to make it mobile friendly, because you don’t want to offer bad browsing experience to those 30% traffic.

However, how effective those responsive themes or adaptive designs? Is a separate mobile theme is better than responsive theme? Ultimately, Can we publish mobile applications of sites based on just adaptive/responsive/mobile theme? How far we can push?

Well, Lot of questions all together, I know, but this post is to discuss about those questions and potential answer with one of live example project which I completed recently, which I will be using for demo purpose. So bear with me 🙂

# Responsive vs Mobile theme

I suppose we are all familiar with responsive themes. Most of the WordPress/BuddyPress themes are responsive these days. It is the most basic approach to make your site mobile friendly. Its essential of course. This approach provides generic content alignment. However, This approach can not provide device specific content. What I mean by that is, lets say for example you want different header design and navigation content for your website for Web, Android and iPhone. In responsive approach can not do that.

Responsive mode of tradester.org

Mobile theme approach on the other hand has better control over content organisation for targeted device. The idea is simple, when developing theme, from backend, you can track if user is coming from mobile browser or web browser analysing user agent. And then deliver different version of the theme accordingly. Yes, you may need to develop 2 different versions but if done properly, mobile theme can provide native app like feeling. Here is again tradester.org view in mobile theme when browsing from mobile


tradester.org Mobile View


As you can see, 2 versions are totally different in term of UI and content as well. That is the great advantage of having separate mobile theme/mobile version of the site, to serve device targeted content.

# Its alright but user has to use web browser, why should I spend time on mobile theme?

well, if you do that, it’s just few steps away to provide users native mobile app of your site. Over the time we had so many hybrid mobile app building frameworks like PhoneGap, Ionic and others, but one framework stands out React Native! Unlike other frameworks, which are mostly webView based, react native actually can interact deeply with phone’s native features. However, in our discussion, we will focus on webView.

So assuming you have now your mobile version of the site, which feels like native app, it just few steps more to build your native mobile app with webView component. To simplify, webView component is basically a white labeled browser that is provided by operating system, from Android, its headless Chrome browser. For iPhone, its headless safari. But either way, it’s just a browser, more specifically, mobile browser. That means, you can load your site on these webView without the address bar and then build it as fully functional native app. Then publish it to google play or apple app store.

# But wait! Is it the right approach of building mobile app?

Frankly, No! ideal app should use rest API or XML-RPC to fetch data and load UI from the app itself. Unfortunately, Even tho WordPress core has REST api in it, but a lot of plugins we usually use, doesn’t provide REST API. So, that’s why we can not fully build an independent, offline supported mobile app with WordPress, unless of course we make sure that all the plugins that we are using has REST integration.

# Case study for tradester.org

tradester.org is a community and career tool for working class people. I have recently finished its first phase of development. It is based on WordPress and BuddyPress and some custom plugins. The primary challenge of this project was, target audience of this project barely use PC, they mostly use mobile for social interaction. So, we needed to ensure that it is super user friendly at mobile as well as we can provide mobile app.

Keep those in mind, We have use similar approach that I have described, except, I used rest api as well, along with webView. and result was excellent in my view (it’s yours to judge 😉 )

We have built native mobile app of tradester both for Android and iOS and published as well. Those are working perfectly fine!
Just in case you want to check, Android app and iOS app links are here.

# So what’s next?

well, WordPress is more powerful now than ever, having REST API at its core. A lot of major plugins also providing REST API. But BuddyPress still doesn’t have REST API. For my case, who uses BuddyPress a lot, its frustrating. So, I have slowly developing REST API for BuddyPress components. And hoping to create perfect mobile application for BuddyPress based social networks.

Let me know your thoughts in comment. I would love to hear other approaches. If you have similar need for you WordPress/BuddyPress based community and need development help, Let’s discuss, leave a note at this page and I will do free consultancy for you 🙂

6 comments on “WordPress/BuddyPress Mobile Theme and App

  1. ” slowly developing REST API for BuddyPress components” ??

    I think you should make it fast and put it on your priority list. I keep looking for any BuddyPress Rest API plugin until now. Really looking forward for your work in future.

  2. Hey I was just wondering how exactly did you convert the WordPress site into a native app using webview? Did you use a plugin or did you code it yourself, I’ve been looking everywhere trying to accomplish the same thing..

    1. Hey Kris,
      I haven’t use any plugin for that. the approach is, you make app like theme with WordPress templatetags and then render it only when user brows from mobile using wp_is_mobile() function. When you do that, then you are actually delivering different content for web and mobile for same endpoint.

      later, you just need to load the url in app’s webView

  3. I read the whole article thinking you were going to show how you did it. :/ any tutorials on this subject?