The header_search_icon shortcode can be used to display the search icon in your header aside field when using a supported header style.
Technically the shortcode can be used anywhere, but it’s intended primarily for adding a search icon to your header that is separate from the main menu.
Avoid Duplicate Search Icons
By default, the theme automatically adds the search icon to the far right of the header menu. If you’re also using the header_search_icon shortcode, this can result in two search icons appearing. To fix this, go to Customize > Header > Search and disable the Menu Icon option.
Sample Shortcode Usage
[header_search_icon]
Shortcode Attributes:
Below are the attributes accepted by the header_search_icon shortcode:
| Attribute | Description | Default |
|---|---|---|
class | custom classes to add to the element | – |
label_class | custom classes to add to the label | – |
button_class | custom classes to add to the button | – |
icon_class | custom classes to add to the icon | – |
visibility | custom visibility | – |
label | custom label | – |
label_margin | label margin | 10px |
label_position | label position (right or left) | right |
label_hide_breakpoint | breakpoint to hide the label on smaller screens (sm,md,lg,xl) | – |
aria_label | custom aria label attribute for accessibility | Search |