dynamic menu and category highlighting

  • Resolved Doodlebee

    (@doodlebee)


    19 years, 9 months ago

    I’m full of questions today!

    Okay, I’ve managed to get the dynamic menu highlighting to work with categories – no problem. But now, what I need to do is this:

    When you go to a single post page, the menu item in the navigational bar should be highlighted as to what category the single post is located in. (Did that make sense?)

    In ither words, my menu bar is set up so that the menu items are category names. I’ve got it working so that, when you click on “Page two”, then the menu item for “Page Two” is highlighted. However, if you click on a single post *within* the “Page Two” category, the menu item is *not* highlighted.

    I want it to be highlighted, yet I can’t seem to figure out where to put my code to make it do so.

    Right now, I have this in my “header.php” file, between the <head></head> tags:

    <?php
    if ( is_home() ) { $current='home'; }
    elseif ( is_category('') ) { $current='current-cat'; }
    ?>

    <style type="text/css">
    ul#topnav li.<?php echo $current; ?> a {background-color:#ED4529;}
    ul#topnav li.<?php echo $current; ?> li a {background-color:transparent;}
    </style>

    (yes, that reference to “is_home”is necessary)…

    and in the “footer.php” file, I have this:

    <div id="topmenu">
    <ul id="topnav">
    <?php
    if (is_home() ) { $current='home';
    echo '<li class="home"><a href="index.php">Home</a></li>';
    wp_list_cats('optionall=1&exclude=1&hide_empty=0');}
    else { wp_list_cats('optionall=1&hide_empty=0');}
    ?>
    </ul>
    </div> <!--closing #topmenu-->

    By the way, the header is actually within the footer.php file, because I have my site source-ordered – content first 🙂

    So, what would I need to change there to make the single post pages recognize what category they are in, and then highlighting the correct menu item for the single post page?

    I hope my question makes sense…sometimes I don’t even understand the crap that comes out of my head! 😉

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • tsguitar

    (@tsguitar)

    19 years, 9 months ago

    Keeping all that code you just listed, when you try something like echo $current;, does it show the title of the current category? Let’s make sure that variable is even working. I think you should be using single_cat_title or the_category for that.

    I’m not sure about your header being in the footer. That sounds terribly odd to me and might have an impact on this code. Let’s deal with that later, I guess.

    Would this work?
    http://www.ilfilosofo.com/blog/2005/10/27/highlight-current-category

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    19 years, 9 months ago

    Do something similar to this:

    <?php
    if ( is_home() ) { $current='home'; }
    elseif ( is_category('') ) { $current='current-cat'; }
    elseif ( is_single() ) {
    if (in_category('cat1')) { $current='cat1'; }
    elseif (in_category('cat2')) { $current='cat2'; }
    elseif (in_category('cat3')) { $current='cat3'; }
    ...
    } // end of the is_single() check
    ?>

    This will only highlight the first matching category that the post is in, however. A post can be in multiple categories. If you wanted to highlight them all, you’d have to make a loop that did extra style stuff.

    Thread Starter Doodlebee

    (@doodlebee)

    19 years, 9 months ago

    Otto-

    It would *seem* that your code would work – but the LI tags are not applying the class to them. The style is applying it fine – but it’s not adding it to the LI tag.

    TS –

    with the code I have listed above, everything is functioning and doing what it’s supposed to do. I just can’t get the list on a single-post page to highlight the proper category it comes from – as stated above, the LI tag of the current category isn’t taking on the class that I’m trying to assign to it.

    Any other ideas?

    tsguitar

    (@tsguitar)

    19 years, 9 months ago

    But is your variable working? When you view source, do your LIs have something like class="categoryname"? Because I don’t see that in the code you’ve posted (on a side note, why are those CLASSes and not IDs? There’s only one per page, right?).

    If that’s showing up in the code, then we know it’s a CSS problem. If it’s not, then we know it’s a PHP problem. Can we get a link? Did you look at the plugin I mentioned?

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    19 years, 9 months ago

    doodlebee: I don’t see how your above code could work at all. For one thing, you’re only displaying the list of cats on the home page, not on any category pages, certainly not on any single pages.

    I don’t understand what you mean by it not applying to the LI’s. That’s not how the highlighting code your posted should work. The LI’s for the cats should always have the relevant class (or properly, ID) associated with them.

    Thread Starter Doodlebee

    (@doodlebee)

    19 years, 9 months ago

    Yes, my variable is working just fine. They are classes because – well, I followed the tutorial on the codex for this to the letter, and it wasn’t functioning. That’s when I viewed source on my page, and saw that WordPress was putting in the same class to all of my LI tags, and ignoring the ID’s I had assigned. I assumed this was because the tutorial was for Pages, and I was using cater=gories for my list. So I whittled the code down to what you see above, and now it just assigns the same class to all categories depending on what category page you are on.

    I think this is where the problem lies, because the assigned class name is what WordPress has given the LI tags – I can’t figure out how to customize the LI tag name without writing a ton of PHP code (which is why you see the “Home” one set the way it is). It *is* showing up in the code – partly. It’s showing up as it should in the header, style and everything is working just fine – *except* when you go to the single post page. It’s still working at the top, but the class is not being applied to the LI tag. if it *would* get applied to the LI tag, then it would work just fine.

    I did look at the plugin you mentioned but for this site, I’m trying to stay away form plugins (not my desire – but the client’s). As for a link – I can’t yet as it’s on my localhost computer – locally developing the thing before I can put it online to test.

    So, I’ll just show you my code, since I can’t seem to show you the actual site (you wouldn’t be able to see the PHP anyway!)

    list of files here

    Hopefully someone can give me a boost on this one. I’m fairly new to WordPress (learning quickly, though) and if I can get this fixed properly, I’d appreciate it. I mentioned on another thred that I even thought it was weird that is was actually working the way it is…it doesn’t seem like it should be! 🙂

    Thread Starter Doodlebee

    (@doodlebee)

    19 years, 9 months ago

    PS – the navigational links in question are actually within the footer.php file – not the header. The site is source-ordered (content first) as requested by the client, so I can’t swap things around.

    tsguitar

    (@tsguitar)

    19 years, 9 months ago

    I want to see what’s generated by that code. Can you just post a text file of the final page code along with those text files of the php? I don’t think your code for displaying the category name is in the right place and I don’t see how it would work at all. What’s the variable that displays the current category name? The variable that displays “unorganized” when I’m viewing an entry in the “unorganized” category?

    Once you have that, there’s some serious reworking of the menu code you’ll need to implement. Here’s an idea:
    http://www.alistapart.com/articles/keepingcurrent/

    Tell me what I need to know and I should be able to slap the beginnings of it together for you pretty quickly.

    Thread Starter Doodlebee

    (@doodlebee)

    19 years, 9 months ago

    Okay – I added three more text files to that link up there. The home page (category 1), the articles page (category 7), and the single post page.

    You’ll see in the first two how the LI tag is taking the classes just as they’re supposed to be doing, but the single post page isn’t setting the LI class at all.

    >>What’s the variable that displays the current category name? <<

    This is my question. When I followed the tutorial in the codex – trying to set ID’s for each page – it didn’t work. Worpress automatically set LI classes for me – called “current-cats”. I couldn’t change that no matter what I did – until I added in that extra bit for the home page. I know if I used the code I put in for the home page for *all* of the categories, it’d probably work, but it seems like a lot of extra code for doing something so simple.

    If I can provide any mor einformation, let me know. Meanwhile I’ll look at that article. Thanks 🙂

    tsguitar

    (@tsguitar)

    19 years, 9 months ago

    Here’s where you want to look in the Codex:
    http://codex.wordpress.org/Template_Tags/get_the_category\

    The control you want will all be taken care of in the navigation, which should look something like this:

    <div id="navigation">
    <?php
    foreach((get_the_category()) as $cat)
    ?>
    <ul>
    <li<?php if ($cat->cat_name=="Unorganized")
    echo " id="currentpage""; ?>>
    <a href="#">Page One</a></li>
    <li<?php if ($cat->cat_name=="Media")
    echo " id="currentpage""; ?>>
    <a href="#">Page Two</a></li>
    <li<?php if ($cat->cat_name=="Design")
    echo " id="currentpage""; ?>>
    <a href="#">Page Three</a></li>
    </ul>
    </div>

    You’re telling the navigation to apply the ID of “currentpage” to that menu item depending upon the category name. If it’s not in that category, the nav item is formatted just like normal. Add the CSS declaration for “currentpage” to your main CSS, get rid of the CSS stuff you were putting at the top of the page, and you’re all done.

    Which tutorial in the Codex were you following? That might need to be changed so if you remember where you were looking, that’ll make my job easier.

    Thread Starter Doodlebee

    (@doodlebee)

    19 years, 9 months ago

    This one

    It looks like it’s geared for Pages, not categories, but I used it as a base template to work from. The thing that threw me was how the LI tags always ended up with “current-cats” as the class – I couldn’t get rid of that without hacking that tutorial’s code a little bit – much the same way you did above. But I was hoping for a simpler method, which is why I was trying to use the wp_list_cats (which is apparently the function that adds in that “current-cats” class when you use it in such a way).

    Thanks for the help – I’ll give it a shot and see what happens 🙂

    tsguitar

    (@tsguitar)

    19 years, 9 months ago

    Definately post back to update on how it’s going or any new troubles. The resulting code can be a bit scary and easy to mess up, but also easy to fix. Let me know.

    Thread Starter Doodlebee

    (@doodlebee)

    19 years, 9 months ago

    Well, I’ve been playing with it some more, and I’ve narrowed down part of the issue. There’s no way for me to set a li class for my list items.

    Basically, the wp_list_cats doesn’t have an option for me to set a class for the li tags. I’ve tried editing the core file, and accomplished half of what I needed to do. However, I still can’t get the “single page” to highlight the catgeory link that it’s under, and I can’t get sub catgories to highlight the parent category link that they reside under.

    Now, I’ve been contacted by the client, and things were just made a *whole* lot easier on me, as they don’t want the entire site to reside under WordPress – only th eblog area. BUT, this confounds me that it can’t be made simpler. So far, the only way it seems I can force my navigation to do what I want is to hardcode the whole darn thing – which kind of defeats the purpose.

    So I now have a mission to try and figure out how to get what I want, even though I don’t really need it anymore. (I may, someday, though!)

    But thanks for the suggestions, I appreciate it!

    tsguitar

    (@tsguitar)

    19 years, 9 months ago

    I have to guess it’s just a coding error. I actually tested the code I suggested on my own blog and it works just fine. If you’d like to hammer this out more, visit my site (check out my profile) and hit the contact form there. We can do this.

    Thread Starter Doodlebee

    (@doodlebee)

    19 years, 9 months ago

    Thanks –

    I’m sure it’s a coding error, as well 😉 But I’m definitely interesting in figuring out what I did wrong – I’ll be playing around with this some more. I love trying ot figure out things that stump me 😉

Viewing 15 replies - 1 through 15 (of 18 total)
1 2

The topic ‘dynamic menu and category highlighting’ is closed to new replies.