Support » Themes and Templates » Navigation on-state

  • Hey folks.

    As wordpress is built upon regenerated parts – and I can’t place and id on the body to allow the navigation to show and on-state when on that page through CSS – I’m stuck and not sure how to work around this.

    How do people do this?

    Any tips?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Why can’t you place an ID on the body? Not that you need to, but you certainly can attach an ID if you want.

    WP generated lists already generate the current class for the active page usage…


    <?php wp_list_pages('title_li='); ?>

    Would output for example.. (*example, your pages/posts will be different of course)

    <li class="page-item"><a href="?page=page1">Page1</a></li>
    <li class="page-item"><a href="?page=page2">Page2</a></li>

    If page 1 was the current page then the class changes to…

    <li class="current-page-item"><a href="?page=page1">Page1</a></li>

    The class names may not be 100% correct, but wordpress handles ‘active’ pages classes as standard providing you use WP to generate the list.

    hey – my php knowledge is minimal – sorry.

    but if i place an id on the body – that id will be generated and used on every page (ie pointless). I want to be able to have a different id for every page so i can effect a “current” or “on-state” for usability.

    this is the URL

    hey! I think I have it………….. nearly!

    Here’s the mark-up code i have in the header.php:

    <div class=”menu-bar”>
    <ul class=”nav”>
    <li class=”default”>HOME
    <li class=”design”>DESIGN
    <li class=”music”>MUSIC
    <li class=”profile”>PROFILE
    <li class=”portfolio”>PORTFOLIO
    <li class=”links”>LINKS
    <li class=”contact”>CONTACT


    The CSS for it:
    body#portfolio ul.nav li.portfolio a,
    body#design ul.nav li.portfolio a,
    body#music ul.nav li.portfolio a,
    body#default ul.nav li.home a,
    body#links ul.nav li.portfolio a,
    body#about ul.nav li.about a,
    body#contact ul.nav a{ background: #d10101; color: #ffffff; }

    This is the PHP I have that I’m trying to get to work:
    $page = $_SERVER[‘REQUEST_URI’];
    $page = str_replace(“/”,””,$page);
    $page = str_replace(“.php”,””,$page);
    $page = $page ? $page : ‘default’
    <body id=”<?php echo $page ?>”>

    WP generates the necessary classes, there’s no need to use unique body IDs…

    If you use pages then you can generate LI elements like this…

    <?php wp_list_pages('title_li='); ?>

    Or categories..

    <?php wp_list_categories('show_count=1&depth=1&title_li='); ?>

    In the pages example each LI element class is page_item and when the page is current it is set to current_page_item.

    The functions are already there to use..

    There’s plenty more functions available to, just read through the Codex for further examples, and post if you get stuck..

    I’m having some issues with the current state as well.

    My code for the nav in the header is as follows:

    <div id="nav">
    	  <ul class="menu">
        <li class="page_item"><a style="color:#f45ee4" href="<?php bloginfo('url'); ?>">HOME</a></li>
        <?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
        <li style="float:left; margin-left:5px;"><a href="" target="_blank"><img src="<?php bloginfo('template_url');?>/img/PR_nav_facebook.gif"/></a></li>

    My code for the nav css is as follows:

    /* Begin Nav */
    	padding:9px 15px;
    	background:url('../../img/PR_nav_div.gif') no-repeat top right;
    .page_item> a:link, .page_item> a:visited{
    .page_item> a:hover{
    /* End Nav */

    I am unable to target .current_page_item.

    I’ve also tried targetig it as such:

    .page_item> a:hover, .current_page_item >a{

    Any thoughts or ideas??

    Fixed my issue.

    #nav .current_page_item a:link, #nav .current_page_item a:visited{

    Did the trick.


    I would like to assign an image to each individual current page item (eg one image for when the current page is page-item-2, another for when it’s page-item-3, and so on). I understand how to style ALL the pages with the same current page image, but how would I specify different current page images for different pages?

    Is there a way to specify a class for individual pages using list_pages?

    I am going crazy trying to figure this out…


Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Navigation on-state’ is closed to new replies.