Contents

Search

Lay Theme ships a full search overlay that covers your projects, pages, news posts, WooCommerce products and — optionally — the text inside your Gridder elements. You decide what gets indexed in Lay Options and how the overlay looks in the Customizer.

Add a search menu point

The search overlay opens when the visitor clicks any link whose URL is #search. The fastest way to create one is a Custom Link menu point:

  1. Go to Appearance → Menus.
  2. Open Custom Links, set URL to #search and Link Text to something like "Search".
  3. Click Add to Menu and save.
The Custom Links panel with #search as URL

Custom Links → URL #search, Link Text "Search", then Add to Menu

Any link with href="#search" works — a button inside a Gridder text element, a footer link, an overlay menu point. The overlay listens for the click site-wide.

Lay Options controls what is searched and how the autosuggest list behaves. Go to Lay Options and open the Search section:

Lay Options → Search panel

The Search panel in Lay Options

  • Search Projects — include regular posts (your projects).
  • Search Pages — include static pages (About, Contact, …). Off by default because pages often contain layout-only content like footers.
  • Search News Posts — include News posts. Only relevant when the News Feature is enabled.
  • WooCommerce products — when the WooCommerce plugin is active, products are added to the search automatically. There's no separate checkbox for this.
  • Search in Gridder text elements — also look inside the body text of Gridder text elements on your pages and projects. Because this can be a lot of content, the autosuggest stops live-updating once this is on and the full result list only refreshes after the visitor presses Enter. A small loading spinner appears during the search.
  • Hide Auto-Suggestions — always hide the small live-suggestion list below the input. Same setting as Customize → Search → Hide Auto-Suggestions; either one switches it off.
  • Maximum autosuggest results — how many entries appear in the autosuggest list while the visitor types. Default is 3.

The Customizer controls the appearance of the overlay — colors, fonts, layout. Open Customize from the WP admin bar and pick Search:

Customize → Search section

The Customize → Search section (first few options shown)

The section is grouped by topic. Most controls live-update in the preview, so it's easiest to keep the overlay open while you tweak.

Input & background

  • Placeholder Text — what's shown inside the empty input. Common values: "Search", "Type your search…", an em-dash, or nothing at all.
  • Font Family for Input and Auto Suggestions — pick a webfont. Defaults to the body font.
  • Use Textformat for Input + Text Format — apply one of your Lay Text Formats to the input and autosuggest text. Useful when you've already defined the typography style you want.
  • Background Color and Background Opacity — color and transparency of the overlay background. Opacity is in percent (0 to 100).
  • Blurry background — apply a backdrop blur on top of the background color. With a high-opacity background this is barely visible; with a translucent background the page underneath shows through with a frosted-glass look.
  • "X" Icon Color — color of the close button in the top right.
  • "Type your search…" Text Color — placeholder color.
  • Entered Search Text Color — color of what the visitor types.
  • Search Text Selection Background Color — highlight shown when the visitor selects the typed text.

Autosuggest

  • Hide Auto-Suggestions — mirror of the Lay Options setting. Hides the live list under the input.
  • Autosuggest Text Color and Autosuggest Text Mouseover Color — colors for the suggestion list. Keep enough contrast against your background or the suggestions read as decoration.
  • Space Between Search Input and Autosuggest — vertical gap (in pixels) below the input.
  • Autosuggest Line-Height — unit-less line-height for each suggestion row. 1.1 is tight, 1.5 is roomy.

Result list

  • Search Display — radio with two layouts:
    • Thumbnail Grid — projects, news posts and products appear as a grid of square thumbnails (page results still use the list layout because pages don't have thumbnails).
    • List with small thumbnails — every result is a row with a small preview image, a title and a description snippet. This is the layout shown in the screenshots below.
  • Result Title Text Format and Result Description Text Format — apply a Lay Text Format to the title and the description snippet of each row.
  • Result Description Color — color of the description snippet. Applied with !important so it overrides any color from the text format.
  • Show lines between results + Result Line Color — thin divider underneath each row.
  • Result Row Padding — vertical padding (in pixels) above and below each row.
  • Result Thumbnail Size, Result Thumbnail Border-Radius, Space Between Thumbnail and Text — control the small preview image in the list layout.
  • Max-Width — width (in pixels) of the results column. Set to 0 to fill the viewport.

Close (X) icon

  • Close (X) Icon Size — Desktop and — Phone — font-size of the close icon, in pixels, for each screen size.
  • Close (X) Icon Color — color of the close button.
  • Close (X) Icon Offset — Desktop and — Phone — distance from the top and right edges of the viewport.

How it looks on the frontend

When the visitor clicks the search menu point, the overlay slides in over the page. It has three states.

1. Empty. The input gets focus immediately and shows the placeholder. The close (X) sits in the top right corner.

The empty search overlay

The empty overlay with the placeholder text in the input

2. Autosuggest. The moment the visitor types, a small live list appears under the input with the top matching titles. The list is capped by the Maximum autosuggest results value in Lay Options. Clicking a suggestion fills the input with that title and runs the full search for it (which is the easiest way to trigger results when live updating is off — see below).

The autosuggest list

Autosuggest shows the top matches while the visitor types

3. Full results. Below the autosuggest list, the full result list renders. How it updates depends on whether Search in Gridder text elements is on:

  • Off (default) — results update live as the visitor types. No Enter needed.
  • On — searching through Gridder text elements is heavy, so the result list only refreshes after the visitor presses Enter or clicks one of the autosuggest entries. A small loading spinner appears while the search runs.

Each row has a thumbnail, a title and a short description snippet cut around the match. If you chose Thumbnail Grid in Customize → Search, the projects, news posts and products appear as a thumbnail grid instead; page results are still shown as a list because pages have no thumbnail.

The full result list

Full results in "List with small thumbnails" mode

On a phone the overlay covers the whole screen, the close icon moves to the phone-specific size and offset, and rows stack the same way — just narrower.