WordPress And The Search Box For Mobile

Search on mobile differs from desktop. The screen is smaller; the keyboard takes space when active; the touch interaction is different from clicking. The search box design needs to account for these.

The space-efficient patterns

Search icon in header. The icon takes minimal space; tapping it expands to a full search bar.

Search bar at the top of relevant pages. On archive or category pages, a search bar above content makes search prominent.

Search in the mobile menu. The menu opens with full screen; search lives there alongside navigation.

The keyboard considerations

The mobile keyboard takes about half the screen when active. The search results should account for this.

If search results appear in a dropdown beneath the search input, the keyboard may hide them. Modal search overlays that don't compete with the keyboard work better.

The input mode

The HTML inputmode attribute can hint the keyboard to show. For search: inputmode="search" works on some browsers.

For numeric search (zip codes, phone numbers), inputmode="numeric" shows the number pad.

The attribute is increasingly supported and worth using.

The autocomplete suggestions

As the user types, suggested completions can appear. Mobile users benefit from autocomplete because typing is slower.

The suggestions should be: tappable easily (large touch targets), relevant to what's being typed, fast to appear.

Implementation varies. Search plugins like SearchWP and Algolia provide search-as-you-type for WordPress.

The recent search pattern

For repeat visitors, showing recent searches can save typing. The user's previous searches appear when they tap the search box.

The pattern requires storing search history. Privacy considerations apply; some users prefer not to have this stored.

The honest framing

Mobile search box design is small details that compound. Sites that handle mobile search well see higher search engagement than sites that don't.

For sites where search is a primary navigation pattern, mobile search optimization is worth investing in.