Using CSS for navigation bar in Wordpress Theme - html

Question

I have a custom WordPress theme and my navigation bar is implemented fine however I have this bit of CSS (style.css):
#navbar li a.active{
background-color:#000;
color:#fff;
border-top: 3px solid;
border-color:#d22b2b;
}
This is the styling for the button that the current page is on, so it shows which page is currently active, this is a bit tricky to implement with WordPress as the HTML (index.php) is like this:
<div id="navbar">
<div class="navbarcontainer">
<ul align="center">
<?php wp_list_pages('title_li=');?>
</ul>
</div>
</div>
Now I can't add class="active" because I can't see the list items in the unordered list.
Need a way I can add class="active" to each page.

Answer 1

I don't have enough rep to comment but just curious why not use native WordPress menus? It'll make your life easier going down the road as well if you use wp_nav_menu();
See here: http://codex.wordpress.org/Function_Reference/wp_nav_menu
Properly using a menu that way will automatically apply this class to the active menu item:
.current-menu-item
That's just native functionality. Let me know if you decide to go that way and I'll be happy to help.
In your functions.php file add:
register_nav_menus('menu_slug' => 'Menu Name');
This will allow you to assign a menu in the backend. Go to Appearance -> Menus.
Then where you're trying to call the menu, add this code:
wp_nav_menu('menu'=> 'menu_slug');
That will then pull the menu you created in the backend. There are lots of arguments you can pass to that wp_nav_menu function as well.
$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
If you use it this way, add this code to your theme and then:
wp_nav_menu ( $defaults );
You'll notice if you do it that way, WordPress will automatically give the active menu item a current class. I hope this helps. This honestly is the best (right) way to do it. At some point you might want to switch the arrangement of menu items or add sub-menus or have a page you don't want to show. Using the menus like this will help you substantially.