Title: Create Header Search with dropdown menu
Last modified: January 17, 2017

---

# Create Header Search with dropdown menu

 *  Resolved [Kehinde Omoniyi](https://wordpress.org/support/users/omokenny/)
 * (@omokenny)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/create-header-search-with-dropdown-menu/)
 * Hello all, trust you are all doing good.
 * I am having issues with customizing my header search for [my website](http://graphicwants.com)
 * ⌊This ⌉⌊This ⌉ This is what i have presently have
 * after adding `<?php get_search_form(); ?>` to my header.php
 * But what i really want is this; ⌊This⌉
 * I will appreciate your response.
    -  This topic was modified 9 years, 4 months ago by [Kehinde Omoniyi](https://wordpress.org/support/users/omokenny/).

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/create-header-search-with-dropdown-menu/#post-8670463)
 * So you mainly want to add a category field to your searches? You can insert additional
   HTML to the get_search_form() output through a filter, but there’s not much to
   a search form anyway. A text field named “s” and a submit field. Add in the category
   field with wp_dropdown_categories() and you will have the necessary fields. Style
   them with CSS any way you desire.
 *  Thread Starter [Kehinde Omoniyi](https://wordpress.org/support/users/omokenny/)
 * (@omokenny)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/create-header-search-with-dropdown-menu/#post-8671310)
 * Thanks (@bcworkz), but I didn’t get your explanation right
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/create-header-search-with-dropdown-menu/#post-8675114)
 * I’m sorry. I tend to not phrase things very clearly.
 * get_search_form() is not very complex, it’s a mere convenience. You will be better
   off creating your own search form. You can use the HTML output from get_search_form()
   as a guide in making your own form.
 * What does get complex is creating a category dropdown field. For this you should
   use [wp_dropdown_categories()](https://codex.wordpress.org/Function_Reference/wp_dropdown_categories).
   The rest of the form can easily be created in HTML right on the header template.
 *  Thread Starter [Kehinde Omoniyi](https://wordpress.org/support/users/omokenny/)
 * (@omokenny)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/create-header-search-with-dropdown-menu/#post-8677565)
 * Thanks a lot (@bcworkz).
 * Can you please assist me with the code I can use to do that? Because I don’t 
   really understand coding.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/create-header-search-with-dropdown-menu/#post-8679919)
 * Here’s the content part that goes on your template:
 *     ```
       <form role="search" method="get" class="search-form" action="<?php echo site_url('/'); ?>">
          <label>
             <span class="screen-reader-text">Search resources here:</span>
             <input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" />
          </label>
          <?php wp_dropdown_categories(); ?>
          <input type="submit" class="submit" value="Search" />
       </form>
       ```
   
 * It will not look like much without proper CSS styling. You’re on your own for
   that part, sorry. You might investigate your browser’s developer tools. There
   is a tool for testing out various CSS styles. Once you determine the appropriate
   styles, copy them to your theme’s style.css page. Naturally you would need to
   know something about CSS styles. Since these rules control how your site looks,
   it’s worth learning IMO. It’s much simpler than programming languages, so don’t
   let the fact that it’s “code” deter you.
 * If even CSS is too much, you can hire professional assistance at jobs.wordpress.
   net
 *  Thread Starter [Kehinde Omoniyi](https://wordpress.org/support/users/omokenny/)
 * (@omokenny)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/create-header-search-with-dropdown-menu/#post-8682834)
 * Thanks a lot, will try what i can do
 *  Thread Starter [Kehinde Omoniyi](https://wordpress.org/support/users/omokenny/)
 * (@omokenny)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/create-header-search-with-dropdown-menu/#post-8685497)
 * i have tried it, it worked, though will need to look for a way to make some enhancement
   on it.
 * THANKS A LOT, I REALLY APPRECIATE
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/create-header-search-with-dropdown-menu/#post-8689284)
 * Here’s some CSS to get you started. I’m not sure how much it’ll help because 
   success depends on your current theme and where on the page the form is placed.
   It works with my variant of the twentytwelve theme.
 *     ```
       <style>
       .search-form {
         border: 1px solid #999;
         border-radius: 25px;
         height: 50px;
         position: relative;
         width: 90%;
       }
       .search-field {
         border-bottom-left-radius: 25px;
         border-top-left-radius: 25px;
         height: 50px;
         width: calc(100% - 240px);
       }
       #cat {
         background-color: #fff;
         border: 0 solid #fff;
       }
       .submit {
         border-bottom-right-radius: 25px !important;
         border-top-right-radius: 25px !important;
         float: right;
         height: 50px;
       }
       </style>
       ```
   
 * This can go right in front of my previous code. If you find yourself an online
   CSS reference and learn to navigate your browser’s CSS analyzer, you can figure
   out any needed adjustments. Don’t be afraid to try different things in the analyzer,
   reloading the page resets everything. When you come up with a rule that does 
   what you want, add it to this code. Feel free to alter the rules I’ve given you
   as well.
 * Warning, once you figure out some of this CSS, you may not be able to stop with
   the search form. The rest of the site will be yours to tweak 🙂
 *  Thread Starter [Kehinde Omoniyi](https://wordpress.org/support/users/omokenny/)
 * (@omokenny)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/create-header-search-with-dropdown-menu/#post-8694606)
 * Will try it to see how it works.
 * Many thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Create Header Search with dropdown menu’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 9 replies
 * 2 participants
 * Last reply from: [Kehinde Omoniyi](https://wordpress.org/support/users/omokenny/)
 * Last activity: [9 years, 4 months ago](https://wordpress.org/support/topic/create-header-search-with-dropdown-menu/#post-8694606)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics