How to Add a Search Bar in WordPress with Elementor (and Without)

On blogs, stores and resource sites, a search bar is one of the fastest ways for visitors to find what they need. Here is how to add one with Elementor Pro, free Elementor or the block editor.

Method 1: Elementor Pro Search widget

1. Open your header template in Templates > Theme Builder (or any page).
2. Drag in the Search widget (or the older Search Form widget).
3. Choose a skin: a classic bar, a minimal icon, or full-screen search that opens on click, which is great for compact headers.
4. Set the placeholder text, such as "Search tutorials…", and style it to match your brand.
5. Recent versions can show live results as visitors type; enable it if available.

Method 2: Free Elementor

In the Elementor widget panel, find the WordPress Search widget and drag it into your layout. It is plainer but works anywhere.

Method 3: Block editor and block themes

Add the Search block to your header template in the site editor, or to any page or sidebar. It can show as a button-only icon on smaller screens.

Improve the search results page

• Elementor Pro: design a Search Results archive template in the Theme Builder with clear cards and excerpts.
• Write descriptive titles and excerpts; they are what visitors scan.
• Show a helpful message and popular links when there are no results.
• For large sites or stores, a search plugin can improve relevance and add live suggestions.

Where to put the search bar

• In the header on blogs and stores.
• On your custom 404 page.
• At the top of large help or resource sections.

Building a full navigation system? See creating a mega menu.