Archive for the ‘CSS’ Category

Tabbed Navigation in Wordpress

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:

wp-tabbed-final

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

Toggle Grid in Blueprint CSS

I started coding with the Blueprint CSS this night and since I’m a newbie, I am not yet familiar with the framework. So, I tend to manually toggle the showgrid class in the code. The showgrid class is an additional class that when present it shows a background of grids, it can be placed along with the container class. Which is handy when working with alignments. The sad part is the toggling, so I’ve written this simple script to toggle the grid of the Blueprint CSS and to please my laziness.

Put the script below inside the <head> element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<script type="text/javascript">  
  function toggleGrid() {
    var toggle = document.getElementById('toggleGrid');
    var container;			
    if(toggle.innerHTML == 'Hide Grid') {
      toggle.innerHTML = 'Show Grid';
      ripClass('');
    } 
    else if(toggle.innerHTML == 'Show Grid') {
      toggle.innerHTML = 'Hide Grid';
      ripClass(' showgrid');
    }
  }
 
  function ripClass(c) {
    if(document.getElementsByClassName) {
      container = document.getElementsByClassName('container');
      for(var i=0; i < container.length; i++) {
        container[i].className = 'container' + c;
      }
    }
    else {
      container = document.getElementsByTagName('div');
      for(var i=0; i < container.length; i++) {
        if(container[i].className == 'container') {
          container[i].className = 'container' + c;
        }
        else if(container[i].className == 'container showgrid') {
          container[i].className = 'container';
        }
      }
    }
  }
</script>

Next the style.

35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<style type="text/css">
div#toggleGrid {
  color: #fff;
  cursor: pointer;
  background: #333;
  font-weight: bold;
  left: 0;
  position: fixed;	
  text-align: center;
  top: 0;
  width: 100px;		
}
div#toggleGrid:hover {
  color: #FF6F6F;
}		
</style>

Then after that, we need to create a <div> element inside the body with the id="toggleGrid" and onclick() event calling the toggleGrid() function that we created above. It should look like this:

55

<div id="toggleGrid" onclick="toggleGrid();">Show Grid</div>

The <div> element will be position as fixed in the top left of the browser. Tested in Mozilla Firefox 3, Google Chrome, Opera 9, Apple Safari(win) and IE6/7.
Check the demo.

Absolute and Relative Positioning

With the Absolute position you can position the page element anywhere in the parent element. You can control them the way you want. And much more control if the parent element is relatively positioned.

Let’s just assume that the box with dashed border is your browser window. This is what is looks like if the position on the parent element is set to default:

Image 1

And this, if the position on parent element is set to relative:

Image 2

The explanation to the images above is that when the element is set to absolute position, it position itself with respect to the parent element(Image 2). But when the parent element is not relatively position, it position itself to the body element ignoring the parent element(Image 1).

So what happens when the #child_element_1 is set to default position(static) and the sibling is set to absolute position? See the image below:

Image 3

As you can see in the image above, while the #child_element_1’s height is increasing the #parent_element’s height will increase too but not with the #child_element_2’s height. It’s because when the element is set to absolute position, that element is remove from the normal flow.

Hope this will help. Cheers!

Return top