WordPress
Article

WordPress Hybrid Client: WordPress Powered iOS/Android Apps

By Julien Renaux

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:

  • Sari

    What is the device/OS version requirement for this app? I looked at Google Playstore for your blog app and it said “This app is incompatible with all of your devices.”. I use Samsung Galaxy Tab 10.1 and Android 4.1.2

    • http://julienrenaux.fr/ Julien Renaux

      Ionic is compatible up to 4.0 if I recall correctly. It is up to you when you configure your app in config.xml

      • Eduardo Diniz Costa

        Help me !

        sh-3.2# npm run devserver

        > wordpress-hybrid-client@1.7.0 devserver /Users/eCriativos/Documents/app/wordpress/wordpress-hybrid-client

        > webpack-dev-server –port 8080 –json –progress

        0% compilehttp://localhost:8080/webpack-dev-server/

        webpack result is served from /

        content is served from /Users/eCriativos/Documents/app/wordpress/wordpress-hybrid-client

        61% 90/105 build modulesContainer#eachAtRule is deprecated. Use Container#walkAtRules instead.

        ************************
        Whta`s..

        webpack: bundle is now VALID. <<<<<<<—————-???????

  • http://careersreport.com Gabriella Wilson

    This is how it is possible to earn sixty-five bucks /hour… After being without work for half a year , I started making cash over this site and today I am very satisfied. 3 months have passed since being on my new job and my income is around five thousand bucks/monthly -Check internet website* i mentioned by following link on MY(PROFILE)PAGE

  • orlandochr

    Testing with http://www.rockenpy.com/v1/wp-json i’m not receiving any data, (just attempt to connect 1 of 3 and retry msg) at http://localhost:8080/webpack-dev-server/ but if i try (just changing the base url in config.json) with http://julienrenaux.fr/wp-json it’s works fine and i gets data from the blog.

  • orlandochr

    It’s Works!!! thanks…

  • orlandochr

    Ok, i’ll let you know thanks, another question, where can i get documentation of how to add social buttons, changes menu items, etc. now in the list of posts don’t show the post image , just a grey background, but when a click on the post, there show the images. where can i see that?…

    • http://julienrenaux.fr/ Julien Renaux

      Images are featured images, I have never encountered this problem before. Please add an issue on github if it last.
      Social buttons are not encouraged as Apple will refuse your app if present. You already have a share button that handle all social networks.

  • Eduardo Diniz Costa

    Help me !

    sh-3.2# npm run devserver

    > wordpress-hybrid-client@1.7.0 devserver /Users/eCriativos/Documents/app/wordpress/wordpress-hybrid-client

    > webpack-dev-server –port 8080 –json –progress

    0% compilehttp://localhost:8080/webpack-dev-server/

    webpack result is served from /

    content is served from /Users/eCriativos/Documents/app/wordpress/wordpress-hybrid-client

    61% 90/105 build modulesContainer#eachAtRule is deprecated. Use Container#walkAtRules instead.

    ************************

    webpack: bundle is now VALID. <<<<<<<—————-???????

  • Eduardo Diniz Costa

    Help me !

    sh-3.2# npm run devserver

    > wordpress-hybrid-client@1.7.0 devserver /Users/eCriativos/Documents/app/wordpress/wordpress-hybrid-client

    > webpack-dev-server –port 8080 –json –progress

    0% compilehttp://localhost:8080/webpack-dev-server/

    webpack result is served from /

    content is served from /Users/eCriativos/Documents/app/wordpress/wordpress-hybrid-client

    61% 90/105 build modulesContainer#eachAtRule is deprecated. Use Container#walkAtRules instead.

    ************************

    webpack: bundle is now VALID. <<<<<<<—————-???????

    • http://julienrenaux.fr/ Julien Renaux

      can you share your node and npm version?

      Recommended are npm v4.x and npm v3.x

  • Anderson Abreu Rabelo

    Help-me:

    wordpress-hybrid-client@1.4.2 devserver /home/anderson/wordpress-hybrid-client
    > http://localhost:8080/webpack-dev-server/

    sh: 1: http://localhost:8080/webpack-dev-server/: not found
    npm ERR! weird error 127
    npm WARN This failure might be due to the use of legacy binary “node”
    npm WARN For further explanations, please read
    /usr/share/doc/nodejs/README.Debian

    npm ERR! not ok code 0

    • http://julienrenaux.fr/ Julien Renaux

      There is no support for the version you are using. Please use the latest v2.0.0-beta06

  • Anderson Abreu Rabelo

    How do I get my application is supported in various versions of Android?

  • Michael Mofokeng

    Any workaround to install the app on Windows for development?

  • Ahmed Almulki

    Why not supported Windows !!!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in WordPress, once a week, for free.