RSS Feeds 
Feed Comment
1. Displaying WordPress categories in a horizontal dropdown menu.
One of my readers recently asked how I created my horizontal menu bar: the short answer is by mixing CSS and Javascript.
The first step is to get WordPress to display the menu as a hierarchical list without a title.
<?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>We then wrap this WordPress code in the following so we can style it.
<div style="text-align:center;">
<ul id="menu" style="padding:0; margin:0;">
<?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
</ul>
</div>I added this to my header.php, but you can add it anywhere you want it to appear.
The CSS is fairly simple and you just need to add it to your theme’s style.css file.
ul#menu {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
font-size:1.2em;
}
ul#menu li {
float: left;
padding: 0;
margin: 0;
border-right:solid 1px #fff;
}
ul#menu ul li {
float: none;
position: relative;
border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
border-left: 1px solid #FFF;
z-index:1000;
}
ul#menu li ul {
margin: 0;
padding: 0;
display:none;
list-style: none;
position: absolute;
background: #9CC;
}
ul#menu ul ul{
margin-left: .2em;
position: absolute;
top: 0; /* if using borders, -1px to align top borders */
left: 100%;
}
ul#menu * a:hover, ul#menu li a:active{
background:#7EAED7 !important;
color: #FFFFFF;
}
ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:hover,
ul#menu li a:active{
display: block;
padding: .2em .3em;
text-decoration: none;
background: #5587B3;
color: #FFFFFF;
}
ul#menu ul li a:link,
ul#menu ul li a:visited,
ul#menu ul li a:hover,
ul#menu ul li a:active {
width: 8em;
}
2. Dynamic Highlight Menu
Here is what I used to create a dynamic highlight menu on Best Web Gallery. In the first list item, if it is Home or Category or Archive or Search or Single, add class=”current” to the <li> tag, which will highlight the “Gallery” button. Second item, if it is page with Page Slug “about”, add class=”current”.
<ul id="nav">
<li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="#">Gallery</a></li>
<li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="#">About</a></li>
<li<?php if ( is_page('submit') ) { echo ' class="current"'; } ?>><a href="#">Submit</a></li>
</ul>Dynamic Title tag
<title>
<?php
if (is_home()) {
echo bloginfo('name');
} elseif (is_404()) {
echo '404 Not Found';
} elseif (is_category()) {
echo 'Category:'; wp_title('');
} elseif (is_search()) {
echo 'Search Results';
} elseif ( is_day() || is_month() || is_year() ) {
echo 'Archives:'; wp_title('');
} else {
echo wp_title('');
}
?>
</title>3. How to Modify WordPress Category and Menu Behaviors
Did you know that you can change the sort order of posts and categories listed in menu items with WordPress, and can even eliminate some items that you might not want to display? WordPress uses built-in PHP functions and the output is easily modified without the need to alter the code in the functions themselves.
There is a good reason for not altering the code in the core WordPress scripts unless it is absolutely necessary to do so. Most PHP functions are part of the core code, and if you change the code in these scripts, you will lose your changes the next time you upgrade WordPress.
WordPress developers have set up the system so that you can alter the behavior of several PHP core functions by inserting arguments sent with the call to the function from the theme template scripts. Arguments are name-value pairs, which are sometimes called parameters. You must use a valid name for an argument and assign a valid value in order for a change to work.
There are two functions to look for in your WordPress theme. In most themes, you will find the calls to the menu listings for pages and categories in the sidebar.php script. Sometimes, a designer will place the call to the pages function in the header.php or footer.php script. If you are using sidebar widgets, this information does not apply, because widget code calls to the functions will be found in other scripts.
4. Create horizontal drop-down menu for Wordpress Categories/Pages
Wordpress theme’s trends changes every few months. So you get to see new styles for Wordpress every 6-8 months. These days there is a trend of displaying your categories and subcategories or pages and subpages in a drop-down horizontal menu in header.
Though many wordpress themes come with built-in simple horizontal menu, i.e. there is no drop-down facility, you can easily put advanced categories/pages menu in your header.
Just follow these simple steps, and you will have a horizontal drop-down menu in your blog’s header.
<ul id=”nav2″ class=”clearfloat”>
<li><a href=”<?php echo get_option(’home’); ?>/” class=”on”>Home</a></li>
<?php wp_list_categories(’orderby=name&exlude=181&title_li=’);
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != “”) {
echo “<ul>”;
wp_list_categories(’orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of=’.$this_category->cat_ID);
echo “</ul>”;
}
?>
</ul>
Leave Your Comments Below