Search

The search shortcode uses Semantic UI Search module with WordPress /wp/v2/search REST endpoint to display search result suggestions as you type.

Search shortcode requires the definitions/modules/search.less component to be enabled under Chap Theme -> Chap Compiler. The component is not enabled by default.
If you're using modular Semantic UI JavaScript, then accordion.min.js and search.min.js components are needed.
Search shortcode arguments
Classes
Sizemini tiny small medium large big huge massive
Resultsfluid left aligned right aligned
inputAdditional classes to the input element.
groupGroup results. [none|category|post_type] (Default: none).
post_typePost type to search for (or multiple, comma separated). [any|post|page|product|custom] (Default: any)
per_pageMaximum amount of results to show at once. (Default: 7)
min_charactersMinimum amount of characters before triggering search. (Default: 3)
cacheSet to "true" to cache the results in the browser local storage. (Default: false)
placeholderPlaceholder text for the search input.
iconSearch icon displayed in the input. [right|left|none] (Default: right)
descriptionSet to "false" to not include the excerpt in search results. (Default: true)
imageSet to "false" to not include the featured image in search results. (Default: true)
priceSet to "false" to not include WooCommerce product price in search results. (Default: true)
styledSet to "false" to avoid using .ui.search style on the input element (remove border-radius). (Default: true)
Default WordPress search with autocomplete
<search />
Search results grouped by category
<search group="category" />
Notes
Posts can have multiple categories, but only the first one is used.
Search results grouped by post type
<search group="post_type" />
Search WooCommerce products
<search post_type="product" placeholder="Search products..." />
Search multiple post types
<search fluid post_type="product,page" placeholder="Search products and slides..." input="fluid" />
Fluid
<search fluid input="fluid" />
Notes
Adding the "fluid" class makes the search results full width. Adding the "fluid" class to the input attribute makes the search input full width.
<search description="false" image="false" price="false" />
Variations
<search icon="right" />
<search icon="left" />
<search icon="none" />
<search icon="left" input="right action">
	<button primary type="submit">Search</button>
</search>
Disabling border-radius
<search styled="false" />
Notes
The search module doesn't use global border radius value by default. Setting the styled attribute to false allows the input to inherit the normal input border radius value. Alternatively the @promptBorderRadius variable of the Search component can be changed to use @borderRadius or a custom value at Chap Theme -> SUI -> Modules - Search -> modules/search.variables.

Leave a comment

Your email address will not be published. Required fields are marked *