[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.
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;
}
Sorry if I weren’t clear, I meant the html code, you do know how to style the css right?
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;
}
Yes, it should work. Tell me how that goes.
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?
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.
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
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]
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 } ?>”>
<li class=”<?php echo($sMenuHome); ?>”>/”><span>Home</span>
<?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’); ?>
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”.
<li <?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { echo “class=\”current_page_item\””; } ?> >” ><?php _e(‘Home’); ?>
<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’); ?>
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?
