Two-Tiered Horizontal Navbar WordPress
- REFUNDED
Hi,
I'm working on developing a two-tiered horizontal navbar for my site. I want it to function like the one found on boston.com.
I've pasted the code and css I'm working with so far below. Right now, however, I would like to find out how to alter this code to do the following:
- When you're on a post page, I want the parent category highlighted, and all of the children categories within the specified parent category should to be displayed.
- Allow for a subnav bar to appear automatically when you're on the home page. But, I want to be able to link to whatever I want in this subnav (i.e. not necessarily categories, but maybe pages or even links outside my web site). And, I want to insert static text on the left of this subnav like how boston.com has "Hot Topics." This text should only appear on the home page subnav.
- In addition to category parents I want to be able to include links to pages in the main navbar or even links to outside sites. (I figured out how to do this since originally posting by adding <li <?php if(is_page()) {echo 'class="current_page_item"';}?>><a href="url">page</a></li> in the <ul id="nav"> section.) I'd also like the option to include a subnav below such links. I still wonder, however, if any has any ideas on how to include a subnav below such links (though this is a lower priority).
As an aside, if there's any way to just hard-code all this through nested lists (while also maintaining the highlighting), that would almost be preferable so as to allow for more control over ordering, etc.
Thanks!
Here's the code I have so far:
<div id="mainmenu">
<ul id="nav">
<li <?php if(is_home()) {echo 'class="current_page_item"';}?>><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_categories('exclude=1,26,17,27,28,29,30,31,32,33,13,14,15,16&orderby=name&depth=1&title_li='); ?>
</ul>
<?php
$cat = get_query_var('cat');
$category = get_category ($cat);
$categories = get_the_category();
$subcat = get_the_category();
$parentCatName = get_cat_name($subcat[0]->parent);
$category_id = get_cat_ID( "$parentCatName" );
function post_is_in_descendant_category( $cats, $_post = null )
{
foreach ( (array) $cats as $cat ) {
// get_term_children() accepts integer ID only
$descendants = get_term_children( (int) $cat, 'category');
if ( $descendants && in_category( $descendants, $_post ) )
return true;
}
return false;
}
if ($category->cat_ID) {
if($category->category_parent) {
//Displays subcategories on subcategory index
$children = wp_list_categories("orderby=id&hide_empty=0&title_li=&child_of=".$category->category_parent."&echo=0");
}
else {
//Display subcategories on parent category index
$children = wp_list_categories("orderby=id&hide_empty=0&title_li=&child_of=".$category->cat_ID."&echo=0");
}
if ($children) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php }
}
elseif (is_single() && (post_is_in_descendant_category($category_id)) && $categories[0]->category_parent == $category_id ) { ?>
<ul id="subnav">
<?php
$category = get_the_category();
$cat_term_id = $category[0]->term_id;
$cat_category_parent = $category[0]->category_parent;
$listcat = wp_list_categories('echo=0&child_of='.$cat_category_parent.'&title_li=');
$listcat = str_replace("cat-item-".$cat_term_id, "cat-item-".$cat_term_id." current-cat", $listcat);
if ( in_category( $cat_term_id ) || post_is_in_descendant_category( $cat_category_parent )) {
echo $listcat;
}
?>
</ul>
<?php } ?>
</div>
And here's the CSS:
#mainmenu {
margin-bottom:15px;
}
#nav
{
background:#577da2;
height:32px;
margin: 0px;
padding: 0px;
width:970px;
margin-left:5px;
}
#nav li
{
margin-right:5px;
height: 100%;
}
#nav li, #subnav li
{
float:left;
list-style:none;
}
#nav a, #nav a:visited
{
color:#FFF;
text-decoration:none;
font-weight:bold;
float: left;
height: 21px;
padding: 10px 10px 0px 10px;
}
#nav a:hover, #nav a:active, li.current_page_parent a, li.current_page_parent a:visited, #nav li.current_page_item a, #nav li.current_page_item a:visited, #nav li.current-cat, #nav li.current-cat-parent, #nav li a.active_category { background:#295887; }
#subnav
{
background:#e6eef7;
height:25px;
margin: 0px;
padding: 0px 0px 0px 0px;
width:970px;
margin-left:5px;
}
#subnav li
{
border-right:1px solid #295887;
padding: 6px 7px;
height: 13px;
}
#subnav li.current-cat { background: #BFDEFF; }
#subnav a, #subnav a:visited
{
color:#295887;
text-decoration:none;
font-weight:bold;
}
#subnav a:hover, #subnav a:active, #subnav li.current_page_item a, #subnav li.current_page_item a:visited { text-decoration:underline; }
Answers (4)
Lew Ayotte answers:
You might want to wait until WordPress 3.0 comes out... Custom Menu's will be available. That might reduce a lot of the work you're trying to accomplish here.
[[LINK href="http://wpengineer.com/wordpress-3-0-nav-menu-ui-update/"]]http://wpengineer.com/wordpress-3-0-nav-menu-ui-update/[[/LINK]]
Lew
sheas comments:
Thanks, Lew. This looks interesting, but I need to wrap this up within the next week, so I don't think this will suffice. Any ideas about how to code this?
Lew Ayotte comments:
1) You’re currently using:
#subnav li.current-cat { background: #BFDEFF; } to highlight the current category…
use #nav li.current-cat-parent { background: #BFDEFF; } to highlight the current category parent.
2) Since I don't know what you want to link to... this is kind of complicated. If you are just wanting to code a static subnav for the front page use this:
if (is_front_page()) { // might need to use is_home() depending on your setup
//put your custom subnav for the front page
} else {
//use your default subnav
}
3) I would create pages w/ subpage... so a page might be "Social Networks" and a subpage might be "facebook", "twitter", "linked in"...
Then installed the [[LINK href="http://wordpress.org/extend/plugins/redirect/"]]Redirect[[/LINK]] plugin and add a post meta named "redirect" with the link to your social network site.
4) This is pretty complicated, there are some plugins out there that let you order your categories. You might try this [[LINK href="http://wordpress.org/extend/plugins/my-category-order/"]]My Category Order[[/LINK]]
I think that answers all the questions... let me know if I didn't hit on anything.
Lew
sheas comments:
Hi Lew,
1) I tried altering the css as you recommended and the parent and child do highlight on the child page, but as soon as you click on a story the highlighting on the parent goes away. Also, on the post page, the other child categories within the parent do not appear.
2) I'm not sure where you suggest putting this code. I tried putting this under " <ul id="subnav">" and nothing happened. The code I used was "<li <?php if(is_home()) {echo 'class="current_page_item"';}?>>testing</li>" and some variations.
3) Since the navbar is working off of categories, how would I integrate pages, as you suggest.
4) I will look into these plugins.
If it helps I'm working off of code that I found in response to another question on wpquestions (http://wpquestions.com/question/show/id/233). This code got me 99% there, but there are these few bugs that I want to work out so that it works like the boston.com navbar.
Thanks.
WPMan answers:
Hi,
Try this -
CSS:
#nav {
background:#333;
width:100%;
height:30px;
}
#nav li, #subnav li {
float:left;
list-style:none;
padding: 10px 0px 10px 0px;
}
#nav a, #nav a:visited {
color:#FFF;
text-decoration:none;
font-weight:bold;
padding: 0 10px 0 10px;
display:block;
}
#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited
{
background: #999999;
padding: 0 10px 0 10px;
display:block;
}
#subnav {
background: #CCCCCC;
border-bottom:2px solid #000;
height:25px;
}
#subnav li {
border-right:1px solid #000;
padding:0 7px;
}
#subnav a, #subnav a:visited {
color: #000;
text-decoration:none;
font-weight:bold
}
#subnav a:hover, #subnav a:active,
#subnav li.current_page_item a,
#subnav li.current_page_item a:visited {
text-decoration:underline
}
PHP code:
<ul id="nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children && is_page()) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>
sheas comments:
Hi WPMan --
Thanks for taking a stab at this, but I really do need the navbar to remain category based rather than page based, so this won't work. Looking back at my original post, I mentioned several things, but if I would be happy if I could alter the code I posted to accomplish these things:
- When you're on a post page, I want the parent category highlighted, and all of the children categories within the specified parent category should to be displayed.
- Allow for a subnav bar to appear automatically when you're on the home page. But, I want to be able to link to whatever I want in this subnav (i.e. not necessarily categories, but maybe pages or even links outside my web site). And, I want to insert static text on the left of this subnav like how boston.com has "Hot Topics." This text should only appear on the home page subnav.
- If there are no children for a given category, the subnav doesn't appear when that category is selected (currently there's a subnav with the words "no categories") or if a post within the category is selected.
Any ideas would be great. Thanks.
Oleg Butuzov answers:
sample
http://wood-stone.dk/arkitekter/erfarne-konsulenter/
this is wp based website with give two hoorizontal menus. same as you reqeust, but i think 12$is to low price for custom menu like this. there need to make filter for menu + css for this.