How to make a jQuery toggle for the search box in WordPress

This tutorial goes over how to add an icon that toggles the WordPress search box using jQuery.

Add jQuery toggle for WordPress search

  1. The first thing I do in this tutorial is go over to Font Awesome and grab the icon I want to use in the header of my WordPress theme. Once I found the icon, I opened up my header.php file where my Bootstrap navigation lives and place in the code for the new icon below:

  2. Add the markup to display the search box with the following code:

  3. Now that the search bar is in our header, we need some SCSS styles to make it look nice. I added the following to my header.scss file:

  4. The last step is to add the jQuery to toggle the search box as the user clicks on the search icon. To do this we need to add the following jQuery to our WordPress theme:

Mentioned in the Video Tutorial