Today’s Wordpress Question #2

Posted in Blogging by Elliott Back on April 15th, 2005.

And here’s the second question:

Hey, I’m a passerby from the WordPress community and was wondering if you could explain something for me.

I’ve searched the archives for instructions on how to implement a navigation structure similar to the one you have on your site and just can’t seem to wrap my mind around it. I was wondering if you could give me a little push in the right direction in implementing the same kind of navigation you have on your site.

Any help would be appreciated.

There are two parts to the navigation on this blog. The first is the bars across the top, which are created with a little CSS / HTML magic. The CSS is from CSS Tabs, and looks like this:

ul#tabnav {
	font-size: 12px;
	list-style-type: none;
	position: absolute;
	display: block;
	left: 50%;
	margin: 0 0 0 -360px;
	top: 196px;
}

.tab1, .tab2, .tab3, .tab4, .tab5 {
	float: left;
	height: 22px;
	background-color: #618193;
	color: #fff;
	margin: 2px 2px 0 2px;
}

.tab1 a, .tab2 a, .tab3 a, .tab4 a, .tab5 a {
	color: #fff;
}

.tab1 a:hover, .tab2 a:hover, .tab3 a:hover,
.tab4 a:hover, .tab5 a:hover {
	background: #936161;
	color: #fff;
}

.tab1 { background-color: #fff; }
.tab1 a { color: #5EA4CD; }
.tab1 a:hover{ background-color: #fff; color: #936161; }

#tabnav a {
	float: left;
	display: block;
	text-decoration: none;
	padding: 4px;
}

This CSS is on every page, but the section that declares the “current tab” changes with each page. So, on page three, I would end up with:

.tab3 { background-color: #fff; }
.tab3 a { color: #5EA4CD; }
.tab3 a:hover{ background-color: #fff; color: #936161; }

Since WP 1.2.2 only gives a single index.php page, I created my own copies called archives.php etc. Then there’s the PHP/HTML code that actually displays those tabs. If you’re using Kubrick, this will look familiar:

< div id="header" >
< div id="headerimg" > < a < /a >
< ul id="tabnav" >
< li class="tab1" >
< a href="< ?php bloginfo('url'); ? >" > Blog < /a >
< /li >
...
< /ul >
< /div >
< /div >

Finally, there a series of MOD_REWRITE rules for the tab links that I use:

RewriteRule ^archives/$ /wp/archives.php
RewriteRule ^movies/$ /wp/movies.php
RewriteRule ^plugins/$ /wp/plugins.php
RewriteRule ^mobile/$ /wp/wp-mobile.php

Which brings me to part 2, which is the links on the right hand side. For every set of links that appears there, I have handcrafted code that just makes calls to the appropriate category: wp_get_links(7);

This entry was posted on Friday, April 15th, 2005 at 7:23 pm and is tagged with html magic, div id, tab changes, none position, li class, navigation structure, php html, passerby, type none, fff, background color, style type, text decoration, right direction, lt, wordpress, tabs, ul, blog. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback.