Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Add a Search Toggle Effect in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Add a Search Toggle Effect in WordPress

Have you seen the search icon with toggle effect on many popular websites? Take a look at our sister project List25 for an example. The idea is to display a simple search icon, and when the user clicks on it the search forms slides out also known as the toggle effect. It is a neat effect that also saves space and allows your users to focus on the content. Not to mention, this is great for mobile responsive themes. In this article, we will show you how to add a search toggle effect in WordPress Themes.

Search toggle effect in action

Note: This tutorial is for intermediate users with working knowledge of WordPress template tags, HTML, and CSS. Beginner level users are advised to practice on local server first.

Displaying WordPress Search Form

WordPress adds default CSS classes to HTML generated by various template tags inside a theme. WordPress themes use <?php get_search_form(); ?> template tag to display search form. It can output two different search forms, one for HTML4 themes and one for themes with HTML5 support. If your theme has add_theme_support('html5', array('search-form')) line in functions.php file, then this template tag will output an HTML5 search form. Otherwise, it will output HTML4 search form.

Another way to find out what form your theme generates, is to look at the search form source code.

This is the form get_search_form() template tag will display when your theme does not have HTML5 support:

<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" />

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( '/' ); ?>">
		<span class="screen-reader-text">Search for:</span>
		<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
	<input type="submit" class="search-submit" value="Search" />

For the sake of this tutorial, we will use the HTML5 search form. If your theme generates HTML4 search form, then add this line of code in your theme’s functions.php file:

add_theme_support('html5', array('search-form'));

Once you have made sure that your search form is generating HTML5 form, the next step is to place the search form where you want to display it with the toggle effect.

Adding the Toggle Effect to the WordPress Search Form

First thing you will need is a search icon. The default Twenty Thirteen theme in WordPress comes with a very nice little icon, and we will be using that in our tutorial. However, feel free to create your own in Photoshop or download one from the web. Just make sure that the file is named search-icon.png.

Now you need to upload this search icon to your theme’s images folder. Connect to your website using an FTP client like Filezilla, and open your theme directory.

Now this is the final and most crucial step. You need to add this CSS to your 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-submit { 

The important thing to note about this CSS, is the CSS3 transition effects which allows us to create the toggle effect with ease. Also note that you will still have to adjust the positioning of the search icon and form according to your theme’s layout.

We hope this article helped you add search toggle effect in your WordPress theme. What are your thoughts on the toggle search form? We’re seeing more and more sites using this effect. Leave your feedback and questions in the comments below or join us in the conversation at Google+.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. Crowd says:

    Thank you very much, works like a charm.
    Do you think there’s a way to make the search field appear from right to left (unlike from left to right like now)?

  2. Tony López says:

    Thanks! It work perfectly.

  3. Cato says:

    Yeah… just like I thought, this doesn´t work at all. How is it supossed to work with no JS anyway?

  4. Cato says:

    Hmmm this is kind of old but… no javascript required here really? what kind of dark magic is this?

  5. Panfi says:

    Not working for me and wonder why :(

  6. Cassy says:

    I got this working on genesis but my search form is in my nav bar, and when the screen width is relatively too small, the search form moves down.

  7. Sohan says:

    It works!
    Thank you soooooooooooooo much!

  8. Anur says:

    I dont think this works on Genesis

    • Cassy says:

      I got it working on Genesis. You have to move the search-icon.png into your genesis child theme images folder. Then, depending on where you put your search form, mine is in the nav bar so it is slightly different, you adjust the css style to your likes. I had to modify the “.genesis-nav-menu .search input” class to get it working.

      • Laura says:

        Hi Cassy, Can you give a little more info on how you modified the .genesis-nav-menu .search input class? I can’t seem to get it working. Thanks!

  9. Maria says:

    Hi! I’m using Genesis and I can’t get this effect to work. Any tips as to why?

    • Anur says:

      yea the same problem im on genesis with enteprise pro theme doesnt work.
      Anyone who has solution to make this work on genesis..

  10. Roy says:

    this is really great! Is it possible to get the icon to sit static at the right while the form slides out to the left? I can’t seem to figure it out!

  11. Joshua Farr says:

    Greetings – Thank you for this great bit of code. I’ve tried inserting it into a client’s site that I’m working, using the HTML5 version of the code, I placed the extra bit into functions.php and added all of the css. I put in a search icon and got the form to show up how I want on the site – it will even do all of the toggle-ing effect as desired – but when I enter text that I want to search to test it out, I can not submit the search to view search results. We are using a woocommerce theme, “Mystile”, which has a default search form (which works when entered) but I much prefer the looks and functionality of the form as mentioned on this page.

    We tried putting the wocommerce search form code side by side with the code you gave above, tried swapping out bits and pieces to “merge” the two…but no luck.

    Any reccomendations would be extremely helpful.
    Thank you!

    • WPBeginner Support says:

      There could be many things that may cause this, it is not possible for us to help out with theme compatibility issues.

  12. Rajeesh Nair says:

    Now that’s some interesting stuff there. Though I am a mere beginner and I actually use the search option that has come default with the blog theme which is like a pop-up (not exactly a pop-up though as its CSS and not javascript) and displays search bar.

    But what I am exactly looking for is that how to display Google Search along with Blog search as found in popular blogs like ListVerse and others. Please guide me through this!

  13. adolf witzeling says:

    Another great tutorial. I will add this to my site-just because it’s cool.

  14. alexisnicholson says:

    Code looks fabulous , I appreciate your efforts , surely gonna try this one for my word press project .


  15. Shahraar Khan says:

    A demo would be helpful.. Also what does the use of role=”search” attribute in the form tag, what is the attribute “role” used for?

  16. Susan Silver says:

    I have been looking for a simple tutorial on this. Thanks! Have you done one yet on the sliding menus like those on the Facebook mobile app? These menus are becoming very popular, even for desktop apps.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.