WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Add a Search Toggle Effect in WordPress

How to Add a Search Toggle Effect in WordPress

Last updated on November 11th, 2013 by Editorial Staff
90 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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" />
    </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>

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-form
.search-submit { 
display:none;
}

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+.

90 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

36 Comments

Leave a Reply
  1. James Burns says:
    Feb 19, 2020 at 3:12 pm

    Thank you so much. Exactly the info I needed, presented in an easy-to-understand format.

    Reply
    • WPBeginner Support says:
      Feb 20, 2020 at 9:44 am

      You’re welcome, glad you found our content helpful :)

      Reply
  2. Osh says:
    Sep 20, 2019 at 10:12 am

    Hi,

    I’m using a child theme, should i add those codes to the parent theme’s files?

    I tried to do that and it is not working, please help !!!

    Thanks

    Reply
    • WPBeginner Support says:
      Sep 23, 2019 at 9:15 am

      You would want to add the code to your child theme

      Reply
  3. Benjamin Rutledge says:
    Oct 5, 2017 at 12:29 pm

    Is it possible to implement this only on mobile? My theme has a nice animated search function on desktop, but only a toggle to show/hide search box in place of my logo on mobile.

    Reply
  4. Beth Terry says:
    Mar 15, 2017 at 6:45 pm

    Hi. Thank you very much for this code. I did have to play around with the positioning to get the search button to appear where I want it, and since I only wanted it to appear in the mobile version, I also added css to the media query for over 800px screens to show the full search field instead of the icon. I got it working great, but I do think it’s a little complicated for folks who just want something to basically plug and play.

    You can view the results here:

    To everyone who doubts, javascript is definitely not needed.

    Reply
    • Beth Terry says:
      Mar 15, 2017 at 6:50 pm

      Also, I want to add that I am using a Twenty Twelve child theme, which comes with the HTML4 search code. Adding the HTML5 support to the functions.php did not fix it, so I copied and pasted the HTML5 search code that you posted above into my theme header where I wanted to search box to be.

      Reply
  5. Emily G says:
    Jan 24, 2017 at 12:29 pm

    Hi there – implementing this on a website and would like to use FontAwesome instead of an image. I cannot get the icon to show yup, however. Do you have any tips? I am adding the font and icon font-family: FontAwesome;
    content: “\f002″; to the .search-form input[type=”search”]

    Thanks!

    Reply
    • Bradley says:
      Feb 2, 2017 at 1:58 pm

      Try this:
      font: normal normal normal 1em/1 FontAwesome;

      Reply
  6. Steve says:
    Jan 13, 2017 at 11:40 pm

    I was so hoping this would work for me. I pasted in the code in the Additional CSS area of my theme (twentytwelvechild), added the search-icon.png to my theme folder using FTM and added add_theme_support(‘html5’, array(‘search-form’)); to my theme’s functions.php file. I see no change and wonder what I have missed. I hope someone can offer me a clue. thank you.

    Reply
  7. Harmandeep Singh says:
    Nov 24, 2016 at 4:54 am

    Its not working.

    Reply
  8. Crowd says:
    Mar 7, 2016 at 10:50 am

    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)?

    Reply
    • Marimar says:
      Sep 19, 2016 at 9:02 pm

      Align the text to the right

      text-align: right;

      It slides to the other side.

      Reply
  9. Tony López says:
    Dec 30, 2015 at 7:33 pm

    Thanks! It work perfectly.

    Reply
  10. Cato says:
    Dec 3, 2015 at 6:10 pm

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

    Reply
  11. Cato says:
    Dec 3, 2015 at 5:39 pm

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

    Reply
    • WPBeginner Support says:
      Dec 4, 2015 at 8:34 am

      Instead of JS, this technique uses CSS.

      Reply
      • SiRetu says:
        Sep 28, 2016 at 1:32 am

        Thanks for the code… Is this responsive? I mean, I want the search field is fully showed when in mobile. Is it possible?

        Reply
  12. Panfi says:
    Dec 3, 2015 at 2:18 am

    Not working for me and wonder why :(

    Reply
  13. Cassy says:
    Dec 3, 2015 at 2:08 am

    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.

    Reply
  14. Sohan says:
    Nov 19, 2015 at 8:09 am

    It works!
    Thank you soooooooooooooo much!

    Reply
  15. Anur says:
    Apr 22, 2015 at 2:10 pm

    I dont think this works on Genesis

    Reply
    • Cassy says:
      Dec 3, 2015 at 2:06 am

      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.

      Reply
      • Laura says:
        May 2, 2016 at 12:51 pm

        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!

        Reply
  16. Maria says:
    May 3, 2014 at 2:37 am

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

    Reply
    • Anur says:
      May 11, 2015 at 2:37 am

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

      Reply
  17. Roy says:
    May 2, 2014 at 12:36 am

    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!

    Reply
  18. Joshua Farr says:
    Feb 25, 2014 at 2:11 pm

    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!
    -Josh

    Reply
    • WPBeginner Support says:
      Feb 25, 2014 at 3:54 pm

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

      Reply
  19. Rajeesh Nair says:
    Nov 13, 2013 at 2:07 am

    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!

    Reply
    • WPBeginner Support says:
      Nov 13, 2013 at 6:48 pm

      Take a look at our guide on how to add Google search in WordPress.

      Reply
  20. adolf witzeling says:
    Nov 12, 2013 at 12:14 pm

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

    Reply
  21. alexisnicholson says:
    Nov 12, 2013 at 10:23 am

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

    Codingbrains

    Reply
  22. Shahraar Khan says:
    Nov 12, 2013 at 2:04 am

    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?

    Reply
  23. Susan Silver says:
    Nov 11, 2013 at 3:14 pm

    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.

    Reply
    • WPBeginner Support says:
      Nov 11, 2013 at 6:32 pm

      Actually we have, checkout how to add a slide panel menu in WordPress.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
RafflePress - WordPress Giveaway and Contest Plugin
RafflePress
Giveaway and Contest Plugin for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
ProfilePress
ProfilePress Coupon
Get 20% OFF on ProfilePress WordPress ultimate user and profile plugin.
All in One SEO
All in One SEO Coupon
Get 50% off All in One SEO, the #1 WordPress SEO plugin. Great for beginners and advanced users.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.