Grow your CSS skills. Land your dream job.

CSS Active page on Nav in WordPress

  • # April 6, 2009 at 11:28 pm

    I’ve never needed or wanted to do this which is odd when i think about it, but i need an active/focus state for the nav in WordPress. i hard code the ul into the header.php in wordpress.
    I need the contact nav item to show focus when on the contact page etc.

    I’m not sure how to do this since it’ll need to be dynamic being that theres only one index.php and all that.

    anybody got some help or a link with a tutorial?

    appreciate it!

    # April 6, 2009 at 11:35 pm

    Since you say you have hard-coded the nav, your best bet is to probably ID the body using the URL you are on:

    Code:
    < ?php
    $url = explode('/',$_SERVER['REQUEST_URI']);
    $dir = $url[1] ? $url[1] : 'home';
    ?>

    http://css-tricks.com/video-screencasts … e-body-id/

    # April 7, 2009 at 1:18 am

    thanks man!
    i’ll watch the vid tomorrow.

    is there a way to control which pages are displayed?
    ie if the user creates another page it wont show? that’s why i go hard coded. idk how to arrange them the way i want either

    thanks for the help!

    # April 7, 2009 at 6:11 am

    When you create a page in the WP backend there is an option on the right hand hand side underneath where you chose page parent and page template to give your pages a number to order them, so 1 comes first 2 second etc. Using that you can order your nav menu however you want.
    To have wp_list_pages show only the pages you want, use the include paramater listing only the pages you want by id.
    eg.

    Code:
      < ?php wp_list_pages('include=5,9,23&title_li=' ); ?>

    You might want to check out the codex http://codex.wordpress.org/Template_Tags/wp_list_pages

    # April 22, 2009 at 1:05 pm

    Chris why would you use this method instead of just calling <?php the_title(); ?> as the body id?

    # May 7, 2009 at 9:13 pm

    I used Chris’ method to establish a page id but I just noticed a problem not addressed in the vid.

    What about the home page?

    the php strips the "/" but even if it didnt i dont think i can use a class of ./ in css so how do i get the home page which has a WP href of "/" which gets stripped to still apply a body class to just that page and not the search page, or archive page etc.

    # May 8, 2009 at 2:17 am
    "curtismchale" wrote:
    Chris why would you use this method instead of just calling <?php the_title(); ?> as the body id?

    Because the title can have spaces. You could probably echo the page ID if you wanted something simple

    "Digital Skraps" wrote:
    What about the home page?

    Did you try it? This line of code replaces ” (the home page) with ‘home’

    "chriscoyier" wrote:
    $dir = $url[1] ? $url[1] : ‘home’;
    # May 8, 2009 at 8:19 pm

    i used the code that’s in the screen cast which isnt what was posted in here. At this point the blog is done and in their hands. im hoping they wont notice but i dont have any more time available to work on it, so the easiest fix is what i need. the code being totally different here and in the screen case leads me to believe its quite a bit more work

    # May 9, 2009 at 1:44 am

    I don’t understand why you don’t just use wp_list_pages, then everything is done for you.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".