How do I create an HTML embed code to publish WP posts on other non-WP websites?

Question

You basically need to create an area outside of your current theme in which to create some content that you can stick into an iframe.

You just give your user something like this:

<iframe src="http://yoursite.com/iframe/"></iframe>

And they have your posts on their site!

Step one is going to be creating a URL end point for your iframe. First you need to add a rewrite rule for the iframe, then filter the query variable to make sure WordPress recognized your new iframe query var and doesn’t strip it out.

<?php
add_action( 'init', 'wpse32725_add_rewrite' );
/**
 * Adds the rewrite rule for our iframe
 * 
 * @uses add_rewrite_rule
 */
function wpse32725_add_rewrite()
{
    add_rewrite_rule(
        '^iframe$',
        'index.php?iframe=true',
        'top'
    );
}

add_filter( 'query_vars', 'wpse32725_filter_vars' );
/**
 * adds our iframe query variable so WP knows what it is and doesn't
 * just strip it out
 */
function wpse32725_filter_vars( $vars )
{
    $vars[] = 'iframe';
    return $vars;
}

Next up, hook into template_redirect and “catch” whenever the iframe query variable is present. If it is, you can do whatever you want. Eg. get a list of posts and display them.

<?php
add_action( 'template_redirect', 'wpse32725_catch_iframe' );
/**
 * Catches our iframe query variable.  If it's there, we'll stop the 
 * rest of WP from loading and do our thing.  If not, everything will
 * continue on its merry way.
 * 
 * @uses get_query_var
 * @uses get_posts
 */
function wpse32725_catch_iframe()
{
    // no iframe? bail
    if( ! get_query_var( 'iframe' ) ) return;

    // Here we can do whatever need to do to display our iframe.
    // this is a quick example, but maybe a better idea would be to include
    // a file that contains your template for this?
    $posts = get_posts( array( 'numberposts' => 5 ) );
    ?>
    <!doctype html>
    <html <?php language_attributes(); ?>>
    <head>
        <?php /* stylesheets and such here */ ?>
    </head>
    <body>
        <ul>
            <?php foreach( $posts as $p ): ?>
                <li>
                    <a href="https://wordpress.stackexchange.com/questions/32725/<?php echo esc_url( get_permalink( $p ) ); ?>"><?php echo esc_html( $p->post_title ); ?></a>
                </li>
            <?php endforeach; ?>
        <ul>
    </body>
    </html>
    <?php
    // finally, call exit(); and stop wp from finishing (eg. loading the
    // templates
    exit();
}

All that’s left is to create some place for your users to get the iframe code. You could use a shortcode to do that, or just create a function (like the one below) to stick into your theme some place.

<?php
function wpse32725_iframe_code()
{
    return sprintf(
        '<code>&lt;iframe src="https://wordpress.stackexchange.com/questions/32725/%s"&gt;&lt;/iframe&gt;</code>',
        esc_url( home_url('/iframe/') )
    );
}

Here’s all that as a plugin.

Leave a Comment Cancel reply