The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Active page on Nav in WordPress

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #24517

    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!

    Chris Coyier

    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: … e-body-id/


    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!


    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.


    You might want to check out the codex


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


    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.

    "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’;

    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


    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)
  • The forum ‘CSS’ is closed to new topics and replies.