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 " ";
}
echo "</ul></div>";
?>
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;
}
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
