Now a days I am a great fan of wordpress. Recently I have done some projects on wordpress and getting expert day by day heh heh.

This post about how can we make menu in wordpress like news.bbc.co.uk. Now a days some clients want clone sites. They don’t think about all the functionality but the look and feel clone .
So to clone the menu like news.bbc.co.uk we what we need:
1. wp function wp_list_categories(args)
2. CSS to give look and feel like news.bbc.co.uk

Before we start let’s check what we are going to do:
here is the image that we are going to make or the menu that we are doing to make using wp_list_categories function and css. Look this menu is 2 level deep. To keep the theme clean u can make a function in functions.php file like bellow and just call the function in theme where u want to place the menu.
Look here we are using echo= 0 as want to just return the output from this function. and depth =2 as we want to make two level hirarachy… check others params that I have used. To know details about the template tag wp_list_categories pls check this page in wp codex.

Now what we need is to apply the css to style the menu like news.bbc.co.uk… one thing to keep in mind. When u will browse through the category I mean u click the any category from the menu and posts will be shown using category.php template then active category will get an extra class automatic which is helpfull to highlight using css but if u browse any single.

function get_leftcatmenu(){
$excludecats = array();
$excludecats = array(1,2,3); //categories to exlclude
//or
//$includecats = array ();
//$includecats = array(1,2,3); //categories to include

/*
// same thing can be done using a simple plugin and saving the categories in option table , bellow code is for comma seperated cat list
$excludecats = explode(',', get_option('bbcnews_leftmenucid'));
$excludecats = implode( ",",$excludecats);
*/
/*
$includecats = explode(',', get_option('bbcnews_leftmenuscid'));
$includecats = implode( ",",$seccats);

//sample code to exclude
return wp_list_categories('orderby=name&style=list&hide_empty=0&show_count=0&title_li=&exclude='.$excludecats.'&hierarchical=true&depth=2&echo=0');

// sample code to inlclude
return wp_list_categories('orderby=id&style=list&hide_empty=0&show_count=0&title_li=&include='.$includecats.'&hierarchical=true&depth=2&echo=0');
*/
}

post we need the hightlight the category in the menu to which the single post belongs to. But to make this happen that adding an extra class to the menu to make active while browsing any single posts I have used a plugin named “Show Active Category (while browsing a post)“. Note if any post belongs to more one category then it will add extra active class to each category.

Uff….now check the css code that I used:
Note: this css code works fine in ff3 and ie6 and I have no interest with other browser at this moment.
Code to use in theme:

<ul class="catmenu">
<li class="<?php if (is_home()){ echo"> home"><a href="<?php echo get_option('home'); ?>">News Front Page</a></li>
</ul>

and code to add in style.css

ul.catmenu li{ background-color:#E5E5E5; margin-bottom:2px;}
ul.catmenu li a{ text-decoration:none;  line-height:19px;  font-size:11px; font-weight:bold;  padding:2px 0  2px 5px; color:#1F527B; vertical-align:middle; }
ul.catmenu li ul.children li a{ text-decoration:none; line-height:19px; font-family:9px; font-weight:normal; padding:2px 0  2px 5px; vertical-align:middle;}
ul.catmenu li:hover{ background-color:#D8D8D8;}
ul.catmenu li.current-cat{ background:#665F6E url(images/v3_square_rb.gif) repeat-y scroll right top;}
ul.catmenu li.current-cat:hover{ background-color:#665F6E;}
ul.catmenu li.current-cat a{ color:#FFFFFF;}
ul.catmenu li a:hover{ text-decoration:underline;}
ul.catmenu li ul.children{ background-color:#D3D3D3; display:none;}
ul.catmenu li ul.children li{ margin-bottom:0px;}
ul.catmenu li.current-cat-parent{ background:#665F6E;}
ul.catmenu li.current-cat-parent a{ color:#FFFFFF;}
ul.catmenu li.current-cat-parent ul li a,ul.catmenu li.current-cat ul li a{ color:#1F527B;}
ul.catmenu li.current-cat-parent ul li.current-cat{ background:#C0BFBF url(images/v3_square_rb.gif) repeat-y scroll right top;}
ul.catmenu li.current-cat ul.children,ul.catmenu li.current-cat-parent ul.children { display:block; background-color:#D3D3D3; }

ul.catmenu li.current-cat-parent ul li.current-cat a{ font-weight:bold; color:#1F527B;}

have not enogh time to discuss what the above css code do but it took me more than 1 hr to write the above css perfectly . If u are familiar with the abc of css then u will get the css code easily.

BTW, u need one image in the images folder and here is link for that image . Copy and paste the image in images folder. Pls keep in mind about the copy right of the image. Here the main thing that I wanted to highlight that how to make clone of any “look and feel” with own creativity that is what I actually did here.

Another screenshot: