add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script( 'jquery' );
wp_add_inline_script( 'jquery', '
jQuery( document ).ready( function( $ ) {
$( "div.widget_search, div.widget_product_search" ).each( function() {
$( this )
.append(
"<a href=\"#\" class=\"toggler\"><i class=\"fas fa-search\""
+ " aria-label=\"Search\"></i></a>"
)
.find( "form" ).each( function() {
$( this ).hide().addClass( "hidden" );
} );
} );
$( "div.widget_search a.toggler, div.widget_product_search a.toggler" )
.click( function() {
$( this ).parent().find( "form" ).each( function() {
if( $( this ).hasClass( "hidden" ) ) {
$( this ).fadeIn().removeClass( "hidden" );
} else {
$( this ).fadeOut().addClass( "hidden" );
}
} );
} );
} );
', 'after' );
} );
Sitewide or product search show/hide using an icon
Shows and hides the search widget form by placing an icon in its place. Requires your theme or a Code Snippet loads the free Font Awesome icon library.
How to use
PHP Code Snippets
- Log into a staging, development, or locally hosted clone of your site
- Install and activate Code Snippets
- WP Admin > Snippets > Add New
- Copy and paste the code from the Description tab above
- Check to ensure formatting came over properly and no syntax errors show up in the editor
- Customize the code as desired
- Add a meaningful title
- Select whether to run on front-end or back-end (or both)
- Click “Save and Activate”
- Test your site to ensure it works
- Disable if any problems, or recover
- Repeat for live environment
License
All code snippets are licensed GPLv2 (or later) matching WordPress licensing.
Disclaimer of warranty:
Except when otherwise stated in writing the copyright holders and/or other parties provide the program as-is without warranty of any kind, either expressed or implied, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose.
Support
- Describe the issue and what you’ve observed.
- Describe your expected outcome(s).
- List steps to reproduce the issue.
- Optionally provide screen-shot or video URLs.
