[Solved] WordPress wp_nav_menu within iFrame

by


To get a working nav menu WordPress needs to be set up complete. My suggestion is to use add_feed(). Ignore the name, you get text/html as output.

Let’s start with code

<?php # -*- coding: utf-8 -*-
/*
Plugin Name: T5 Iframe Nav Menu
Description: Display a nav menu in an iframe.
Version:     2012.05.18

Refresh the permalinks after activation!
*/
add_action( 'init', 'wpse_52623_register_nav_menu_iframe' );

function wpse_52623_register_nav_menu_iframe()
{
    add_feed( 'navmenuiframe', 'wpse_52623_callback' );
}

function wpse_52623_callback()
{
    // if you don't use a separate stylesheet change this.
    $stylesheet = get_stylesheet_directory_uri() . '/menu.css';
    ?>
<!doctype html>
<base target="_top">
<title>menu</title>
<link rel="stylesheet" href="https://wordpress.stackexchange.com/questions/52623/<?php echo $stylesheet; ?>">
    <?php
    wp_nav_menu(
        array ( // Adjust the location value
            'theme_location' => 'top-menu',
        )
    );
}
  • On 'init' you register the pseudo-feed. The first argument is the URI, the second argument the callback function to print the output.
  • After plugin activation (or after you have added the functions to your theme’s functions.php) visit the permalink settings page to let WordPress refresh the rewrite rules. The menu has a real URL now; visit /navmenuiframe/ to see it.
  • Now you can use an iframe with /navmenuiframe/ as the value of the src attribute.
  • Make sure the 'theme_location' and the stylesheet URI are correct!
  • Repeat the procedure for the footer.

Other notes

  • Be aware that your pages will load slower now. Caching may help, but don’t be surprised if Google takes performance into account. Even if there are real positive effects because of the iframe (I have strong doubts) they might not be visible.
  • The current page will not get special classes now, since WordPress doesn’t know the page that is embedding the special menu page. You could pass a GET parameter to the iframe URL and filter the nav menu output accordingly in your callback function to fix that.
  • If a visitor has iframes disabled (I do that sometimes) she will get no navigation.

1

solved WordPress wp_nav_menu within iFrame