React Native App with WordPress backend – Part 1

WordPress can prove to be most cost effective and fast to built back-end for some specific type of react native apps.  Unfortunately, its quite underrated. With every new version, WP team is making there rest api more powerful and easy to implement. Before WordPress version 4.7 a plugin need to be installed in WP website to use the rest-api feature, but now, it has become integral part of WordPress.

WordPress rest-api has many pre-built endpoints but it also offers feature to create custom endpoints. Many-a-times we will need to create a custom endpoint when we are using WP as back-end for an App. So, in this post I will show you how we can create custom endpoints for React Native App.

We will create the end point as a separate plugin, so that, no other plugin or theme get affected by our code and they can be updated without any issue.

First thing we need to do is that, we will install WordPress version 4.7 or above on our local host or web host.

Next, we need to create a directory in the plugin directory of WordPress, of which name should should be same as the name of the plugin.

Now, create a file in the new directory with same name as directory and extension php.

Now add the following info in the new file :

<?php
/**
 * Plugin Name:       TAC ListingPro
 * Plugin URI:        http://customphpscript.com/
 * Description:       Plugin to add custom features to listingpro theme
 * Version:           1.0
 * Author:            Dev Abhi
 * Author URI:        http://customphpscript.com/
 */

The above commented information in required to create any WordPress plugin and you can change and customize it. Now we are ready with simplest type of WP plugin. You can go to menu Plugins>>Installed Plugins and find your plugin listed there. Go ahead and activate your new plugin.  At the moment plugin has no functionality because we haven’t added any code to it.

Now lets add the code below to create a new endpoint:

// handler for the hook
function my_listing_func( $data ) {
  $posts = get_posts( array(
    'author' => $data['id'],
  ) );

  if ( empty( $posts ) ) {
    return null;
  }

  return $posts[0]->post_title;
}
// wordpress hook of type action
add_action( 'rest_api_init', function () {
  register_rest_route( 'mylistingplugin/v1', '/author/(?P<id>\d+)', array(
    'methods' => 'GET',
    'callback' => 'my_listing_func',
  ) );
} );

In the above code, we have created a handler, inside which we have added query to retrieve all post of which author id matches the id sent as parameter. Next if the $post variable is empty we are returning null otherwise we are returning post_title field of first element of array object.

Next we are attaching the handler to a rest_api_init hook of type action. rest_api_init hook is the type of hook that allows us to create custom rest api endpoint.

Now if you go to below url:

http://localhost/wordpress/wp-json/mylistingplugin/v1/author/1

you will get the respective post title.

Now, lets change our query to fetch some custom data from the db. To make things short  I am using ListingPro theme  which creates and add some custom posts and taxonomy and we will write query to fetch it.

Below is the code to fetch all custom categories( taxonomy ) :

// handler for the action
function tac_get_category($data){
  $args = array('taxonomy' => 'listing-category', 'parent'  => 0);
  $categories = get_categories($args);
  //array_pop($categories);

  if ( empty( $categories ) ) {
    return null;
  }

  return $categories;
}

// wordpress hook of type action
add_action( 'rest_api_init', function () {
  register_rest_route( 'mylistingplugin/v1', '/category', array(
    'methods' => 'GET',
    'callback' => 'tac_get_category',
  ) );
} );

In the above code we are fetching all the Main/parent categories ( taxonomy ) of type ‘listing-category’. if you now go to url :

http://localhost/wordpress/wp-json/mylistingplugin/v1/category

You will get all the Main categories of  ‘listing-category’ type.

By now you must have got idea of how to create custom endpoints. You just have to learn the WordPress Api/Queries to retrieve data and you can fetch any required data for you App.  Lets me show two more queries before we wrap-up this article.

Below is the code to fetch all sub-categories of type ‘listing-category’ of given category Id :

        $term_id = $catid;
        $taxonomy_name = 'listing-category';
        $term_children = get_term_children( $term_id, $taxonomy_name );
        $sub = [];
        foreach ( $term_children as $child ) {
          $term = get_term_by( 'id', $child, $taxonomy_name );          
          $sub[$term->term_id] = $term->name;
        }
        print_r($sub)

Below is the code to fetch all listing (custom posts) of type ‘listing’ of given category Id is 14 and category (taxonomy) type is ‘listing-category’ :

    $args = array(
        'post_type' => 'listing',
        'tax_query' => array(
            array(
                'taxonomy' => 'listing-category',
                'field' => 'id',
                'terms' => 14,
            )
        )
      );
    $custom_posts = get_posts( $args );
    print_r($custom_posts)

I shared the above queries because it took me lots of  time to find them and most of the queries available online are outdated. So I hope someone will find it time saving and useful. In next part we will use the above end-points in our app to create some useful functionality.

If you enjoyed the above article and found it useful then please subscribe to our newsletter and You-tube  channel and stay tuned to such informative article and videos.

Video Tutoial