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
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>
<html>
<head>
<?php reactor_get_stylesheet(); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="padding">Put anything here!</div>
<?php wp_footer(); ?>
</body>
</html>
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.
