Quick Fix: Add A Search Toggle Effect in WordPress
On many major websites, you’ll see a search icon with a toggle. Learn how to add a search toggle effect in WordPress. The aim is to show a basic search icon, and when the user clicks it, the search form slides out. It saves space and allows your users to focus on the content.
You can go to any website or even select the search button on my website to get the toggle effect of the search button.
Also, perfect for mobile responsive themes. Here’s how to add a search toggle effect to WordPress themes. You need to be proficient in PHP and WordPress to make the changes provided in this tutorial.
How to Add the WordPress Search Form
WordPress adds default CSS classes to HTML created by theme template tags. The <?php get search form();?> template tag displays the search form. It can generate two search forms, one for HTML4 themes and one for HTML5 themes.
An HTML5 search form will be generated if your theme’s functions.php file contains the add theme support (‘html5’, ‘search-form’) line. If not, it outputs an HTML4 search form.
Look at the search form source code to see what form your theme creates. The get search form() template tag displays when your theme does not support HTML5.
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>And this is the form it will generate for a theme with HTML5 support.
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>The above example is for HTML 5. If you are using HTML 4 setup for your theme then you need to add the below code in functions.php and the search form will be generated for your theme automatically.
add_theme_support('html5', array('search-form'));After you have added the search button on your website using the above methods whichever suited you better. Now it is time to set the toggle feature of the search button that we want to get displayed on our website.
How to Add Toggle Effect on WordPress Search Form
You will need a search icon first. WordPress’ default Twenty Thirteen theme includes a great tiny icon, which we will use in our guide. To design your own in Photoshop or download one from the internet. Just name the file search-icon.png.
Upload the search symbol to your theme’s images folder. Open your theme directory with an FTP client like Filezilla.
Now you need to add the below code to make the search form of the theme toggle whenever someone hovers your search icon on your website. This modification is required to be done in the theme’s stylesheet:
.site-header .search-form {
position: absolute;
right: 200px;
top: 200px;
}
.site-header .search-field {
background-color: transparent;
background-image: url(images/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.site-header .search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}The CSS3 transition effects allow us to easily construct the toggle effect. Also, keep in mind that the search symbol and form must be positioned according to your theme’s layout.
That is all for this post about how to add a search toggle effect in WordPress. As you already learned it is quite easy to apply even the condition that you understand a little bit of PHP, HTML, and CSS coding.
Make Sure that you do now mess with the code of your theme if you are not aware of coding and it’s better to take the technician’s help. The best way is to keep the backup of the files you are going to change.
And if anything goes bad you can revert with backed-up files.
Please follow our social media pages Facebook, Twitter, YouTube, Instagram, and Pinterest. Also, feel free to read other articles on my website to keep this website alive.
Further Read:
