Creating Two-Tiered Conditional Navigation in Graphene

  • GWMO

    #7911

    First, thank you for constantly updating Graphene – it just gets better and better!

    My current site menu at http://www.gwmo.com is a custom Two-Tiered menu that I wish to replicate in Graphene. I found the following code for a similar menu [ http://www.darrenhoyt.com/2008/02/12/creating-two-tiered-conditional-navigation-in-wordpress ] and it looks real simple – simply copy the PHP into child > functions.php and the CSS into child > style.css, right? Problem is that when I paste the PHP into my child functions.php file everything disappears.

    Now, I’ve tried to do my homework by inspecting the code and tracking it down as far as theme-menu.php but, beyond that, I’m lost. I would really appreciate any help you could offer and, if interested, am looking for a Graphene expert to offer services to all of my clients as well :o)

    Mod

    Kenneth John Odle

    #39799
    Quote:
    it looks real simple – simply copy the PHP into child > functions.php and the CSS into child > style.css, right?

    Nope. The “PHP” you see there is actually a combination of HTML and PHP, so it can’t go in your functions.php file.

    That page is actually aimed at theme designers, but there’s no reason you couldn’t pull this off pretty easily with Graphene.

    First, you’ll want to hide the built-in menu with this CSS:

    #nav {display:none;}

    Second, install a PHP widget. (There are a few to choose from; just check the plugin repository.)

    Third, create an action widget area in header.php in graphene_before_content

    Fourth, add a PHP widget to that widget area, and copy the mix of HTML/PHP into it.

    Fifth, add the CSS to your child theme stylesheet.

    The problem is that you’ve already hidden anything with id="nav", so you’ll want to change nav in your code to something else like mynav

    I haven’t tested this, but it should work.

    GWMO

    #39800

    Dear Kenneth,

    Thank you for your helpful advice. As you can see on my Web site [ http://www.corybuford.com ] the new menu is up and running. The only problem is that, when I inspect the code, it still appears to be pulling <div id="nav">. However, while the menu appears to be using the new “custom_menu” format I added, the first item on the list is “A digital frontier to reshape the human condition!”, which is the title of one of my pages, rather than simply the page title of “Home”?

    Mod

    Kenneth John Odle

    #39801
    Quote:
    when I inspect the code, it still appears to be pulling <div id=”nav”>

    Yes, it is, but it’s hidden with the CSS. This is expected behaviour.

    Quote:
    A digital frontier to reshape the human condition!”, which is the title of one of my pages, rather than simply the page title of “Home”?

    Use a custom menu. This will allow you to decide what you want on the menu and where you want it.

    Also, it’s distracting that there is no menu on your other pages. Users expect a certain degree of uniformity from page to page.

    GWMO

    #39802

    Dear Kenneth,

    Again I thank you, and it’s getting better, but I somehow now have 3 menus at the top of my page. The top is correct but the bottom 2 I need to remove. I’m using a custom menu with ID of header_menu and NAME of Header Menu and changed #nav to #customnav in my code. Could there be a conflict somewhere?

    Sorry to be a bother. Doing what I am able on my own and happy to repay the favor if I may.

    GWMO

    #39803

    Dear Kenneth,

    I double checked everything according to your advice and think I’m still overlooking something. I tried it again on one of my other sites but ran into even more problems. Any help would be greatly appreciated so I may finish converting my sites to WP.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.