This theme is the one I am currently using, so you can see the final result on this page and every other page of this website.

Ultimate IDX Menu Maker

The Ultimate IDX Menu Maker plugin for WordPress is: here. The installation instructions for this plugin on the WordPress site seem to be incomplete, and part of the last line of the instructions was cut off. See the javascript head include below, which accomplishes what the instruction should say to do with it for this theme. For other WP themes, you may need to put that js include in the header.php file.

Setup for Left Sidebar Menus as Widget

The Atahualpa theme is widgetized. The css I have developed for Menu Creator currently works with left sidebar as a widgetized menu, but not yet on the right sidebar because sub-menus and items only slide out to the right. To incorporate a Menu Creator menu in the left sidebar, I used a PHP Code Widget plugin, with the php code as follows. This technique should work with pretty much any widgitized theme, not just Atahualpa.

<div id="mc_menu_1" class="mc_vertical">
<?php displayMenu(1, 4); ?>
</div>

The div id=”mc_menu_1″ would need to be changed to reflect the specific Menu Creator menu number for your left sidebar menu, if it is not menu #1. The class=”mc_vertical” tells the css to present the menu in its vertical form, which slides sub-menus and sub-items out to the right, into the main content column.

Atahualpa Theme Specific Setup for a Horizontal Top Menu

For this theme, the inclusion of the UIDX multi-level menu plugin for a top navbar menu is not so easy. In order to minimize hacking the theme, the following instructions should help:

1) A php code snippet needs to be inserted into the bfa_header_config.php file in the wp-content/themes/atahualpa/functions folder. The commented line before the “if” statement is replaced by the 4 new lines just below it. After making this change, be sure to save the code snippet on your local disk somewhere handy, as you will need to redo this one step if you ever upgrade the theme from the developer’s site.

I could have turned that template area into a widgetized one, but the code to do that seemed to me to be more effort than it was worth, and the issue of having a custom hack installed would be the same. If BFA ever upgrades the standard template to widgitize the two horizontal bar areas, that would be a great enhancement, IMO. In the meantime:

In bfa_header_config.php:

// Horizontal bar 2
if ( strpos($header_items,'%bar2') !== FALSE ) {
//	$horizontal_bar2 = '<div class="horbar2">&amp;nbsp;</div>';
ob_start();
displayMenu(1, 4);
$menu_bar_menu2 = ob_get_contents();
        ob_end_clean();
        $horizontal_bar2 = '<div class="horbar2"><div id="mc_menu_1" class="mc_topnavigation">' . $menu_bar_menu2 . '</div><div class"mc_clear"></div></div>';}

Notice the div id and class class for the menu on the last code line. The class “topnavigation” specifies a horizontal menu layout, and id “mc_menu_1″ identifies the menu maker menu to which it is linked. The menu maker uses different css references for each menu you may create. So if your topnav menu is menu maker menu #1 on your system, change the second class name accordingly. You will also need to do the same in your css file for each menu, copying all mc_menu_1 references and replicating them as mc_menu_2 references.

2) In the theme’s configuration setups, located at Appearance/Atuahalpa Theme Options, several things need to be specified. Doing it this way avoids hacking the theme files, so other than the Horizontal Bar 2 hack above, you will never have to touch the theme’s default code or files.

a) In Header Area/Style and edit Header Area, at the very bottom of the screen is a section for “Horizontal Bar 2: Styling”. In that box, put the following css code, altering the color to your preference if necessary:

height:30px;
font-size: .9em;
background: #660000;

This allocates a 30 px high full page width menu bar with fonts at .9 of normal, and dark brown background, just below the main header graphic. Warning: Do NOT try to put the drop-down menu above the header graphic, in the Horizontal Bar 1 area! It won’t work, and the drop downs will not be visible because the z-index setting in the menu’s css apparently does not work for this template.

b) In: Various Content Items/HTML Inserts: Header, add the following two lines:

<link rel="stylesheet" href="http://yourdomanname.com/wp-content/themes/css/topnavbar.css" type="text/css" />
<script type="text/javascript"; src="http://yourdomainname.com/wp-content/plugins/wp-menu-creator/external.js"></script>

This is the place to also include any other site specific css or js script inclusions for your site, like css for UIDX real estate listing summary or details pages, Don’t try to shorten the path specifications! It is important to include the full url path, not just a relative folder path.Don’t try to patches these into the actual header file for the theme. If you do, they will be lost if/when the theme is updated.

3) Finally, you will need to place the css for the drop down menu at the same location and file name as specified in the link rel statement above. I chose to name it mc_menu.css and put it into the wp-content/themes/css  folder, but you may want to put it in a more generic location, or in the theme’s css folder if you modify it specifically for a particular theme.  For css that spans multiple themes, like this one does on my site, I generally make a new wp-content/themes/css folder, and put all of my common css files there.

Notes on css for this plugin:

My mc_menu.css file is a variation of the one posted on the UIDX vendor website. I found that it had references to an images folder and files that I preferred not to use, but could be downloaded from the same page on the vendor site if you do, and it also had absolute positioning references that are a no-no when it comes to “playing nice” with a variety of themes. I also added a top-level wrapper for the navbar width and my preferred background color. I also think there are too many site specific css specifications in the vendor’s example css file, some of which probably could and should be allowed to default to theme’e default menu link styles in most cases. In other cases, at least for the Atahualpa theme, some of the specifications appear to be ineffective, and may be suppressed somehow by the theme, the z-index that would normally allow the drop-downs to overlay the header graphic being one example, and the menu maker’s font-size specifications being another. However, I have not yet tried to isolate all of those and clean it up any further. I am not posting the css code here for now. Use the Contact Us form to send me an email if you would like to have a copy of mine to start your project with.