Title: css navigation (current page indication/active window)
Last modified: August 18, 2016

---

# css navigation (current page indication/active window)

 *  Resolved [sfboarders](https://wordpress.org/support/users/sfboarders/)
 * (@sfboarders)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/)
 * Hello,
 * I created a custom horizontal navigation from some info from Listamatic.
 * I’m trying to make my buttons highlight showing the page that I am in by following
   the directions below:
 * [http://css.maxdesign.com.au/listutorial/roll11.htm](http://css.maxdesign.com.au/listutorial/roll11.htm)
 * But the thing is I created the pages through WP and I cannot make the page an“
   active” id if you know what I mean. Your help is greatly appreciated

Viewing 13 replies - 1 through 13 (of 13 total)

 *  [21stproject](https://wordpress.org/support/users/21stproject/)
 * (@21stproject)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420033)
 * [Edited the entire post -sorry if you’re posting right now]
 * You can have the tab active in wp, what’s stopping it for you right now? To make
   a tab, or menu item active you only need the style that displays differently,
   lets say the id for that is #current.
 * I’ve had this implemented before and use it often.
 * You’ll need to add this bit of php code to the page you’d like active;
 * <? $pageid=”contact”; ?>
 * This basically asigns ‘contact’ to be the value of pageid. This must be declared
   BEFORE your menu code. You can call this whatever you like, doesn’t have to be
   contact.
 * In your list, you have an if statment that checks the value of pageid, when pageid
   =”contact” then id=”current” is inserted in the code to style the list item as
   current.
 * In your page;
    ` <ul> <li <? if("about"==$pageid){echo 'id="current"';}?> ><a
   href="#">ABOUT</a> <li <? if("contact"==$pageid){echo 'id="current"';}?> ><a 
   href="#">CONTACT</a> <li <? if("page"==$pageid){echo 'id="current"';}?> ><a href
   ="#">PAGE/a> </a></ul> Browser displays for the contact page;  <ul> <li><a href
   ="#">ABOUT</a></li> <li id="current"><a href="#">CONTACT</a> <li><a href="#">
   PAGE/a></a></li> </ul> If you don’t need a smart menu and your page is static
   or whatever, then you dont need the php and simply manually insert the id=”current”
   for the current tab.
 *  Thread Starter [sfboarders](https://wordpress.org/support/users/sfboarders/)
 * (@sfboarders)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420037)
 * Here’s my code below:
 * I have not made “active” yet. I would like it to be the same as:
 * #navcontainer li a:hover
 * `
    #navcontainer ul { padding: 10px; margin: 0; list-style-type: none; background:
   url(nav/nav-blgr.gif) repeat-x 25px; width: 100%; font-family: Tahoma, Verdana,
   Arial, Helvetica, sans-serif; text-align: center; }
 * #navcontainer li { display: inline; }
 * #navcontainer li a
    { text-decoration: none; background:url(nav/nav-blgr.gif)
   repeat-x 25px; color: #E87830; font-weight: bold; font-size: 14px; padding: 15px;
   border-right: 1px dashed #000; }
 * #navcontainer li a:hover
    { background:url(nav/navont-bg.gif) repeat-x 25px; 
   color: #B4C24B; font-weight: bold; font-size: 14px; padding: 15px; }
 *  [21stproject](https://wordpress.org/support/users/21stproject/)
 * (@21stproject)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420039)
 * Sorry if I weren’t clear, I meant the html code, you do know how to style the
   css right?
 *  Thread Starter [sfboarders](https://wordpress.org/support/users/sfboarders/)
 * (@sfboarders)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420040)
 * Yea, for “current” I can do this right?
 * #navcontainer #current a
    { background:url(nav/navont-bg.gif) repeat-x 25px; 
   color: #B4C24B; font-weight: bold; font-size: 14px; padding: 15px; }
 *  [21stproject](https://wordpress.org/support/users/21stproject/)
 * (@21stproject)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420041)
 * Yes, it should work. Tell me how that goes.
 *  Thread Starter [sfboarders](https://wordpress.org/support/users/sfboarders/)
 * (@sfboarders)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420056)
 * I’m a lil lost on this part:
    You’ll need to add this bit of php code to the 
   page you’d like active;
 * <? $pageid=”contact”; ?>
 * This basically asigns ‘contact’ to be the value of pageid. This must be declared
   BEFORE your menu code. You can call this whatever you like, doesn’t have to be
   contact.
    `
 * Where do I add this if the pages where created in WP?
 *  [21stproject](https://wordpress.org/support/users/21stproject/)
 * (@21stproject)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420065)
 * Say that you’re highlighting home, and home is your blog’s main page. Your declaration
   should look something like this;
 * `<? $pageid="home"; ?>`
 * your navigation would look like this then;
 * `<ul>
    <li <? if("home"==$pageid){echo 'id="current"';}?> ><a href="#">Home</
   a> <li <? if("photos"==$pageid){echo 'id="current"';}?> ><a href="#">Photos</
   a> <li <? if("shaka"==$pageid){echo 'id="current"';}?> ><a href="#">Shaka</a>
   <li <? if("news"==$pageid){echo 'id="current"';}?> ><a href="#">News</a> <li 
   <? if("links"==$pageid){echo 'id="current"';}?> ><a href="#">Links</a> <li <?
   if("contact"==$pageid){echo 'id="current"';}?> ><a href="#">Contact Me</a> </
   ul>
 * Where you place the declaration is tricky given WP’s structure, it really depends
   on where your navigation’s html is really. I place my ‘home’ declaration in the
   header.php, but that’s only because I have two navigation menus, a main and sub
   one.
 * I imagine if you placed yours in the header.php file then home will always be
   highlighted, it doesn’t effect my structure because I dont have a home tab but
   a ‘blog’ tab that shows I’m in my page’s blog.
 * I can’t really say much about the where because I don’t know how your site is
   structured and how you’re creating your pages. Just need a little bit of thinking
   to get it right once you nail the concept.
 *  Thread Starter [sfboarders](https://wordpress.org/support/users/sfboarders/)
 * (@sfboarders)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420071)
 * I can see how your code works but I don’t see how I can enter the variable in
   the pages I created.
 * So these pages I created below in WP which are similar to a post (in wp-admin–
   >Manage–>Pages).
    div id=”navcontainer” ul <li a href=”/”>Home <li a href=”?page_id
   =59″>Links <li a href=”?page_id=51″>News <li a href=”?page_id=47″>Contact ul 
   div
 *  [21stproject](https://wordpress.org/support/users/21stproject/)
 * (@21stproject)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420074)
 * hm. You’ll have to edit the php files you realize, not from the WordPress pages,
   but from ftp because you’re editing the theme.
 * wp-content > themes > (whatever-your-theme-is) > header.php
 * if you’re editing a **Page** created by WordPress then the template file is;
 * wp-content > themes > (whatever-your-theme-is) > page.php
 * I don’t use the theme editor link in wp admin so I can’t help you with that. 
   I do all the editing manually because it’s less confusing like that.
 * Sorry if I confused you over that.
 * [edit: well, correction, I suppose you can just add the code to the page from
   wp admin but it might not look too pretty, plus you can’t be using the rich text
   editor for this]
 *  Thread Starter [sfboarders](https://wordpress.org/support/users/sfboarders/)
 * (@sfboarders)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420077)
 * Well I found some themes with the effect I want. It basically ads the pages created
   to the nav bar. Examples below:
 * <li class=”<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single())
   or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item
   <?php } ?>”>
 * 
    <?php if ($aOptions[‘show_archives’] && $aOptions[‘archives_cat’] != ”) : ?
   > <li class=”<?php echo($sMenuArchive); ?>”>/?category_name=<?php echo($aOptions[‘
   archives_cat’]); ?>”><span>Archives</span> <?php endif; ?> <?php wp_list_pages(‘
   depth=1&title_li=0&sort_column=menu_order’); ?>
 *  Thread Starter [sfboarders](https://wordpress.org/support/users/sfboarders/)
 * (@sfboarders)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420275)
 * Well I went through bout 15 themes in the directory and managed to find some 
   code that was ez for me to implement and understand. So basically I used the 
   code below and renamed my “current” class to “current_page_item”.
 * 
    <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’); ?>
 *  [threevisual](https://wordpress.org/support/users/threevisual/)
 * (@threevisual)
 * [19 years ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420557)
 * Sorry to re-open an old post…
 * I just strated using this code on my new blog, however the
 * > <? $pageid=”contact”; ?>
 * code is entered in a post, which obviously loads after the navigation, therefore
   the ‘current’ style is not show.
 * Is there any way I can get the page content to load before the navigation?
 *  [threevisual](https://wordpress.org/support/users/threevisual/)
 * (@threevisual)
 * [19 years ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420559)
 * Any ideas?

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘css navigation (current page indication/active window)’ is closed to 
new replies.

## Tags

 * [nav bar](https://wordpress.org/support/topic-tag/nav-bar/)

 * 13 replies
 * 3 participants
 * Last reply from: [threevisual](https://wordpress.org/support/users/threevisual/)
 * Last activity: [19 years ago](https://wordpress.org/support/topic/css-navigation-current-page-indicationactive-window/#post-420559)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics