WordPress: How to embed a widget on a separate website?

by

Here is my suggested solution, it requires that you use Widget Logic or Dynamic Widgets.

  1. Add the code below to your theme or custom plugin
  2. Insall one of the plugins I mentioned
  3. Create the page(s) or post(s) that we’ll use for the iframe src attribute on the non-WordPress site (give it a descriptive title, developers tend to forget a lot).
  4. Add the widget you want to the sidebar “My Iframe” (if you didn’t change that name)
  5. Limit the widget to the page you created earlier, if you are using Sidebar Logic you’ll then use the condition is_single(N); where N is the page or post ID.
  6. Now you can add the iframe to the non-WordPress website, code below

Here’s the code for 1st step:

/**
  * Verify dependencies 
  * 
  * In this example, we check for plugins in this order:
  * - Widgets Logic
  * - Dynamic Widgets
  */
define(
    'WPSE_168484_ERROR'
    , __( 'Please install and activate <strong>Widgets Logic</strong> or <strong>Dynamic Widgets</strong> and use one of them to show only one widget per page, you can still use many iframes in the non-WordPress website.' )
);

function_exists( 'widget_logic_options_control' )
|| defined( 'DW_VERSION')
|| die( WPSE_168484_ERROR );

// Declare sidebar
register_sidebar( array(
    'name' => __( 'My Iframe', 'my_textdomain' ),
    'id' => 'my_iframe',
) );

// Show sidebar as HTML
add_action( 'init', 'my_iframe_widget' );
function my_iframe_widget() {
    if( is_active_sidebar( 'my_iframe' ) ) {

        // Get widget HTML
        ob_start();
        dynamic_sidebar( 'my_iframe' );
        $widget_html = ob_get_clean();

        // Remove wrapping <li>
        $widget_html = preg_replace( '/^<li.+>/', '', $widget_html );
        $widget_html = preg_replace( '/<\/li>$/m', '', $widget_html );

        // Make Valid HTML5 
        $widget_html = "<!doctype html><meta charset=utf-8>$widget_html";

        // Output and exit
        die( $widget_html );
    }
}

Here’s the code for the 6th step:

<iframe src="http://example.com/index.php?p=N" />

Replace http://example.com/ with your URL and N with the page or post ID.