Create a universal application using Ionic and WordPress with Capacitor

Using WP API, we can create various applications with our WordPress data.

For example, we can create a native application with WordPress.
We can easy to publish the application’s news or our store/service updates by WordPress, and the user uses the application natively.

Ionic is one of the frameworks to create a cross-platform mobile application. We can easy to create Android/iOS/Mac/Windows/etc.. application just a single JavaScript SPA.

Demo site

We’ve created a demo site using Ionic and WordPress

We’ve created a demo site using Ionic and WordPress

The source code is hosted in GitHub.


Launch example application

If you try to launch the example site using your own WordPress site.

You can create a new project by the following command.

$ git clone
$ cd ionic-react-wordpress 
$ npm install
$ npm start

Use own WordPress

The general configuration file is src/config.ts. You can update properties for your WordPress site.

class Config {
    get postURLPrefix() {
        return 'news'
    get pageURLPrefix() {
        return ''
    get wordpressURL() {
    get wpClient() {
        return new wp({
            endpoint: this.wordpressURL

Run in your local

Gatsby provides a local server to customize your website in your local.

$ npm run start

Build and deploy

We can build the application for production by the following code.

$ npm run build

And the production application is placed in build directory.

We can upload these files on the build directory to any server like a Netlify / AWS Amplify / Firebase hosting.

Create a Cross-Platform application

We can create a Cross-Platform application using by Capacitor.

In this blog posts, we’ll try to create macOS application in our local.

Create and build a macOS application

Try to run these command in your macOS terminal.

$ yarn run build && npx cap copy
$ npx cap open electron
Desktop application (using Capacitor with Electron)

And we can build the application by these commands.

$ yarn run build && npx cap copy
$ cd electron
$ npx electron-packager . sample --platform=darwin --arch=x64
$ open ./sample-darwin-x64

Pros and cons for Ionic(&Capacitor)


  • We can easy to create a Cross-Platform application using a SPA source code.
  • Easy to get an optimized view for their device (Using Ionic)
  • Easy to access their device APIs(Using Capacitor)
  • Almost useful components are included in Ionic-core.
  • Can use HTML5 features


  • Needs prerendering or SSR for SEO / OGP / etc..
  • Initial rendering speed is a little bit slower than SSG-created-site
  • Not Native application


Using WP API and several SPA frameworks like Ionic and Capacitor, we can create an application for multi-platform (web/iOS/Android/macOS/Windows/etc..)

This means we’re able to publish our content in several ways/options to our customers. Not only web but the native application, eBooks, VUI, etc…

So, we can try to provide a new digital experience for our customers.

Take the Next Step

Get started on your website today with Shifter. Try out our free plan and take the first step towards building the perfect website for you and your visitors.