Customizing the WordPress Search Form with Bootstrap 5

WordPress includes a built-in get_search_form() function to render a search field, but the default version is plain and unstyled. If you’re using Bootstrap 5 or want more design control, here’s how we created a fully customized, responsive search form that fits beautifully into any theme.

🔍 Step 1: Add the Search Form to Any Template

Add this PHP snippet to any part of your theme where you want a search field to appear — in the header, sidebar, or the search results page (like search.php):

<?php get_search_form(); ?>

This ensures the form is reusable and consistent across the site.

🧰 Step 2: Create a Custom searchform.php

To override the default search form, create a new file in your active theme folder:

/wp-content/themes/your-theme/searchform.php

Then add this custom Bootstrap 5 search form:


<?php
/**
* Custom search form using Bootstrap 5
*/
?>

<form role="search" method="get" class="search-form d-flex w-100 mb-4" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <input
    type="search"
    class="form-control me-2 search-field"
    placeholder="Search…"
    value="<?php echo get_search_query(); ?>"
    name="s"
    aria-label="Search"
  />
  <button type="submit" class="btn btn-primary">
    <i class="bi bi-search"></i> Search
  </button>
</form>

This version uses Bootstrap spacing utilities and includes a search icon from Bootstrap Icons (bi bi-search). You can replace or remove the icon as needed.

🎨 Step 3: Fix Field Width with CSS

If the field is too narrow or won’t stretch as expected, use the following CSS:


.search-form {
  width: 100%;
  max-width: 100%;
}

.search-field {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

This ensures both the form and input expand to fill the space in any layout.

✅ Result

  • Clean, responsive search field
  • Consistent layout using Bootstrap 5
  • Works across templates including the search results screen
  • Easy to maintain using get_search_form()

Now you have a fully customized WordPress search experience — modern, mobile-friendly, and styled your way.


About the Author

Dusty Hale
I’m a professional full stack web application developer having worked in multiple application stacks for 27+ years, since 1998. My career began in Atlanta, GA, where I worked as a developer with Kaplan Communications, Spun Logic, and b2bTech. In current times, I am the project director for hale.group. I live in Tamarindo, Costa Rica and work remotely from a dedicated work space.
Dusty Hale Signature

WordPress includes a built-in get_search_form() function to render a search field, but the default version is plain and unstyled. If you’re using Bootstrap 5 or want more design control, here’s how we created a fully customized, responsive search form that fits beautifully into any theme.

🔍 Step 1: Add the Search Form to Any Template

Add this PHP snippet to any part of your theme where you want a search field to appear — in the header, sidebar, or the search results page (like search.php):

<?php get_search_form(); ?>

This ensures the form is reusable and consistent across the site.

🧰 Step 2: Create a Custom searchform.php

To override the default search form, create a new file in your active theme folder:

/wp-content/themes/your-theme/searchform.php

Then add this custom Bootstrap 5 search form:


<?php
/**
* Custom search form using Bootstrap 5
*/
?>

<form role="search" method="get" class="search-form d-flex w-100 mb-4" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <input
    type="search"
    class="form-control me-2 search-field"
    placeholder="Search…"
    value="<?php echo get_search_query(); ?>"
    name="s"
    aria-label="Search"
  />
  <button type="submit" class="btn btn-primary">
    <i class="bi bi-search"></i> Search
  </button>
</form>

This version uses Bootstrap spacing utilities and includes a search icon from Bootstrap Icons (bi bi-search). You can replace or remove the icon as needed.

🎨 Step 3: Fix Field Width with CSS

If the field is too narrow or won’t stretch as expected, use the following CSS:


.search-form {
  width: 100%;
  max-width: 100%;
}

.search-field {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

This ensures both the form and input expand to fill the space in any layout.

✅ Result

  • Clean, responsive search field
  • Consistent layout using Bootstrap 5
  • Works across templates including the search results screen
  • Easy to maintain using get_search_form()

Now you have a fully customized WordPress search experience — modern, mobile-friendly, and styled your way.


About the Author

Dusty Hale
I’m a professional full stack web application developer having worked in multiple application stacks for 27+ years, since 1998. My career began in Atlanta, GA, where I worked as a developer with Kaplan Communications, Spun Logic, and b2bTech. In current times, I am the project director for hale.group. I live in Tamarindo, Costa Rica and work remotely from a dedicated work space.
Dusty Hale Signature

Cool Stuff

Perfectly Balanced Text: How to Use text-wrap: balance; in CSS

In modern UX design, it's often the little details that make a website feel polished and professional. One of those details? Perfectly balanced text in headings and paragraphs.

read more

HTML Character Entity Codes Cheat Sheet

HTML character entity codes let you use special characters in your HTML that either can’t be typed directly or would otherwise interfere with HTML syntax.

read more

How to Build an AI Prompt Using CFML and/or cfScript (Part 1)

If you're a ColdFusion developer curious about integrating AI into your projects, this quick-start guide is for you.

read more