How to Add a Search Bar to Your Website

Whether search is built in depends on the platform. WordPress has a Search block, Wix has the free Wix Site Search app, and every Squarespace site already has a /search page plus a Search block. A static HTML site needs an index: Pagefind builds one from your finished pages and adds a ready-made search box.

Search on each platform
PlatformBuilt in?What you add
WordPressYesSearch block, or a search plugin for better results
WixAppWix Site Search from the App Market
SquarespaceYesSearch block; /search page exists already
Static HTMLNoPagefind, or a hosted search service
We.IncNoAsk the AI chat to build a search box

Updated

Site search earns its place on sites with lots of content: a blog with a hundred posts, a shop, a documentation site, a recipe archive. On a five-page business site, clear navigation does the job better and an empty search box only adds clutter.

Add a search bar on We.Inc, WordPress, Wix, Squarespace or plain HTML

We.Inc

  1. Open the AI chat and describe the search you want, for example 'add a search box to the header that searches my blog posts'.
  2. Try a few searches in the preview and ask for changes to the results layout.
  3. Publish when it finds what you expect.

Site search is not an add-on. The AI builds it into your site's code, which uses credits on a paid plan.

WordPress

  1. Open the Site Editor (Appearance > Editor) and select your header template part.
  2. Add a Search block where the box should sit.
  3. Choose whether the button shows text, an icon or both.
  4. Save, then try a search on the live site.

Wix

  1. In the Editor, click Add Apps, search for Wix Site Search and click Add to Site.
  2. Click the new search bar in your header to change its text, icon and placeholder.
  3. On the Search Results page, open Settings > Show on Search to pick which content types appear.
  4. Publish and test.

Squarespace

  1. Edit the page where search should appear.
  2. Click Add block and choose Search.
  3. Optionally limit results to one collection, such as your blog.
  4. Save; every site also answers searches at yourdomain.com/search.

Search blocks cannot be placed in the header area above page content.

Plain HTML

  1. Build your site so the finished HTML is in one folder.
  2. Run npx -y pagefind --site public (use your folder's name).
  3. Add Pagefind's stylesheet, script and search component tags to the page that should hold search.
  4. Deploy the folder, including the new pagefind directory.

Pagefind's search component

Search modal from Pagefind's quick start

These files only exist after you run the indexing command, so a 404 on them means the index step was skipped.

<link href="/pagefind/pagefind-component-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-component-ui.js" type="module"></script>
<pagefind-modal-trigger></pagefind-modal-trigger>
<pagefind-modal></pagefind-modal>

Sources

Every site search source here was checked on October 28, 2026.

  • Pagefind quick start documentation: https://pagefind.app/docs/
  • Wix help on adding and setting up Wix Site Search: https://support.wix.com/en/article/adding-and-setting-up-wix-site-search-7353315
  • Squarespace search blocks: https://support.squarespace.com/hc/en-us/articles/206543257-Search-blocks
  • Squarespace's built-in /search page: https://support.squarespace.com/hc/en-us/articles/206220798-Your-built-in-search-page

Server search, hosted search or static index

WordPress searches its own database, which is fine for small sites but ranks results crudely. Hosted services index your pages on their servers and return fast, typo-tolerant results through an API; they suit shops with thousands of products.

Static indexes such as Pagefind sit in the middle: your build writes small index files, and the browser fetches only the pieces it needs for each query, so search stays fast with no server to run.

How it works

  1. Decide what should be searchable: pages, blog posts, products or all three.
  2. Add the platform's search feature, or index the site with a tool.
  3. Place the box where people look for it, usually top right in the header.
  4. Try ten searches your customers would type and fix any that return nothing.

Tips

  • Put a magnifying-glass icon and a visible label or placeholder such as 'Search recipes'. An icon alone is easy to miss.
  • Read your search logs. Squarespace has a site search keywords report, and the words people type tell you which pages are missing.
  • Make the no-results page useful: suggest popular pages and a contact link.
  • On static sites, rerun the indexing step on every build, or new pages will not be found.

Frequently asked questions

How do I add a search bar to a static HTML website?

Use a static search tool. Pagefind runs after your build (npx -y pagefind --site public), writes an index into your output folder, and provides a search component you drop into a page. Nothing runs on a server.

Does Wix charge for site search?

Wix Site Search is an app you add from the App Market. Adding it places a search bar in your header and creates a hidden Search Results page.

Can I use Google to search my site?

Google offers Programmable Search Engine, which shows Google results limited to your domain. It only finds pages Google has indexed and may show ads on the free version.

Related: Sticky headers, Scroll to an element, Google sitelinks, Google Search Console guide.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.

More in Guides

Product

Who It's For

Features

Resources

Company

View Sitemap