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
If you're using modular Semantic UI JavaScript, then
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
api.min.js and search.min.js components are needed.Search shortcode arguments
| Classes |
| ||||
input | Additional classes to the input element. | ||||
group | Group results. [none|category|post_type] (Default: none). | ||||
post_type | Post type to search for (or multiple, comma separated). [any|post|page|product|custom] (Default: any) | ||||
per_page | Maximum amount of results to show at once. (Default: 7) | ||||
min_characters | Minimum amount of characters before triggering search. (Default: 3) | ||||
cache | Set to "true" to cache the results in the browser local storage. (Default: false) | ||||
placeholder | Placeholder text for the search input. | ||||
icon | Search icon displayed in the input. [right|left|none] (Default: right) | ||||
description | Set to "false" to not include the excerpt in search results. (Default: true) | ||||
image | Set to "false" to not include the featured image in search results. (Default: true) | ||||
price | Set to "false" to not include WooCommerce product price in search results. (Default: true) | ||||
styled | Set 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.Disabling description (excerpt), image (featured image) and price (WC product) in the results
<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.<button big basic marginless shadowless icon icon="search" modal="search-modal" />
<modal basic id="search-modal">
<segment basic style="min-height: 94vh; padding:2.5em 0">
<search fluid input="big fluid right action" icon="left" styled="false">
<button huge primary>Search</button>
</search>
</segment>
</modal>