Online Tips for Web Developer/Designer

Task needed to complete.

1. Inserting PHP code to your header.php file
2. Inserting the CSS to your style sheet

The Sliding doors top navigation hack for WordPress.

This is a strict hack to enhance the wp_list_pages() or wp_list_categories(), NO CHANGE OF CORE. Since wordpress update there security issue quite frequently, it is not ideal to change the core file period. In the below php code we will be using a regular expression of php preg_replace().

To create the menu we are going to use, let’s paste in the below code for your pages or categories in your header.php WordPress theme.

php code

To list your Pages:

<div id="dsnav" class="clearfix">
    <ul id="cssmenu">
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>
    </ul>
</div>

php code

To list your Categoreis:

<div id="dsnav" class="clearfix">
    <ul id="cssmenu">
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>
    </ul>
</div>

After the code

After the code had successfully been inserted to your code, you should have something similar to the image below.

But now you will be saying, this is a bit ugly, I want something similar to your site or other website. So now we will need to include some css to get rid of the bullets and styling it like a menu. Let’s now take a look at the menu structure from the source code.

css style

For the one who doesn’t want to know the details of the css, who just want the code, here’s the whole chunk.

#dsnav {
	float:left;
	overflow:visible;
	padding:0;
	position:relative;
	width:100%;
	background:#999;
}
#cssmenu ul {
	margin: 0; /* all lists */
	padding: 0;
}
#cssmenu {
	height:30px;
	margin:0;
	overflow:hidden;
	padding:0 20px;
}
#cssmenu li {
	display:block;
	float:left;
	margin:4px 10px 0 0;
	padding:0;
}
#cssmenu li a {
	background:#CCC;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	color:#000000;
	display:block;
	font-size:80%;
	font-weight:normal;
	padding:4px 6px;
	text-decoration:none;
	text-transform:uppercase;
}
li.current-cat a{
	background:#000!important;
	color:#FFF!important;
}
#cssmenu li a:hover {
	background:#000;
	color:#FFF
}
li.current-cat a:hover{
	background:#333!important;
	color:#ccc!important;
}

#dsnav {

	float:left;
	padding:0;
	margin:0;
	width:100%;
	background:#999;
}
.clearfix{
	clear:both;
}

#cssmenu li {
	display:block;
	float:left;
	margin:4px 10px 0 0;
	padding:0;
	text-transform:uppercase;
}

1. Add a background color
2. Add the round corner for firefox and sarafi, IE are just not welcome for this class(sorry for the IE lover)
3. Control the text color
4. Display it in block, so this will clear off the spacing problem
5. Create the font size, weight
6. Add padding to your a tag so it is more roomy inside.

#cssmenu li a {
	background:#CCC;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	color:#000000;
	display:block;
	font-size:0.8em;
	font-weight:normal;
	text-decoration:none;
	padding:4px 6px;
}

After the code you will have something similar to this.

#cssmenu li {
	display:block;
	float:left;
	margin:4px 10px 0 0;
	padding:0;
	text-transform:uppercase;
}

#cssmenu ul {
	margin: 0; /* all lists */
	padding: 0;
}
#cssmenu {
	height:30px;
	margin:0;
	overflow:hidden;
	padding:0 20px;
}

You should have some breathing space to your menu now.

li.current-cat a{
	background:#000!important;
	color:#FFF!important;
}
#cssmenu li a:hover {
	background:#000;
	color:#FFF
}
li.current-cat a:hover{
	background:#333!important;
	color:#ccc!important;
}

Now you have the basic knowledge of css, do play around with your style. If you have any problem with css, please leave us a comment.