The Total theme lets you add a search link to the header menu that toggles (displays) the search when clicked. However, if you prefer to remove the search icon from the header menu and open the search another way, you can use the theme’s [header_search_icon] shortcode.
While using the [header_search_icon] shortcode is recommended, it’s also possible to trigger the header search via a custom class added to any interactive element (like a link or button).
Below is a list of the required class names, depending on the search style you’ve selected in the Customizer. Note that the Modal search type requires both a class name and an aria-controls attribute.
- Modal: wpex-open-modal (classname) wpex-search-modal (aria-controls)
- Site Overlay: search-overlay-toggle (classname)
- Dropdown: search-dropdown-toggle (classname)
- Header Replace: search-header-replace-toggle (classname)
Not using the Theme Header?
This is crucial! If you’re not using the standard header, the code required to render the search functionality won’t be present on the page. Total is designed to only load what’s necessary, keeping your site optimized.
If you want to use this search feature on a custom header, you’ll need to use the “Modal (Live Search)” or “Site Overlay” option, as they are currently the only ones that works independently of the header. You can easily enable it by adding the following code to your child theme’s functions.php file:
add_filter( 'totaltheme/header/menu/search/is_enabled', '__return_true' );
add_filter( 'totaltheme/header/menu/search/style', function( $style ) {
$style = 'modal';
return $style;
} );