Everything you need to know about building mobile apps

Learn what a mobile app can do for your business, how to build a great mobile app, and much more. Enter your email below for our free ebook.

Reactor Development: Embedded Webpage

The Embedded Webpage Page Type is available for when you need to include something in your app and none of the other page types can handle the content. Or, you want to include something from a different site from where your WP API data is supplied.

image by  danbri

image by danbri

This page type should be used only when absolutely necessary. You do not want to add links to display your desktop site/theme in the app. This may actually get you rejected from Apple review process.

You can still serve a url from your website but the content must be formatted to match your App and be inline with Apple design guidelines. We use the Ionic Framework in Reactor so any HTML/CSS from this framework will fit perfectly in your Embedded Webpage templates.

How To Create A Template

If you have ever created a template in a WordPress theme then you already know how to create a template for Reactor Embedded Webpage. It is best to create a plugin on your site to handle the template redirects. Remember, we want to show a custom template and not the desktop theme.

Example of simple template markup

This template could contain only static html, a post loop or even data from another site like a Twitter feed.

<!DOCTYPE html>
        <?php reactor_get_stylesheet(); ?>
        <?php wp_head(); ?>

        <div class="padding">Put anything here!</div>

        <?php wp_footer(); ?>

To get the page (iframe) to show in your app you choose the Embedded Webpage Page Type in Reactor builder and enter the url to your template or webpage. In the example below I have appended the url with the parameter ?iframe=tweets. This is so on my WordPress site I can redirect the template that gets served and display something custom.


Filtering the Template

In WordPress we have the filter ‘template_include’. When you filter this it tells WordPress to not display its normal template and use our custom template. So in our Webpage URL I have included a parameter and in the code below we check for that parameter and then supply a template file accordingly. Also, I’ve included a filter to remove the admin bar. This is necessary if you want to use wp_head() or wp_footer() in your template and not have the admin bar which can break the look of your custom app template.

function reactor_process_query( $template ) {

    if ( isset( $_GET['iframe'] ) && $_GET['iframe'] === 'tweets'  ) {
        add_filter('show_admin_bar', '__return_false');
          $template  = trailingslashit( plugin_dir_path( __FILE__ ) ) . 'tweets.php';

      return  $template ;

add_filter( 'template_include', 'reactor_process_query');

In Reactor App preview you can see my embedded page displaying the custom content text.


Leave a Comment