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.

About these ads

2 Responses to 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.

  1. I am using the Bueno theme and have been adding photos to posts. On the homepage, the photos are stretched even when I insert as original or medium size. How do I get it to be the actual/medium size of the photo and not just a thumb? Here’s my site http://www.themeergingdesigner.com

    Thanks!

    • Hi Melissa

      WHile i was checking your Hompage i got some images with posts….but suddenly while refreshed they are gone..may be u have deleted them…

      ANother matter is… the images showing in the Homepage are Featured Photos I think….. Would you mind to check the images by not selecting them as featured ( just insert the photos in your post)

      Regards..
      Om

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 304 other followers

%d bloggers like this: