Search

Use Search to add a WordPress search form with configurable layout, optional inline AJAX results, and post type filtering.

Usage

Use Search to add a WordPress search form to a layout with control over the input, button, and form layout. The module submits queries to the standard WordPress search and can either redirect visitors to the site search results page or render results inline below the form using AJAX. When AJAX results are enabled, the module renders each match with optional featured image, title link, and excerpt, and supports filtering the query by one or more post types.

Use Search in site headers, hero sections, dedicated search pages, or any layout where visitors need to find content quickly. The Layout setting covers compact icon-only buttons, full-screen overlay search, expanding inputs, and stacked or inline arrangements, which makes the module suitable for both prominent search experiences and minimal utility placements.

Module Settings

The Search module settings control the form layout, the appearance of the input and button, and how search results are returned to the visitor.

Layout Tab

The Layout tab sets the form structure, input label, placeholder, and button options.

Layout Default: All Inline

Selects the structural arrangement of the input and the search button.

• Input Only: Shows only the search input with no visible button.
• All Inline: Places the label, input, and button on a single row.
• Button Only: Shows only a search button that triggers an expanding input, a full-screen overlay, or a reveal action.
• All Stacked: Stacks the label, input, and button vertically.

Input Label

Input Label Default: Show

Shows or hides the label above or beside the input. This field appears when Layout is set to All Inline or All Stacked, or when Layout is Button Only with Action set to Reveal.

Placeholder Text

Placeholder Text Default: Search...

The placeholder text displayed inside the search input.

Button Text

Button Text Default: Search

The text displayed on the search button. This field appears when Layout is set to All Inline, All Stacked, or Button Only.

Action

Action Default: Expand on click

Determines how the search input is presented when Layout is set to Button Only.

• Expand on click: The input expands inline from the button when the button is clicked.
• Full Screen: The input opens in a full-screen overlay with a close button.
• Reveal: The button reveals an inline input alongside or below the button.

Expand Position

Expand Position Default: Left

Sets the side the input expands toward when Action is set to Expand on click. Options are Left and Right.

Button Icon

The Button Icon section adds an optional icon to the search button and configures DuoTone colors and icon position.

Button Icon

Icon Supports: Field Connections

Selects an icon displayed on the search button. The Icon Position field appears when an icon is selected.

DuoTone Primary Color Supports: Field Connections

For Font Awesome DuoTone icons only: the primary color applied to the icon.

DuoTone Secondary Color Supports: Field Connections

For Font Awesome DuoTone icons only: the secondary color applied to the icon.

Icon Position Default: Before Text

Places the icon before or after the button text when an icon is selected. Options are Before Text and After Text.

Style Tab

The Style tab controls the appearance of the form wrapper, the full-screen overlay, the label, the input, and the button.

Form

The Form section controls the dimensions, alignment, padding, background, and border of the search form wrapper.

Form

Width Default: Full Width

Sets the width of the form wrapper.

• Auto: Sizes the wrapper to its content.
• Full Width: Stretches the wrapper to the full width of its container.
• Custom: Uses a fixed maximum width set in Custom Width.

Custom Width

Custom Width Default: 1100

The maximum width of the search form container. This field appears when Width is set to Custom. Supports px and % units.

Alignment

Alignment Default: center; Supports: Responsive

The horizontal alignment of the form within its container. This field appears when Width is set to Auto or Custom.

Height Default: 0; Supports: Responsive

The minimum height of the form wrapper. Content expands the height automatically. Supports px, vw, and vh units.

Padding Default: 10; Supports: Responsive

The inner spacing of the form wrapper.

Background Color Supports: Field Connections

The background color of the form wrapper.

Background Hover Color Supports: Field Connections

The background color of the form wrapper on hover.

Border

The border style, width, radius, and color of the form wrapper.

Border Hover

The border style used when the form wrapper is hovered or focused.

Fullscreen

This section is available when Layout is set to Button Only and Action is set to Full Screen.

Fullscreen

Input Width Default: 600

The maximum width of the input field inside the full-screen overlay. Supports px and % units.

Overlay Background Color Supports: Field Connections

The background color of the full-screen overlay behind the input.

Close Button Default: Show

Shows or hides the close button used to dismiss the full-screen overlay.

Label

This section is available when Input Label is set to Show.

Label

Padding Supports: Responsive

The inner spacing around the input label.

Color Supports: Field Connections

The text color of the input label.

Typography Supports: Responsive

The font settings for the input label.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Input

The Input section controls the appearance of the search input field.

Input

Padding Default: 12; Supports: Responsive

The inner spacing of the search input.

Typography Supports: Responsive

The font settings for the search input.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Color Supports: Field Connections

The text and placeholder color of the search input.

Hover Color Supports: Field Connections

The text and placeholder color of the search input on hover and focus.

Background Color Supports: Field Connections

The background color of the search input.

Background Hover Color Supports: Field Connections

The background color of the search input on hover and focus.

Border

The border style, width, radius, and color of the search input.

Border Hover

The border style used when the search input is hovered or focused.

Button

The Button section controls the appearance of the search button. This section is available when Layout is set to All Inline, All Stacked, or Button Only.

Button

Alignment Default: center

The horizontal alignment of the button within its wrapper. This field appears when Width is set to Auto or Custom.

Width Default: Auto

Sets the width of the search button.

• Auto: Sizes the button to its content.
• Custom: Uses a fixed width set in Custom Width.

Custom Width

Custom Width Default: 200

The fixed width of the search button. This field appears when Width is set to Custom. Supports px, vw, and % units.

Padding Supports: Responsive

The inner spacing of the search button.

Text Color Supports: Field Connections

The text color of the search button.

Text Hover Color Supports: Field Connections

The text color of the search button on hover and focus.

Typography Supports: Responsive

The font settings for the search button.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Background Color Supports: Field Connections

The background color of the search button.

Background Hover Color Supports: Field Connections

The background color of the search button on hover and focus.

Background Style Default: Flat

Selects a Flat or Gradient background for the search button.

Border Supports: Responsive

The border style, width, radius, and color of the search button.

Border Hover Supports: Responsive

The border style used when the search button is hovered or focused.

Icon Color Supports: Field Connections

The color applied to the button icon. This section is available when an Icon is selected in the Layout tab.

Icon Hover Color Supports: Field Connections

The color applied to the button icon on hover and focus. This section is available when an Icon is selected in the Layout tab.

Content Tab

The Content tab determines how search results are returned and configures the inline AJAX result layout.

Results Default: Redirect to search page

Selects how submitted searches are presented.

• Redirect to search page: Submits the form to the WordPress search results page.
• Display results below via Ajax: Loads matching posts inline below the form without a page reload.

Post Type

Post Type

Narrows AJAX search results to one or more selected post types. This field appears when Results is set to Display results below via Ajax.

Ajax Result

This section is available when Results is set to Display results below via Ajax.

Ajax Result

Width Default: Full Width

Sets the width of the inline result container.

• Full Width: Stretches the result container to the full width of its parent.
• Custom: Uses a fixed maximum width set in Custom Width.

Custom Width

Custom Width Default: 1100

The maximum width of the AJAX result container. This field appears when Width is set to Custom. Supports px and % units.

Featured Image Default: Show

Shows or hides the featured image for each result. When set to Show, the Size, Crop, and Fallback Image fields appear.

Size

Size Default: medium

The registered WordPress image size used to render the featured image.

Crop

Crop Default: landscape

Selects the crop applied to the featured image. Options are None, Square, and Circle.

Fallback Image

Fallback Image

The image displayed when a result has no featured image set.

Content Default: Hide

Shows or hides the post excerpt for each result.

Content Length (Words)

Content Length (Words) Default: 55

The maximum number of words shown in each result excerpt. This field appears when Content is set to Show.

No Results Message Default: Sorry, we couldn't find any posts. Please try a different search.

The message displayed when an AJAX search returns no matching posts.

Advanced tab

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.