WordPress Web Development Tricks.How to add Drop down – Combo Box type Category List Box Just Below the Header Image/Header Navigation Menus in your blog or websites.

 

Before I have discussed Theme Bueno by Woo Themes CSS Style sheet Modification. Today I am going to show you how to add drop down Category Box just beneath the Header Image or Header Navigation Menus or Whereever you want. Though I have implemented this technique in Theme Bueno by Woo Theme.But you can easily implement this procedure in any of the theme you want to use.

The whole process I have described pictorially. Just Copy the code below and paste it according to the direction in the given image.
 
 

1. Copy the code Below.
 
 

<div style="width: 940px; height: 45px; margin-left: 208px; margin-top: 12px; margin-bottom: 10px; background-color: wheat;">
<div style="float: left; width: 142px; height: 43px; font-family: times New Roman; color: black;" id="search">Search Categories :</div>
<div style="width: 840px; height: 50px;" id="top-categories">
 
<option value="50436664" class="level-0"> 
<?php wp_dropdown_categories('show_option_none=Select category'); ?>
<script type="text/javascript">
 var dropdown = document.getElementById("cat");
 function onCatChange() {
 if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
 location.href = "http://localhost/om/?cat="+dropdown.options[dropdown.selectedIndex].value;
 }
 }
 dropdown.onchange = onCatChange; 
</script>
</option>
 
</div> 
   </div>

2. Login to your WordPress site and go to Appearance –>Editor. Then select Header.php as the image below.(Click the Image to Enlarge it)
 
 

 
 

3.Wow..You are done…Save it and Check preview.(Click the Image to Enlarge it)

Need Further help? Please Let me know your problem. Submit your problem in the comment box below. Please mention your website address.

Want to learn CSS Style Sheet Modification for WordPress.com Blog??
 
Check the link belows
 
 

Theme MistyLook by Sadish CSS Style sheet Modification.
 
Theme Beach by Gibbo CSS Style sheet Modification.
 
Theme Neutra By Artmov CSS Style sheet Modification.
 
Theme Choco by .css{mayo} CSS Style sheet Modification.
 
Theme Duster by Automattic CSS Style sheet Modification.