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:

If u are reached here using search engine then I am sure that you are just fucked up .. is_home(), is_single(), is_category() are not working…specially in footer and other places. I faced the same problem. While working with a wordpress theme, this functions were working fine in footer but once I noticed that they are not working as they should be !….

Let me explain why and how this problem occurs and what’s the solution :

I think if u are familiar with the famus LOOP in wordpress. The following is_home(), is_single(), is_category() functions depends on the loop. ACtually when u visit the home page then header.php, index.php, sidebar.php and footer.php files are executed and in the same way when u visit a single post then normally header.php, single.php, sidebar.php and footer.php files are executed. Actually some global page specific query is done for single.php, index.php etc. is_home(), is_single(), is_category() they will work fine if u use the default theme and don’t add any custom query !

Let’s check the code for is_home() function …

/**
* Whether current page view is the blog homepage.
*
* @since 1.5.0
* @uses $wp_query
*
* @return bool True if blog view homepage.
*/
function is_home () {
global $wp_query;
return $wp_query->is_home;
}

Ok, for custom query maximum time I use this function get_posts. But to get more control I used query_posts. They are same and share some common arguments but query_posts gives more controls and more arguments to pass to get the exact query. Now Let’s check the code for query_posts() function

/**
* Setup the Loop based on the query variables.
*
* @uses WP::$query_vars
* @since 2.0.0
*/
function query_posts() {
global $wp_the_query;
$this->build_query_string();
$wp_the_query->query($this->query_vars);
}

and code for get_posts

/**
* Retrieve list of latest posts or posts matching criteria.
*
* The defaults are as follows:
*     'numberposts' - Default is 5. Total number of posts to retrieve.
*     'offset' - Default is 0. See {@link WP_Query::query()} for more.
*     'category' - What category to pull the posts from.
*     'orderby' - Default is 'post_date'. How to order the posts.
*     'order' - Default is 'DESC'. The order to retrieve the posts.
*     'include' - See {@link WP_Query::query()} for more.
*     'exclude' - See {@link WP_Query::query()} for more.
*     'meta_key' - See {@link WP_Query::query()} for more.
*     'meta_value' - See {@link WP_Query::query()} for more.
*     'post_type' - Default is 'post'. Can be 'page', or 'attachment' to name a few.
*     'post_parent' - The parent of the post or post type.
*     'post_status' - Default is 'published'. Post status to retrieve.
*
* @since 1.2.0
* @uses $wpdb
* @uses WP_Query::query() See for more default arguments and information.
* @link http://codex.wordpress.org/Template_Tags/get_posts
*
* @param array $args Optional. Override defaults.
* @return array List of posts.
*/
function get_posts($args = null) {
$defaults = array(
'numberposts' => 5, 'offset' => 0,
'category' => 0, 'orderby' => 'post_date',
'order' => 'DESC', 'include' => '',
'exclude' => '', 'meta_key' => '',
'meta_value' =>'', 'post_type' => 'post',
'suppress_filters' => true
);

$r = wp_parse_args( $args, $defaults );
if ( empty( $r['post_status'] ) )
$r['post_status'] = ( 'attachment' == $r['post_type'] ) ? 'inherit' : 'publish';
if ( ! empty($r['numberposts']) )
$r['posts_per_page'] = $r['numberposts'];
if ( ! empty($r['category']) )
$r['cat'] = $r['category'];
if ( ! empty($r['include']) ) {
$incposts = preg_split('/[\s,]+/',$r['include']);
$r['posts_per_page'] = count($incposts);  // only the number of posts included
$r['post__in'] = $incposts;
} elseif ( ! empty($r['exclude']) )
$r['post__not_in'] = preg_split('/[\s,]+/',$r['exclude']);

$r['caller_get_posts'] = true;

$get_posts = new WP_Query;
return $get_posts->query($r);

}

get_posts will not make any problem for is_single(), is_home(), is_category() etc functions.

Solution: To avoid this problem you can use this trick:

$query_backup = clone($GLOBALS['wp_query']); //keep backup
......
query_posts(.....)
...
$GLOBALS['wp_query'] = $query_backup; //restore from backup

Further info: Please keep in mind that the php function clone() will not work in php4, it’s just for php5 becuase Php5 handles objects in different way. Like in php5 you can copy a object in this way
$new_object = clone ($old_object);
here $new_object will not copy the object actually though it will just point to $old_object but in php4 the thing is just copy like bellow.
$new_object = $old_object;

You can check this link for better explanation.

Sometimes pain gives us a way to think

thanks