Pages of Rogelio Calamaya

I encountered this problem when I’m developing my first wordpress theme, a very simple problem and I want to share this tutorial to all of you. Hopefully it will give you an basic idea on how to make a tabbed navigation in you wordpress theme.

Now, in our template file where our navigation is located(in my case, header.php). We will paste the code below:

24
25
26
27
28
29
30
31

<ul id="nav">
  <li <?php echo(is_home() ? 'class="current_page_item"' : '');?>>
    <a href="<?php bloginfo('url'); ?>" title="Home">Home</a>
  </li>
  <?php 
     wp_list_pages('sort_column=menu_order&title_li=&depth=-1');
  ?>
</ul>

The style:

24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

#nav {
  list-style-type: none;
}
#nav li {
  display: inline;
  font: bold 12px arial, sans-serif;
}
#nav li.current_page_item a{
  background: #60a013;
  color: #fff;
}
#nav li a{
  color: #333;
  padding: 4px 10px;
  text-decoration: none;
}
#nav li a:hover{
  background: #60a013;
  color: #fff;
}

The code above will give the result, a simple tabbed navigation with an :active and :hover effect:

Notice that we add a “Home” link before we call the pages, to determine if the additional link is active we use the conditional tag is_home(). The is_home() returns true when the main blog page is currently being displayed, in our code if it’s true then it well print the class="current_page_item" else it will print nothing. More information about the conditional tags can be found here.

And we display the pages link using the wp_list_pages() template tag. We can customize the output of our links by using the parameters sort_column=menu_order, title_li='' and depth=-1.

The sort_column=menu_order can sort the list of pages in a different way. In our code we will sort the pages by Page Order. Page order can be set by user in the pages administrative panel. Next is title_li='', this will not display headings and the list will not be wrapped with <ul>...</ul>. And last depth=-1, will display the sub-pages as flat, the same as the other pages with no indent form. More information about the wp_list_pages() template tag can be found here