WordPress.org

Ready to get started?Download WordPress

Forums

Navigation on-state (8 posts)

  1. gerrycircus
    Member
    Posted 5 years ago #

    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?

  2. t31os
    Member
    Posted 5 years ago #

    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...

    Example...

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

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

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

    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.

  3. gerrycircus
    Member
    Posted 5 years ago #

    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
    http://74.86.66.197/~threedes/

  4. gerrycircus
    Member
    Posted 5 years ago #

    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

    </div>

    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 li.contact a{ background: #d10101; color: #ffffff; }

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

  5. t31os
    Member
    Posted 5 years ago #

    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..

    http://codex.wordpress.org/Template_Tags/wp_list_pages
    http://codex.wordpress.org/Template_Tags/wp_list_categories

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

  6. elanio
    Member
    Posted 4 years ago #

    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="http://www.facebook.com/atari" target="_blank"><img src="<?php bloginfo('template_url');?>/img/PR_nav_facebook.gif"/></a></li>
      </ul>
    </div>

    My code for the nav css is as follows:

    /* Begin Nav */
    .menu{
    	margin:0;
    	padding:0;
    	list-style-type:none;
    }
    .page_item{
    	font-size:12px;
    	float:left;
    	padding:9px 15px;
    	background:url('../../img/PR_nav_div.gif') no-repeat top right;
    }
    .page_item> a:link, .page_item> a:visited{
    	color:#fff;
    }
    
    .page_item> a:hover{
    	color:#f45ee4;
    }
    .current_page_item{
    	color:#00FF00
    }
    
    /* 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{
    	color:#f45ee4;
    }

    Any thoughts or ideas??

  7. elanio
    Member
    Posted 4 years ago #

    Fixed my issue.

    #nav .current_page_item a:link, #nav .current_page_item a:visited{
    	color:#00FF00
    }

    Did the trick.

  8. Yukon Cornelius
    Member
    Posted 4 years ago #

    Hi,

    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...

    Jimmy

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.