Themeforest

Adding a Wordpress Menu To a Non-Wordpress Page

If you are developing a site that uses Wordpress as a CMS for part of the website and custom php pages for other sections it can be useful to utilise the functions built into Wordpress on non-Wordpress pages.

One useful example is to use the Wordpress menu system to manage the site’s menus. With its ability to add custom links, this offers a powerful solution to handling the complete website’s navigation.

Adding The Wordpress Functions

Setting this up is actually very simple and just requires a few lines of code in the head of the page to add the necessary Wordpress functions:

require('blog/wp-config.php');
$wp->init();
$wp->parse_request();
$wp->query_posts();
$wp->register_globals();

Obviously you need to change the path to the wp-config file to be the same as the directory for your Wordpress installlation.

The Wordpress Menu Function

To add a Wordpress menu to our page we then just use the wp_nav_menu() function as we would do in our Wordpress theme files. The function accepts all of the same parameters, which allows you to customise various aspects.

For our tutorial demo we are going to add the mega menu, which is set up for the Wordpress mega menu plugin demo page. To identify the menu we use the “menu” parameter in the wp_nav_menu function, which accepts the menu slug name – based on the name you gave your menu in the Wordpress admin system – in our case it is “mega-menu”

<?php
    wp_nav_menu( array( 'menu' => 'mega-menu' ) );
?>

And that’s all there is to it – just add the function in the page where you want the menu to appear.

See Wordpress Menu Demo

Demo of Wordpress menu in a non-wordpress page

6 Comments

  • Hi Lee, Thank you. Thank you. it works. i’m so happy. You are the best.

    • No problem

  • Hi Lee, i cant seem to get the menu to act like the wp vertical accordian that is in the wordpress part of the site. The menu comes into the html like you instructed but menu remains static. What am i doing wrong?

    • Hi Lisa – the code wont show the actual menu + formatting/features that is on the Wordpress site, just the raw HTML code.
      You need to add the jQuery library before the plugins – i.e. move the following line to the top of the page:

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
      

      Then to initialise the menu copy the javascript from the page footer (changing the menu ID to menu-vnav) and add this after the plugins:

      <script type="text/javascript">
      				jQuery(document).ready(function($) {
      					jQuery('#menu-vnav').dcAccordion({
      						eventType: 'hover',
      						hoverDelay: 200,
      						menuClose: false,
      						autoClose: true,
      						saveState: true,
      						autoExpand: true,
      						classExpand: 'current-menu-ancestor',
      						showCount: false,
      						disableLink: false,
      						cookie: 'dc_jqaccordion_widget-4',
      						speed: 'slow'
      					});
      				});
      			</script>
      
  • Hi Lee, how do i style menu?…..thank you for sharing your menus

    • Hi – you will need to add CSS rules to style the menu according to your requirements and depending on what format you want to use

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags