Displaying WordPress Menus on External Pages

We get asked this time and time again about how to we are able to take our Menu Creator and display the menus externally outside of the WordPress template.  There are instances where a person would like to add his or her WordPress menu in their other non-WordPress pages on their site as we do quite frequently with the UltimateIDX among other applications.

Earlier today, I received another such emails from Yanik Prefontaine,  a contributor whom of which has been assisting us with a multi-lingual update to the Menu Creator and he had asked us what the best method is for performing such a task, by displaying menus externally.  Here is a more detailed description of what I sent Yanik a few moments ago.

First, the process for displaying Menu Creator Menus externally is actually quite simple and seems to work in all instances we use it in.  But first, why exactly would a person want to do something like this? Well, consider for a moment this example situation that we encounter when building Real Estate Websites.

Displaying WordPress menus in the OpenRealty Listings Manager

After building an UltimateIDX project with a custom WordPress template and then integrating it with our IDX/Web API/RETS solution, a client will ask if there is a way to add in functionality for adding a special class of listings to their site.  Since most MLS’s require that their data occupy a database not shared with other NON MLS data, we usually opt for a custom solution where deemed necessary.  An alternative solution we may employ would be to use a modified version of a popular open source listings manager called OpenRealty.  After porting the clients custom WordPress design to OpenRealty, we set about integrating features to work and function in concert with the overall sites functionality while making it as transparent as we possibly can.

Client case in point is an UltimateIDX client needing a way to display rental properties they manage where the listings are not actually part of the local MLS data. This client had also requested a way for him to be able to display properties that are either in the process of being built or are nearing completion in a special listings feature for builders. That being said, here is the process for making the menus work in the external listings manager, controlled from a single location, WordPress.

What we usually do is create a WordPress template file with only the php tag required for displaying the Menu Creator menu and we usually name it like tpl.sidemenu.php or tpl.topmenu.php for instance. But what are WordPress template files? WordPress has a truly unique feature in that you can assign custom templates to pages and posts to meet the specific needs of the designs requirements.  We often call this the Micro CMS feature of WordPress because it allows for a pretty bold list of possibilities for building feature rich sites with WordPress. If you consider for just a moment, that 90% of all of our designs have these special TPL (tpl.templatefilename.php) files in them, most often used to accommodate a modest, yet noticeable difference in the templates appearance for such things as categories or maybe specific subjects such as subdivisions or cities as is the case in Real Estate Websites using WordPress.

What a WordPress tpl file looks like will certainly vary depending on its function but the bare minimum requirement in our case looks like this;

<?php
/*
Template Name: TopMenu Template
*/
// Used to display my top menu in OpenRealty or Joomla for example so I can control the menus site wide from one location.
?>
<?php displayMenu(1, 3); ?>

Creating the page in order for this external feature to work begins first with the upload of the new tpl.top-menu-external.php file to your theme directory.  Naturally you can name your php file anything you wish to so long as its not in conflict with the name of other files in the WordPress hierarchy. Once you upload your new template file, you simply create a new page and assign the template to that page.  I usually name my pages for these types of things like “external-top-menu” or “sidebar-menu-include”.  There isn’t any real need to have the WordPress loop in your template file so there isn’t any real need to put anything in the editor other than a description of what that page is for.

Now, to use the Menu Creator menu externally we use either cURL or PHP to include the page path into our external location.  Depending on how you have your permalinks configured, a page could for instance look like or which you should verify before trying the include.

Some servers will not allow for URL Includes in part due to security reasons.If your server is configured to allow for a php url include you could use <?php include(‘http://yourdomain.com/top-menu-external.html’); ?>

If that is not a possibility, then cURL comes to the rescue with the following code;
<?php
$curl_handle=curl_init();
curl_setopt($curl_handle,CURLOPT_URL,’http://yourdomain.com/top-menu-external.html’);
curl_exec($curl_handle);
curl_close($curl_handle);
?>

Place either of the above code snippets where you want the menu to render and it should show the menu from WordPress.  Its important to note that CSS and other menu related code must be linked to in order to match styling features and its a good idea to test it on a non essential external page before committing the changes to a live location.

FYI, did you know that the remote include method described above can also be applied and used for things like the sidebar or footer for example.  We have many dozens of Real Estate Websites that are built on WordPress that have WordPress site elements displayed in their non WordPress content and applications.