Making a Sliding Search Box in WordPress

I’ve had a few people ask for the code to create a sliding search box like the one in the header of this site. It’s quite simple, really, and all done with CSS.

By Nathan Ingram   |  October 21, 2011

I’ve had a few people ask for the code to create a sliding search box like the one in the header of this site. It’s quite simple, really, and all done with CSS. The code to accomplish this is below. For those of you using iThemes Builder, which I consider to be the best WordPress theme available, it should work as is. The code should require only minimal modification (if any) for other themes. Just double check the CSS classes on each element to be sure they match what’s below.

In the sample below, the search box expands to the left due to the text-align on the widget area it’s in. That’s how I like it on my site. I just implemented it on a new site in development that has the text-align in the widget area set to center, so the search box expands in both directions at once. It’s a really nice effect. I’ll post the link once that site goes live.

The only thing you’ll need in addition to the code below is the image file for the magnifying class, which should be put in the images folder of your child theme.

← Here is the one I’m using (right click and save-as), or just use your own that’s roughly 20×20 pixels.

This code styles the plain unclicked search box:

[sourcecode language=”css”].widget_search .search-text-box {
-moz-transition: 400ms width ease;
-webkit-transition-duration: 400ms;
-webkit-transition-property: width;
-webkit-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width;
-o-transition-timing-function: ease;
background: url("images/search.png") no-repeat scroll 5px 6px #FFFFFF;
font-size: 0.65em;
height: 30px;
padding: 0 10px 0 30px !important;
width: 55px;
background-color: #FFFFFF;
border: 1px solid #cccccc;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
}[/sourcecode]

This code styles the search box when it’s been clicked:

[sourcecode language=”css”].widget_search .search-text-box:focus {
border: 1px solid #777777;
box-shadow: 0 0 4px 2px #DEDEDE;
font-size: 0.8em;
width: 150px;
}[/sourcecode]

Related posts:

Comments

Leave a Reply