How to Add a Search Bar in WordPress

Your visitors know what they want. The question is — can they find it fast enough to stay?

43% of website visitors head straight to the search bar the moment they land on a site. If there’s no search bar, most of them don’t browse around hoping to stumble on what they need. They leave.

WordPress powers 43% of all websites on the internet, and yet a surprising number of those sites make their visitors work unnecessarily hard to navigate content. Whether you’re running a blog, an eCommerce store, a portfolio, or a business site — adding a search bar is one of the highest-leverage moves you can make for user experience.

This guide covers every method: the native WordPress widget, plugins, shortcodes, theme files, and custom styling. By the end, you’ll have a fully functional search bar placed exactly where it belongs on your site.

Why Your WordPress Site Needs a Search Bar

Before jumping into the how-to, it’s worth understanding what’s actually at stake.

Site search users convert at 5–6x higher rates than visitors who don’t use it. These are your most motivated visitors — people actively looking for something specific. Making that easy is simply good business.

The numbers back this up further:

• 30% of all website visitors use site search when it’s available
• Websites with internal search see up to 45% more page views per session
• 68% of visitors abandon a site if they struggle to find what they’re looking for quickly
• Sites with functional search tools report up to 2x higher revenue per visit compared to those without

Every day your WordPress site runs without a search bar, you’re leaving conversions on the table.

How to Add a Search Bar Using the Default WordPress Widget

The simplest way to add a search bar in WordPress is through the built-in widget — no plugins required.

Step 1: Go to Appearance → Widgets

Log in to your WordPress dashboard. In the left menu, navigate to Appearance → Widgets. This opens the widget editor showing all available widget areas on your theme.

Step 2: Locate the Search Widget

In the available widgets panel, look for the “Search” block. It’s a native WordPress widget that renders a simple search field.

Step 3: Drag It to Your Preferred Widget Area

Most themes have sidebar and footer widget areas. Drag the Search widget into whichever area makes sense for your layout — typically the Primary Sidebar for blogs or the Footer for business pages.

Step 4: Customize the Title (Optional)

Click the Search widget in your sidebar. You can add a title like “Search This Site” or leave it blank for a cleaner look.

Step 5: Save and Preview

Click Save at the top right. Visit your site to see the search bar live.

Quick Tip: If your theme uses the Full Site Editor (FSE) via block themes, navigate to Appearance → Editor instead. Insert the Search block directly into your header or sidebar template part.

How to Add a Search Bar with a Plugin

The default WordPress search is functional but basic. It doesn’t search product descriptions, custom fields, or metadata with much accuracy. Plugins give you more control.

Here are the best WordPress search plugins:

SearchWP

SearchWP is the most popular premium search plugin for WordPress with over 30,000 active installs and a near-perfect rating. It indexes every piece of content on your site — custom fields, WooCommerce products, PDF attachments, and more.

To install:

1. Purchase and download SearchWP from their site
2. Go to Plugins → Add New → Upload Plugin
3. Upload the .zip file and click Install Now
4. Activate the plugin and follow the setup wizard

Ivory Search

Ivory Search is a free plugin with over 100,000 active installs. It lets you create multiple custom search forms, include/exclude post types, and add live Ajax search (results appear as you type).

To install:

1. Go to Plugins → Add New
2. Search for “Ivory Search”
3. Click Install Now → Activate
4. Navigate to Ivory Search in the left menu to configure your search forms

Ajax Search Lite

Ajax Search Lite delivers real-time search results as visitors type — dramatically reducing friction. It’s free and has over 60,000 active installs.

To install:

1. Go to Plugins → Add New
2. Search for “Ajax Search Lite”
3. Install and activate
4. Customize the search widget under Ajax Search Lite → Settings

Once configured, add any of these plugin search bars to your pages using their shortcodes or widgets — detailed in the sections below.

How to Add a Search Bar to Your Navigation Menu

Placing a search bar in the navigation menu keeps it visible on every page — which is exactly where visitors expect it.

Using the Block Editor (Gutenberg):

1. Go to Appearance → Editor
2. Click on your Header template
3. In the block toolbar, click the + icon to add a block
4. Search for “Search” and insert the Search block
5. Drag it to the right side of your navigation bar
6. Customize the button text, width, and label as needed
7. Click Save

Using Classic Themes (No Block Editor):

For themes that don’t use the Full Site Editor, you’ll add the search bar by editing your theme’s header.php file. Navigate to Appearance → Theme File Editor → header.php and add this code where your navigation ends:

<?php get_search_form(); ?>

This outputs the default WordPress search form. Wrap it in a <div> with a custom class if you need to style it separately.

How to Add a Search Bar Using a Shortcode

Shortcodes let you drop a search bar anywhere on your site — inside a page, a post, a widget area, or even a custom template.

The native WordPress shortcode for search is simple:

[wp_search_form]

Most search plugins also come with their own shortcodes. For example, with Ivory Search:

[ivory-search id=”YOUR_FORM_ID” title=”Default Search Form”]

You can find your form’s ID under Ivory Search → All Search Forms in your dashboard.

Where to use shortcodes:

• Inside a page block using the Shortcode block in Gutenberg
• In a Custom HTML widget in your sidebar or footer
• Inside your theme’s page template files

How to Add a Search Bar in WordPress Using Code

If you want full control over the placement and styling, adding a search bar directly to your theme files gives you the most flexibility.

Option 1: Add to header.php

Open Appearance → Theme File Editor and select header.php. Paste this where you want the search form to appear:

<?php get_search_form(); ?>

Option 2: Create a Custom Search Form

For a custom-designed search form, create a file called searchform.php in your theme’s root folder and paste:

<form role=”search” method=”get” class=”search-form” action=”<?php echo home_url(‘/’); ?>”>

    <label>

        <input type=”search” class=”search-field” placeholder=”Search…” value=”<?php echo get_search_query(); ?>” name=”s” />

    </label>

    <button type=”submit” class=”search-submit”>Search</button>

</form>

WordPress automatically uses this file whenever get_search_form() is called. You now have complete control over the HTML structure and CSS styling.

Important: Always edit files through a child theme — not the parent theme. Direct edits to a parent theme get wiped on the next update. If you haven’t set up a child theme yet, do that first.

How to Add a Search Bar for WooCommerce

WooCommerce stores have an extra layer to manage — product search. The default WordPress search doesn’t always search product descriptions, attributes, or custom taxonomies accurately.

Best approach for WooCommerce:

1. Install a plugin like SearchWP or Ivory Search
2. Configure it to index product titles, descriptions, attributes, and SKUs
3. Add the search form to your shop header using a shortcode or widget
4. Enable Ajax search for instant results as users type

WooCommerce stores with optimized product search see significantly lower bounce rates on category and product pages. When shoppers can find what they want in seconds, they don’t abandon carts.

How to Customize and Style Your WordPress Search Bar

Adding a search bar is step one. Making it look like it belongs on your site is step two.

Changing the placeholder text:

If you’re using Gutenberg’s native Search block, click the block and update the Placeholder Text field in the block settings panel on the right.

For PHP-based forms, modify the placeholder attribute directly in your searchform.php file.

Styling with CSS:

Add custom styles in Appearance → Customize → Additional CSS:

/* Search form container */

.search-form {

    display: flex;

    align-items: center;

    gap: 8px;

}

/* Search input field */

.search-field {

    border: 2px solid #2A5AF8;

    border-radius: 6px;

    padding: 10px 16px;

    font-size: 15px;

    width: 100%;

}

/* Search submit button */

.search-submit {

    background-color: #2A5AF8;

    color: #ffffff;

    border: none;

    border-radius: 6px;

    padding: 10px 20px;

    cursor: pointer;

    font-size: 15px;

}

.search-submit:hover {

    background-color: #1a3fd0;

}

Making your search bar mobile-responsive:

Add a media query to collapse the search form on smaller screens:

@media (max-width: 768px) {

    .search-form {

        flex-direction: column;

    }

    .search-field {

        width: 100%;

    }

}

Search Bar Placement: Where It Works Best

Research consistently shows these three placements deliver the highest usage rates:

Header (top-right): The most expected location. Visitors instinctively look here first, especially on content-heavy sites and blogs.

Sidebar (sticky): Ideal for blogs and publication-style sites where visitors scroll deep into content. Keeps search accessible throughout long reads.

Homepage hero section: Works well for service and eCommerce sites where search is a primary action — think job boards, property listings, or product catalogs.

Above the footer: A good backup placement. Catches visitors who’ve scrolled all the way down looking for something specific.

Avoid burying your search bar in a dropdown menu or a collapsed hamburger menu. Every extra click is a reason for a visitor to give up.

CTA: Book Strategy Meeting

Banner Background: #ECECFE H1 Color: #1F2124 H2 Color: #1F2124 CTA Background: #2A5AF8 CTA Text: White

How to Test Your WordPress Search Bar

Once your search bar is live, don’t just assume it’s working correctly. Run these checks:

Basic functionality test: Type a known keyword into the search bar. Do relevant results appear? Are the most relevant posts or pages ranking at the top?

Empty search test: Submit the search form without any keyword. Does the page handle it gracefully, or does it throw an error?

Mobile test: Open your site on a phone. Is the search bar accessible and easy to tap? Does the keyboard appear correctly?

Speed test: Use a plugin like Query Monitor to check how long your search queries take. Slow search results (over 2 seconds) increase abandonment significantly.

No-results test: Search for something that doesn’t exist on your site. Does your no-results page offer helpful suggestions or related links?

Common WordPress Search Problems and How to Fix Them

Search returns no results for content that clearly exists

This usually means your search index is outdated or your plugin isn’t configured to index that content type. In SearchWP, go to SearchWP → Settings → Sources and make sure all relevant post types are checked. Then trigger a reindex.

Search results are too broad or irrelevant

The default WordPress search matches any occurrence of a keyword — even in comments and metadata. Use a plugin like SearchWP to weight results by relevance (title matches should rank higher than body mentions).

The search form redirects to the wrong page

Check the action attribute in your search form. It should point to <?php echo home_url(‘/’); ?>. Incorrect action URLs often happen when switching domains or moving from HTTP to HTTPS.

Search bar doesn’t appear after widget placement

Some themes don’t display all registered widget areas. Check your theme documentation to confirm which widget areas are active. Alternatively, use a shortcode or direct PHP to place the form.

Conclusion

Adding a search bar to your WordPress site is one of the simplest, highest-impact improvements you can make. Whether you go with the native widget for a quick five-minute setup or a plugin for advanced indexing and Ajax results, your visitors will thank you with longer sessions and higher engagement.

To recap the key methods:

• Widget: Fastest, no code required — go to Appearance → Widgets
• Plugin: Best for advanced needs — Ivory Search (free) or SearchWP (premium)
• Shortcode: Most flexible for placement anywhere on the site
• PHP/Theme files: Full control for developers using child themes
• Full Site Editor: Native block-based approach for modern block themes