This is a howto for developers.  If you’re not happy digging around in functions.php or indeed with your sleeves rolled up in any php, then this article might not be for you.

Ubermenu is a great plugin and provides Users and WordPress builders with a huge amount of power to generate sexy menu systems.

But if you’re at all worried about pagespeed and load times then Ubermenu might be more your enemy than your friend.

However, sometimes, you just don’t have a choice.  Your customer wants a nice sexy menu and you’ve been out voted.

Looking at the Ubermenu documentation and through the forums, you won’t find that much help on how to tweak around with Ubermenu.  In fact, they seem to keep pretty tight lipped on how to configure and load Ubermenu in javascript.

So, in this article, I’m going to show you how to include the wordpress menu in the original page markup and then overwrite this with an Ubermenu using Ajax.

<div id=”nav_ajax_container”>

<?php wp_nav_menu([

‘menu’ =>

‘Main Nav’, ‘menu_id’ => ‘test_menu’

]); ?>

</div>

First, my preference is to render a standard wordpress menu when the page is first being rendered.  This way, if javascript fails or the user’s browser won’t run javascript, then at least you have a menu.  This is probably also good for SEO. So, my header.php has the standard wordpress menu

Next we need to get ourselves ready to make an ajax call.

You can get WordPress to call a function defined in your functions.php using the add_actions as follows:

<?php
function my_header_uber() {
    ubermenu( 'main' , array( 'menu' => 436 ) );
    ?>
    // setup some config data: you can get these from your Ubermenu config: Appearance > Ubermenu > Import/Export
    
    <?php 
    wp_die();
}

add_action( 'wp_ajax_my_header_uber', 'my_header_uber' );
add_action( 'wp_ajax_nopriv_my_header_uber', 'my_header_uber' );

Things to note from this code block

1. Get the id of the menu you want to display by editing the menu in wp-admin and check the id parameter in the url

2. If you want to use ubermenu configs you can get these from the ubermenu import/export function