Developers: support custom plugins in Reactor

Scott
Bolinger

Reactor is an easy-to-use mobile app builder for WordPress businesses. Developers can extend the functionality of Reactor to integrate custom features and content using template hooks.

If you have a client that needs a custom app, or you want to support a certain plugin, you can do that using the template hooks. Let’s take a look at how that works by building a podcasting app.

Let’s say you have a client that has a website using the Blubrry Powerpress Podcasting plugin, and they want to make a mobile app. Reactor doesn’t support this plugin out of the box, but we can use template hooks in a custom plugin to make it work in the app.

First, let me explain why this doesn’t work out of the box with Reactor, and what we are going to do.

Custom plugins in Reactor

Reactor uses the WordPress JSON REST API to get content from your website. Think of it like turning all of your site content into text. We then pull that text into Reactor, where there are already template files and designs ready to display that text. The reason we do this is because sending text to our app is much faster than trying to load all of the images and files from your website.

Because this technology is fairly new, many plugins don’t support it. For example, I can get the title and content of a post, but not post meta. The Blubrry plugin uses post meta to display the podcast player and download links, and they have not added support for the WP API.

Eventually many plugin authors will add support for the WP API, but until then, we have to do it ourselves.

To get the podcast information from the Blubrry plugin into our app, we have to do 2 things.

1. Find the post meta we need
2. Display that content in our app using Reactor template hooks

We can do this with less than 10 lines of code.

Play podcastWe are going to display a “play podcast” button after the content of each podcast post that gets the url of the media file and plays it in the app. It’s going to be very simple at first, but I’ll talk about how we can take it even further.

Step 1: find the meta we need

To get custom data into our app, we are going to need a custom plugin. You can download a sample plugin here.

This plugin will be activated on your WordPress site. Your account on Reactor should be using the url to this same WordPress site for the app.

Let’s figure out what post meta we need to display. All I really need is the url to the media file, with that I can play it or download the file.

After looking through the Blubrry documentation, I found that I can get the information I need with this:

$powerpress_content = powerpress_get_enclosure_data($post['ID'], $feed_slug='podcast');

I can then use $powerpress_content[‘url’] to get the file url.

Now that we have the meta we need, how do we use that in the app?

Step 2: display it in the app using template hooks

If you take a look at our documentation for template hooks, you’ll see that we can display content almost anywhere in the app. In our case, I want to display a button after the post content, so I’ll use the $post_response[‘do_api_action’][‘default’][‘below_content’] hook.

We are going to use the json_prepare_post filter in WordPress to get our podcast button into the app. If I add the $powerpress_content array from above, our code will look like this so far:

function custom_json_api_prepare_post( $post_response, $post, $context ) {
 
    $powerpress_content = powerpress_get_enclosure_data($post['ID'], $feed_slug='podcast');
 
    return $post_response;
}
add_filter( 'json_prepare_post', 'custom_json_api_prepare_post', 10, 3 );

This code won’t do anything yet, let’s add the Reactor template hook, which looks like this.

$post_response['do_api_action']['default']['below_content'] = 'Play podcast';

The template hook is the stuff in brackets, you can choose different places to display such as below_content or above_title. Let’s add the podcast file url, and make sure it only displays if a podcast is there to play.

function custom_json_api_prepare_post( $post_response, $post, $context ) {
 
    $powerpress_content = powerpress_get_enclosure_data($post['ID'], $feed_slug='podcast');

    if ($powerpress_content) {
    $post_response['do_api_action']['default']['below_content'] = '<a href="' . $powerpress_content['url'] . '" class="button button-block">Play podcast</a>';
    }
 
    return $post_response;
}
add_filter( 'json_prepare_post', 'custom_json_api_prepare_post', 10, 3 );

That’s it!

You should now see this button in your app on the posts that have a podcast. Clicking the button will open the in app browser to play the file. Of course we could take this further and play the file natively or download it for offline use, but that’s for another tutorial.

Making custom apps

You can see how easy it is to add support for custom plugins, the sky is the limit.

This method will work for any plugin that uses post meta to display content on your website. Examples would be Advanced Custom Fields, Events Calendar Pro, and many more.

This will not allow you to post data to your site, in a forms plugin for example. It is only for displaying content.

Making custom mobile apps for your clients has never been easier, we can’t wait to see what you build. If you are a plugin author, contact us about adding support for the WP API in your plugin.

Further Resources:

Everything you need to know about AppPresser in 4 days

Ios-android-hero-300

Learn how AppPresser works, and how it can help you get a great mobile app published quickly and affordably. Get 1 email each day for 4 days.

We won't send you spam. Unsubscribe at any time. Powered by ConvertKit

11 thoughts on “Developers: support custom plugins in Reactor

  1. It is helpful to see demonstration like this – I figured this was the purpose behind reactors WP JSON API implementation.

    The more I use WP I recognize the power of the post as a carrier of both content and meta data. Your example is an eye-opener to the way reactor can be useful for drawing functionality from sites that employ post metadata.

    My Apppresser application is good, but I am hoping to try to build a reactor version for comparison, but I need to get all relevant data into each of the posts since the web theme plugins are not visible to Reactor. Essentially, I need to recreate the display functions of the website within the mobile reactor framework drawing on the information in post meta data.

    Thank you for this example. It makes sense.

    1. Hey Jamie, thanks for the comment. Reactor will display any post/page content, and you can add post meta like this example. For display purposes, you can use custom CSS, and we will have custom templates soon as well. I hope that helps!

    1. Hi Heather, I am not familiar with that plugin, but it will not work with Reactor unless you add your own custom code. It might be best to consult with a developer about building this custom integration for you.

  2. Is AppPresser a subset of Reactor? I am not clear on how to compare all of the plugins of AppPresser with the features of Reactor. Can I replicate everything I need to do in AppPresser with Reactor instead (is Reactor more powerful)?
    For example, I want to photoblog and post the GPS locations with the time and date to document the areas I visit. I want to save my photos and videos and audio comments without restriction back to my WordPress blogging website.

    1. Hi Claire, Reactor is a totally separate product from AppPresser. One is not more powerful than the other, they just work differently.

      AppPresser has photoblogging capabilities through the AppCamera extension, if you email us with more details we can help you get started.

      Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *