A nav bar which highlights current category?
-
hi
on a wordpress site i am currently making, i have a horizontal nav bar at the top. [see site here].Each link in the nav bar links to particular post categories.
Does anyone know how i could go about making the currently selected category highlight in the nav bar? So you know which category you’re looking at currently?
Hope this makes sense!
Cheers
Bilateral
-
See if you can get some ideas from this Codex page:
http://codex.wordpress.org/Dynamic_Menu_Highlightingthanks BPartch, and moshu. From the looks of that codex page, the dynamic menu highlighting works only for static Pages. Is that right?
However, what I was after was the idea that the nav bar would select a Category rather than a static Page…Is that possible?Since I don’t see that you’d add 10 more categories every day… I’d do it manually using the is_category(x) conditional.
thanks moshu!
i think i get what you’re suggesting. instead of the
is_page(‘Page One’)
i might put, for instance,
is_category(‘public art’)
right?
if i understand right, this should only work if each Post is filed under ONLY ONE category? Is that true?
Hello
Try this, no guarantees, as it is late and I am sleepy π
This goes in the head section of header.php:
<?php
if ( is_home() ) { $current = 'home'; }
elseif ( is_category('current-projects') ) { $current = 'projects'; }
elseif ( is_category('archive') ) { $current = 'archive'; }
elseif ( is_category('public-art') ) { $current = 'art'; }
elseif ( is_category('writing') ) { $current = 'write'; }
elseif ( is_category('cv') ) { $current = 'cv'; }
elseif ( is_category('links') ) { $current = 'links'; }
elseif ( is_category('contact') ) { $current = 'contact'; }
?>
<style type="text/css">
#navlist li.<?php echo $current; ?> {
color: black;
background-color: gray;
text-decoration: none;
}
</style>This goes where you have the nav code in header.php
<div id="navcontainer">
<ul id="navlist">
<li class="home"><a href="http://jennybrownjenny.com/wordpress">home</a>
<li class="projects"><a href="http://www.jennybrownjenny.com/wordpress/category/current-projects/">current projects</a>
<li class="archive"><a href="http://jennybrownjenny.com/wordpress/category/archive">project archive</a>
<li class="art"><a href="http://jennybrownjenny.com/wordpress/category/public-art">public art</a>
<li class="write"><a href="http://jennybrownjenny.com/wordpress/category/writing">writing</a>
<li class="cv"><a href="http://jennybrownjenny.com/wordpress/category/cv">resume</a>
<li class="links"><a href="http://jennybrownjenny.com/wordpress/category/links">links</a>
<li class="contact"><a href="http://jennybrownjenny.com/wordpress/category/contact">contact</a>
</div>Hope it helps π
Basically, yes, that’s what I was thinking of. Though I’d use (ID#) – less chances to go wrong.
And I don’t see how that relates to posts in one or more categories. When you display a category archive (as it happens when you click on a category name – it is about that category’s listing, not about individual posts.
Read more: http://codex.wordpress.org/Conditional_Tags#A_Category_PageI also recommend using the categories ID# vs the name (as I did above).
is_category('ID#')
I just did that because I do not know what the ID#’s are, hope it works for you. π
I’d make it a bit more generic myself. On the home page, I’d highlight the home one, of course. On the category archives, I’d highlight the category. But I’d also want to highlight all the relevant categories on the single pages, handling multiple categories if needed. I’d also want the category list to be dynamic, because manually editing stuff is such a pain.
So here’s my solution (untested, probably has a bug or two):
function display_category_list ()
{
global $wpdb;
$query = "SELECT cat_ID, cat_name
FROM $wpdb->categories
ORDER BY cat_name asc";
$categories = $wpdb->get_results($query);
if (is_category()) {
?>
<style type="text/css">
#navlist li#<?php echo 'cat_'.single_cat_title(); ?> {
color: black;
background-color: gray;
text-decoration: none;
}
</style>
<?php
}
if (is_home()) {
?>
<style type="text/css">
#navlist li#cat_home {
color: black;
background-color: gray;
text-decoration: none;
}
</style>
<?php
}
if (is_single()) {
foreach($categories as $category) {
if (in_category()) {
?>
<style type="text/css">
#navlist li#cat_<?php echo $category->cat_name; ?> {
color: black;
background-color: gray;
text-decoration: none;
}
</style>
<?php
}
}
}
?>
<div id="navcontainer">
<ul id="navlist">
<li id="cat_home">
<a href="<?php echo get_settings('home'); ?>">
Home
</a>
</li>
<?php
foreach ($categories as $category) {
echo '<li id="cat_'.$category->cat_name.'">';
echo '<a href="'.get_category_link($category->cat_ID).'">';
echo $category->cat_name;
echo '</a></li>';
}
?>
</ul>
</div>
<?php
}
?>
Then just call display_category_list() wherever you want to put the list at.
thanks all
not being as savvy as you all in this stuff, it’ll take me a little while to try these solutions out. i’ll let you know how it goes!
cheersHi there,
OK I don’t know what’s wrong with me but I did exactly what you guys said ad it did absolutely nothing. Nada. No difference. Nothing is highlighted when you’re one particular category page or another.
Any suggestions?
Alex
Hahahahaha never mind!! Small typo.
Thanks you guys are my heroes!
- The topic ‘A nav bar which highlights current category?’ is closed to new replies.