Adding the Bootstrap Search Form to WordPress

In this video you will learn how to style the default WordPress search form with Bootstrap markup. You will first learn how to use the searchform.php WordPress file to override the default search form and then the code needed to build the form. We will use the Bootstrap input group add-on markup to get the button to append to the input field. This makes your search form look very clean!

Steps

  1. Create a new file in the root directory of your WordPress theme called searchform.php
  2. Write the custom search form markup. It should look similar to the following:

  3. Customize the markup to fit your needs

Notes from the Video

If you would like to read more on how the searchform.php works, you can find more information at the WordPress codex here.

Here is a link to the Bootstrap input groups so you can see all the different options and markup. You can also see all the default Bootstrap button colors here.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • searchform.php what a great addition to the theme!

  • now if only wordpress internal search was worth a damn… 🙂

  • Hi Brad,

    Just wondering how I can watch the videos in faster playback speeds. I think this is a limitation of Vimeo and one reason I try and avoid Vimeo. What can take me 15 minutes to watch instead of 30 minutes or 45 minutes is a HUGE time saver. Are there alternatives so one can watch them at faster playback speeds?

    Thanks and blessings<