A search toggle effect can make your WordPress site look sleek and modern because it replaces a bulky search form with a simple icon.
Clicking the icon reveals the search form with a smooth slide-out animation. We think that this is an effective way to keep your site clean and user-friendly.
In this guide, we will walk you through adding the search toggle effect to your WordPress site. We’ll be using WPCode, a plugin that we use often, because it’s easy and doesn’t require any coding skills on your part.
What Is the Search Toggle Effect in WordPress?
The search toggle effect is a web design technique to improve the search experience on a WordPress website.
Instead of displaying a search form, you’ll show a search icon. When a user clicks on it, the search form appears with a slideout animation.
The default WordPress search form does not look very good. Many top WordPress themes already replace the default form with their styles.
However, if your theme still uses a static, plain search form, then you can use this tutorial to make it more user-friendly.
With that in mind, let’s look at how to easily add the search toggle effect in WordPress and make your site more interactive!
Note: This tutorial best suits intermediate and advanced-level WordPress users as it requires some basic understanding of HTML / CSS.
Adding a Search Toggle Effect in WordPress
To add a search toggle effect in WordPress, you will need to place a search form block or widget on your website and then add some custom CSS code.
First, let’s make sure that you have a search form on your website.
Adding a Search Form in a Block Theme with Full Site Editing
If you are using a WordPress block theme with the full site editing feature, then this is how you will add the search form to your website.
Simply visit Appearance » Editor from your WordPress dashboard. On the edit screen, you’ll want to add the ‘Search’ block where you want to display the search form.
After that, don’t forget to click the ‘Save’ button to store your changes.
Adding a Search Form in Other WordPress Themes
For WordPress themes without the full site editing feature, you can add the search block or widget to your sidebar or any widget-ready area.
To do this, you’ll want to head over to Appearance » Widgets from your WordPress dashboard. Then, you can add the ‘Search’ block/widget to the sidebar where you want to display the search form.
Next, let’s find a transparent image for the search icon.
For this tutorial, we are using this image as it’s suitable for dark backgrounds (feel free to use it on your website).
If you need to make your own search icon, then it would be great to create a transparent PNG image with dimensions of no more than 50×50 pixels.
The next step is to upload the icon to your website. Simply go to Media » Add New and click ‘Select Files’ to upload your search icon image.
Once uploaded, you’ll want to click on the ‘Copy URL to clipboard’ button and paste the URL into a plain text editor like Notepad or TextEdit.
Now that everything is in place, you’ll need to add some custom CSS to your WordPress website. We recommend using the WPCode plugin to save your custom CSS.
WPCode allows you to easily add custom code snippets in WordPress. It’s easy to use, and your code will not be affected by theme updates or when you switch to a different theme.
So, let’s install and activate the free WPCode plugin. If you need help, you can see our step-by-step guide on how to install a WordPress plugin.
Upon activation, simply visit the Code Snippets page in your WordPress admin dashboard. Then, just click the ‘Add New’ button at the top.
On the next screen, you’ll see the WPCode Snippet Library.
Navigate to the ‘Add Your Custom Code (New Snippet)’ option in the library and click the ‘Add Custom Snippet’ button underneath it.
After that, a list of code types will appear on the screen. You need to select the ‘HTML Snippet’ option for this tutorial.
This is because you’ll be loading the custom CSS in the website header using HTML.
From there, you need to provide a title for this code snippet. It could be anything that helps you identify the snippet.
Now, you can paste the following code into the ‘Code Preview’ box:
Important: Don’t forget to replace /url/to/search-icon.pngwith the image URL you copied earlier.
After that, you’ll need to switch the ‘Inactive’ toggle to ‘Active.’
Once done, it’s time to click on the ‘Save Snippet’ button.
And that’s it!
If you visit your website, you can see your search form with the toggle effect in action.
Troubleshooting Search Form Toggle Effect
The above method would work with most modern WordPress themes that use widget blocks. However, for some themes, this method may not work.
This could happen if the search form in your WordPress theme doesn’t have wp-block-search__inside-wrapper and wp-block-search__input classes.
In that case, you will need to use the Inspect tool to find out which CSS classes are used by your WordPress theme.
For instance, in the screenshot below, our demo theme uses these CSS classes for the search form.
Now, you can modify the code below and use these CSS classes instead. Here is an example:
Here is how it looked on our test website:
Bonus Tip: Add a Better WordPress Search for Your Website
The toggle effect only makes your WordPress search form look pretty. It doesn’t affect the quality of your website’s search results.
WordPress comes with a very basic search feature by default. This feature is often slow, inaccurate, and might show blank results.
This is where SearchWP comes in.
SearchWP is the best WordPress search plugin on the market. It allows you to easily replace the default search feature with a powerful search engine.
SearchWP automatically replaces search forms, so you don’t need to edit any theme files. It looks for matches everywhere on your website and drastically improves the quality of search results.
It also comes with a live search extension that instantly displays results as users type their queries. Plus, it has full eCommerce support, which allows you to create a smart WooCommerce search experience on your online store.
For step-by-step instructions, feel free to check out our guide on how to improve WordPress search with SearchWP.
We hope this article helped you learn how to add a search toggle effect in WordPress. Next, you may also want to see our guide on how to add voice search capability to your WordPress site and how to exclude pages from WordPress search results.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
