WordPress Hybrid Client: WordPress Powered iOS/Android Apps

Share this article

WordPress Hybrid Client
WordPress Hybrid Client (WPHC) is an Open Source project available on GitHub that lets you easily create iOS and Android versions of your WordPress website for free. WPHC is based on the Open Source hybrid stack Ionic SDK, Cordova, and Crosswalk . WPHC on devices

Features

  • Push notifications
  • Bookmarks (offline mode)
  • Google Analytics support
  • Automatic content updates
  • Social buttons
  • Accessibility (post font size)
  • Multi languages (English, French, Chinese)
  • Infinite scroll
  • Syntax highlighter for tech blogs
  • Image cache
  • App rate

Built with WPHC

Here are a few examples of projects built using WPHC:

Installation

Warning: This installation works on both OS X and Linux. Windows is not supported yet. First of all you’ll need to clone the project (no need to fork it):
$ git clone https://github.com/shprink/wordpress-hybrid-client.git

# Open the project folder
$ cd wordpress-hybrid-client

# List all tags
$ git tag
v1.0.0
v1.1.0
v1.2.0
v1.3.0
v1.3.1
v1.4.2

# checkout the latest version available
$ git checkout v1.4.2
Then, all you need to do is run the following script and wait:
sh ./install.sh
You can find more information on installation here.

Configuration

Now that the installation is done, you will have two config files created at the project root:
  • config.json for the application configuration
  • config.scss for the style configuration.

Application

Most of the application behavior is configurable through the config.json file. Here is a simple view of what you can configure:
  • title
  • api
    • baseUrl
    • timeout
    • maxAttempt
  • menu
    • exposeAsideWhen
    • list
  • settings
  • cache
    • views
    • forward
    • img
    • data
  • bookmark
  • post
  • syntaxHighlighter
  • taxonomies
  • posts
  • translation
    • available
    • prefered
  • analytics
  • cordova
    • statubar
    • appRate
    • pushNotifications
You can find more information here.

Style

You can overwrite any Ionic or WPHC Sass variables within the config.scss file. This is also the place to add any specific styles that you may require. You can find more information here.

Web Service

Install this plugin https://wordpress.org/plugins/json-rest-api/ and activate it, then modify config.json:
"api": {
    "baseUrl": "http://YourDomain.com/wp-json"
},
Now your web service is ready to be queried.

Push Notifications

Install this plugin https://wordpress.org/plugins/push-notifications-for-wp/ and activate it, then modify config.json accordingly. If you do not want push notifications enabled, set "enabled": false and skip this section.
"pushNotifications": {
    "enabled": true,
    "baseUrl" : "http://yourDomain.com/pnfw",
    "android": {
        "senderID": ""
    },
    "ios": {
        "badge": true,
        "sound": true,
        "alert": true
    }
}

Android

If you have not already done so, you will need to set up a Google API project, to generate your senderID. Follow these steps to do so. Get your senderID by following the Cloud messaging steps at https://developers.google.com/mobile/add. Tip: the senderID is a 12 digit number. Open your WordPress admin page and go to Push Notifications > Settings to check the following checkboxes:
  • Basic Options > Send push notifications when a new post is published
  • Basic Options > Android devices
  • Send Push Notifications for > Posts
  • Misc > In the Android notification payload add the message field
Then go to ‘Android Push Notifications (via GMC)’ section and enter your Google API key. Don’t forget to save.

iOS

Open your WordPress admin page and go to Push Notifications > Settings to check the following checkboxes:
  • Basic Options > Send push notifications when a new post is published
  • Basic Options > iOS devices
  • Send Push Notifications for > Posts
Get .perm files and upload them in the iOS Push Notifications section. You can find more information on push notifications here.

Development (Web)

Now that the installation is done, make sure the project is running properly. To do so, run the following command:
npm run devserver
Then open http://localhost:8080/webpack-dev-server/ and check if everything runs as expected. Every source code modification (or config) will build the project automatically and live reload the application. You will immediately see the result.

Build (native)

Install Cordova’s Platforms and Plugins

All you need to do is to run one command and answer the questions: npm run installCordova
$ npm run installCordova

> wordpress-hybrid-client@1.4.0 installCordova /Users/shprink/Sites/demos/wphc-1.4
> sh ./install_cordova.sh

Which platforms do you want to build? (android ios):
Once you’ve selected the platforms you want to build for, the script will install all the necessary Cordova plugins.

Android

Prerequisites

  • Android SDK
  • Ant

Build and Run the Dev Version (non minified and debug ON)

Plug your device in if you have one (make sure your device is listed by running: $ adb devices) or let Android emulator handle it.
# Dump dev files within the www folder
npm run dumpdev

npm run runAndroid
Pro tip: If you want to test the minification you could also run the prod version on debug mode by using npm run dumpprod instead of npm run dumpdev

iOS

Prerequisites

  • OS X
  • Xcode
  • Provisioning profile
  • iOS Simulator
sudo npm install -g ios-sim npm install ios-deploy

Build and Run the Dev Version (non minified and debug ON)

Plug in your device if you have one or let the iOS simulator handle it.
# Dump dev files within the www folder
npm run dumpdev

npm run runIOS
Pro tip
: If you want to test the minification you could also run the prod version on debug mode by using npm run dumpprod instead of npm run dumpdev You can find more information here.

Release

Make sure you have iOS and/or Android platforms installed. If you’ve correctly run npm run installCordova it should be fine.

Android

Get and Save the Licence Key

https://support.google.com/googleplay/android-developer/answer/186113?hl=en Copy and paste the key within your ~/.ssh folder with that name android_wphc.keystore NB: You can put the key wherever you want and even rename it. But if you do that, you will need to modify release.sh accordingly.

Build PROD APKs

npm run build
Then, follow the prompts.

iOS

Documentation

Building for iOS can be painful if you have not read the following documentation first: https://developer.apple.com/programs/ios/gettingstarted/ https://developer.apple.com/library/mac/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/CreatingiTunesConnectRecord.html#//apple_ref/doc/uid/TP40011225-CH13 http://codewithchris.com/submit-your-app-to-the-app-store/

Install sigh

‘Sigh’ allows us to sign .app’s with a provisioning file via the terminal.
# https://github.com/KrauseFx/sigh
sudo gem install sigh

Build PROD IPA

npm run build
Again, follow the prompts. You can find more information here.

Conclusion

By now you should have a running application of your WordPress website. If you like this project, you can contribute (there are many great features coming), follow the blog or even chat with us! Also if your application is available on stores, feel free to share it with us, we will promote it in our “Built with WPHC” section! If WPHC isn’t exactly what you’re looking for, here’s a list of my favorite paid services:

Frequently Asked Questions (FAQs) about WordPress Hybrid Client for iOS and Android Apps

How does the WordPress Hybrid Client work for iOS and Android apps?

The WordPress Hybrid Client (WHC) is a solution that allows you to convert your WordPress website into a mobile app for iOS and Android platforms. It uses the WordPress JSON API to fetch data from your website and display it on the app. The WHC is built on the Ionic framework, which is a popular choice for hybrid mobile app development. It provides a seamless user experience, maintaining the look and feel of your website while offering the convenience and functionality of a mobile app.

Is it necessary to have coding skills to use the WordPress Hybrid Client?

While having some basic knowledge of coding can be beneficial, it’s not strictly necessary to use the WordPress Hybrid Client. The WHC provides a user-friendly interface and detailed instructions to guide you through the process. However, if you want to customize the app beyond the default settings, some knowledge of HTML, CSS, and JavaScript could be required.

Can I customize the look and feel of my app using the WordPress Hybrid Client?

Yes, the WordPress Hybrid Client allows you to customize the appearance of your app. You can change the color scheme, layout, and other design elements to match your brand identity. However, keep in mind that advanced customization might require some knowledge of HTML, CSS, and JavaScript.

How does the WordPress Hybrid Client handle updates?

The WordPress Hybrid Client automatically fetches the latest content from your WordPress website. This means that whenever you update your website, the changes will be reflected in the app as well. You don’t need to manually update the app every time you make changes to your website.

Is the WordPress Hybrid Client compatible with all WordPress themes?

The WordPress Hybrid Client is designed to work with any WordPress theme. However, the final appearance of the app might vary depending on the complexity and design of your theme. It’s recommended to test the app thoroughly after setting it up to ensure that it displays your content correctly.

Can I use the WordPress Hybrid Client for e-commerce websites?

Yes, the WordPress Hybrid Client supports WooCommerce, which is a popular e-commerce plugin for WordPress. This means you can convert your e-commerce website into a mobile app, allowing your customers to shop directly from the app.

Is the WordPress Hybrid Client free to use?

The WordPress Hybrid Client is an open-source project, which means it’s free to use. However, keep in mind that publishing your app on the Apple App Store and Google Play Store might involve some costs.

How secure is the WordPress Hybrid Client?

The WordPress Hybrid Client uses the WordPress JSON API to fetch data, which is a secure method of transferring data. However, the security of your app also depends on the security measures you’ve implemented on your WordPress website.

Can I use plugins with the WordPress Hybrid Client?

Yes, the WordPress Hybrid Client supports most WordPress plugins. However, some plugins might not function as expected due to the differences between web and mobile platforms. It’s recommended to test each plugin thoroughly after setting up the app.

How can I get support for the WordPress Hybrid Client?

As an open-source project, the WordPress Hybrid Client has a community of users and developers who can provide support. You can also find detailed documentation and tutorials on the official website.

Julien RenauxJulien Renaux
View Author

Julien is a front-end Mobile Engineer with experience working for startups and multinationals across the world. Julien worked as a certified Scrum Master for eBay, inc with a team of 10 engineers. He spends most of his free time writing on his blog, developing his own open source projects, or contributing to JavaScript projects such as Ionic Framework or Angular Material.

androidChrisBCordovacrosswalkioniciosWordPressWordPress AppWPHC
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week