Wordpress Themes - WP Forum at BFA - [SOLVED] Horizontal submenu display

I can't believe I figured this out!! I am so happy!! I want to share this with everyone on the forum searching for a way to have a horizontal submenu. By this I mean, instead of the Category bar, or the Menu2 bar, you can have a list of links (to pages, anchors, whatever) appear in the Category bar area that are specific to the Page that you are on.

Ok, here is my setup:
- I do not have any WP 3.0 Menus defined, although I don't think it matters if you do.
- install plugin "Executable PHP widget"
- create a new Widget area, I called mine "mysubmenu". You do this by going into Theme Options -> Style and Header Area and replacing %cats with <?php bfa_widget_area('name=mysubmenu'); ?> So, overall mine says: %logo %pages <?php bfa_widget_area('name=mysubmenu'); ?>
- Now go to Widgets and drag "PHP Code" into the "mysubmenu" widget
- Edit the code of "PHP Code" to be like mine below. Note that you need to change the Case statement to reference your own Page IDs to match the ones in your Page Bar, plus you will need to edit each link in the <li> to be whatever you want. Also remember to escape your quotes with \ as seen in my sample code.

PHP Code:


		
			
<?php

echo "<div id=\"menu2\">";
echo "<ul class=\"clearfix rMenu-hor rMenu\" id=\"rmenu\">";

$curr_page_id = get_query_var('page_id');

switch ($curr_page_id) {
    case 6:
        echo "
<li class=\"cat-item cat-item-1\"><a href=\"http://yourlink\">Submenu Item1 for Page 6</a></li>
<li class=\"cat-item cat-item-2\"><a href=\"http://yourlink\">Submenu Item2 for Page 6</a></li>
<li class=\"cat-item cat-item-3\"><a href=\"http://yourlink\">Submenu Item3 for Page 6</a></li>
        ";
        break;

    case 10:
        echo "
<li class=\"cat-item cat-item-1\"><a href=\"http://yourlink\">Submenu Item1 for Page 10</a></li>
<li class=\"cat-item cat-item-2\"><a href=\"http://yourlink\">Submenu Item2 for Page 10</a></li>
<li class=\"cat-item cat-item-3\"><a href=\"http://yourlink\">Submenu Item3 for Page 10</a></li>
        ";
        break;

    case 12:
        echo "
<li class=\"cat-item cat-item-1\"><a href=\"http://yourlink\">Submenu Item1 for Page 12</a></li>
<li class=\"cat-item cat-item-2\"><a href=\"http://yourlink\">Submenu Item2 for Page 12</a></li>
<li class=\"cat-item cat-item-3\"><a href=\"http://yourlink\">Submenu Item3 for Page 12</a></li>
        ";
        break;
    default:
       echo "&nbsp; ";
}
echo "</ul></div>";
?>

- finally you need to add the code below into Theme Options -> Add HTML/CSS Inserts:

Code:

div#mysubmenu.widget { 

border: none;

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

width:auto;

}



div#execphp-3.widget { 

border: none;

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

width:auto;

}



div#execphp-3.widget ul li{ 

background: none;

padding: 0px 0px 0px 0px !important;

border-left: 0px;

margin:5px 0px 5px 0px;

display:inline; 

}



div#mysidebar.widget ul li{ 

background: none;

padding: 0px 0px 0px 0px !important;

border-left: 0px;

margin:5px 0px 5px 0px;

display:inline; 

}

Note: if you called your submenu widget area something besides "mysubmenu" then you'll need to edit above.

So how does this work? Well adding the widget area and PHP code should be easy to understand, but what was tricky is the CSS. Wordpress adds class statements that mess everything up, so the CSS insert basically overwrites all the stuff that Wordpress adds. Also if you look at the PHP code of the widget, you'll see that I added a div to mimic "menu2" and also the ul and li are also pretending to be menu2. Because of this, you can use the normal Theme Options to style your menu bar without needing to hardcode it.

Cool, huh??? Wow, I am so proud of myself for hacking this all together!!! Especially since the god of Atahualpa once said in a post that this was impossible. Oh boy, I want to celebrate!!

Edit: wanted to point out, that in my CSS code above, I reference "div#execphp-3.widget" a couple times. that was generated by Wordpress, I don't know if yours will be different. If it is, you can figure it out by looking at your Page Source and seeing the name that Wordpress gave to your PHP Code widget, then adjust the css code. Also wanted to point out in the PHP Code sample if you want more than 3 submenu items, that is fine, but be sure to change the <li> class appropriately so that the items highlight properly, <li class=\"cat-item cat-item-X