Chapter 12 275 Finally, you included this component into your header.php le so that it shows across every page of your site. Once it was included appropriately, you styled it by using some good looking colors and layout. Creating tabbed navigation for your theme One of the easiest visual clues that you can offer your users is that of active and inactive tabs. This lets them know exactly where they are on your site at any moment. In this recipe, you'll learn the markup and styles you need to bring an easy tabbed interface to life. Getting started You need to have a basic theme constructed, and need to have separated your main navigation items into their own pages in the WordPress back-end. How to do it For this recipe, we're going to concern ourselves with a simple, one-column site with horizontal, tabbed navigation. While this technique can be applied to a variety of situations, the horizontal tabs are denitely the easiest. Your index.php le should look something like the following: <?php get_header(); ?> <div id="content"> <?php if( have_posts() ) { while( have_posts() ) { the_post(); ?> <div <?php post_class('post-container'); ?>> <h2 <?php post_class('post-title'); ?>> <?php the_title(); ?> </h2> <div <?php post_class('post-excerpt'); ?>> <?php the_excerpt(); ?> </div> <div <?php post_class('post-controls'); ?>> <a href="<?php comments_link(); ?>"> <?php comments_number( __('No Comments'), __('1 Comment'), __('% Comments') Layout 276 ); ?> </a> <?php if( is_user_logged_in() ) { ?> <?php edit_post_link('Edit'); ?> <?php } ?> </div> </div> <?php } } ?> </div> <?php get_footer(); ?> Next, make sure that your header.php le resembles the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_ attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title> <?php bloginfo('name'); wp_title('—', true, ''); ?></title> <style type="text/css" media="screen"> @import url( <?php bloginfo('stylesheet_url'); ?> ); </style> <?php wp_head(); ?> </head> <body <?php body_class('classic'); ?>> <div id="wrap"> <div id="header"> <h1><?php bloginfo('name'); ?></h1> <?php wp_page_menu(array('depth'=>1, 'show_home'=>true)); ?> </div><! closing of the header div > <! end header > Chapter 12 277 Open your browser to view the changes. Assuming that you haven't added any styles yet, your theme will resemble the following screenshot: Now to make the magic happen, and get those tabs aiding your users, you need to add some styles. For now, you'll just get the basic tabs down. In the future, you can use variations on this technique to make your sites' navigation beautiful. First, let's establish a solid container that wraps all of the content. Luckily, you already have an element to style that wraps everything. Add the following code to your theme's stylesheet, style.css: .wrap { margin: 0 auto; width: 960px; } Layout 278 Now let's separate the content by setting up a border around it. Here, we'll use a simple black border that surrounds the entire content div. Insert the following code into your stylesheet: #content { border: 1px solid #000000; padding: 10px; clear: left; } If you've got everything done correctly, you should have something that resembles the following screenshot, which shows a standard vertical list of links: Chapter 12 279 Now you can style the header navigation links to look like tabs. For the purposes of this recipe, the active tab will be shown by removing the border between the tab and the main content area. Inactive tabs will be gray, but will brighten to a slight off-white color on hover. For now, we just need to get the items in the correct positions, though. We'll start by styling the list and list elements. Insert the following code into your stylesheet: #header { float: left; } #header .menu { border: 1px solid #000000; border-width: 1px 0 0 1px; float: left; margin-bottom: -1px; } #header .menu ul, #header .menu li { float: left; list-style: none; list-style-type: none; margin: 0; padding: 0; } #header .menu li { border: 1px solid #000000; border-width: 0 1px 1px 0; display: block; font-weight: bold; text-align: center; } #header .menu li a{ display:block; padding:10px; text-decoration:none; background: #dedede; } This code oats the list items appropriately, and makes them display along the top edge of the content div. Layout 280 Save your changes, and then open your browser to view the results. The result is something like the example shown in the following screenshot, which shows the list items now in a horizontal row, surrounded by rectangular shapes, and no list-style type (bullet or number): All that's left to do at this point is to handle the colors and the active tab. Insert the following code into your stylesheet: #header .menu li a{ background: #dedede; #header .menu li a:hover{ background: #efefef; } #header .menu li.current_page_item{ border-bottom-color:#ffffff; /*note: you can use a different color here as needed */ } #header .menu li.current_page_item a{ background:#ffffff; /*note: you can use a different color here as needed */ } Chapter 12 281 At this point, you should have some fully-styled tabs. Try them out by hovering over and clicking on another tab. You'll see the active tab changes on page reload. The following screenshot shows the end result when you're visiting the About page and hovering over another tab: How it works The key to this recipe is the styles applied in your theme's stylesheet. Most of the techniques used are not worth a rehash. However, there is one important set of styles that deserves to be highlighted. In the markup generated when WordPress renders this template, you end up with something that looks like the following code: <div id="header"> <h1>Theme Testing Platform – 5</h1> <div class="menu"> <ul> <li> Layout 282 <a href="http://5.themes.local" title="Home">Home</a> </li> <li class="page_item page-item-2"> <a href="http://5.themes.local/about/" title="About">About</a> </li> <li class="page_item page-item-119"> <a href="http://5.themes.local/about-2/" title="About">About</a> </li> </ul> </div> </div> <div id="content"> <! Lots of stuff > </div> Ordinarily, this markup would cause the menu div to sit directly on top of the content div. If you were to apply a border to the bottom of the items in the menu div and the top of the content div, you would get a doubled-up border. However, you'll notice the following style declaration was created in your style.css le: #header .menu { margin-bottom: -1px; } This declaration tells the browser to overlap the menu and content divs by moving the menu div down 1 pixel on top of the content div. Now, the items inside the menu div that have bottom borders don't double up with the content div; they overlap the border of the content div. Later on in your stylesheet, you'll notice that the current page list item is styled differently to the rest: #header .menu li.current_page_item { border-bottom-color: #ffffff; } This declaration tells the list item of the current page to style its bottom border with the same color as the background of the main content area. Because this bottom border overlaps the top border of the content div, this style effectively makes the border seem to disappear underneath the active item. Chapter 12 283 There's more… Maybe you want to use images as backgrounds on your menu items, or learn about other ways to structure your navigation in order to make your theme more unique. There are many more resources on the web to help you out. Many menus, many resources Due to the exibility of WordPress, you can use many different kinds of CSS and JavaScript driven menus, with a dash of PHP if you like. Visit the following resources to learn more about different types of menus and other navigation structures: http://www.alistapart.com/topics/code/css/ http://www.w3schools.com/css/css_navbar.asp http://codex.wordpress.org/Dynamic_Menu_Highlighting . <li> Layout 282 <a href="http://5 .themes. local" title="Home">Home</a> </li> <li class="page_item page-item-2"> <a href="http://5 .themes. local/about/". menus and other navigation structures: http://www.alistapart.com/topics/code/css/ http://www.w3schools.com/css/css_navbar.asp http://codex .wordpress. org/Dynamic_Menu_Highlighting . a{ background:#ffffff; /*note: you can use a different color here as needed */ } Chapter 12 281 At this point, you should have some fully-styled tabs. Try them out by hovering over and clicking