If you're a developer like me, you'd know that search forms can be boring sometimes. Today, I'll show you how to spice it up a bit, make it cool and save some space while doing it. Let's get started!
Expanding Search Form Wordpress Markup:
First, you'll need to call (if you haven't already) the search form in your wordpress theme. You can do so by adding this code where you want it to show.
PHP:
<?php get_search_form(); ?>This will call the template file called searchform.php which should have something like this inside:
PHP:
<div class="form">
<span class="toggle"></span>
<form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">
<input type="text" placeholder="Search" id="s" name="s" value="">
<input type="submit" value="" id="searchsubmit">
</form>
</div>We'll be using that code markup for our tutorial. Now, let get started with styling the form. I've used a combination of dark #333333and light #e14d43 colors, but you can choose any combination you want since it's all CSS. the only image we're using is the search icon, which if you want, you can remove and add text instead.
Expanding Search Form HTML Markup
It's pretty much the same as above, we simply remove the PHP code and replace it with a plain url.
PHP:
<div class="form">
<span class="toggle"></span>
<form role="search" method="get" id="searchform" action="http://youtsite.net">
<input type="text" placeholder="Search" id="s" name="s" value="">
<input type="submit" value="" id="searchsubmit">
</form>
</div>Expanding Search Form CSS3
I've added a little comment next to the stuff that may require explaining for beginners.
This one is for our visible button, the dark one. Here, you can change the background color #333, as well as the icon.
Code:
.toggle {
background: url("img/s-icon.png") no-repeat scroll center center #333333;
border: medium none;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 40px;
position: absolute;
right: 0;
width: 50px;
}This is the style for the search form, it's currently hidden.
Code:
#searchform {
float: right;
height: 40px;
margin: 0;
opacity: 0;
padding: 0;
visibility: hidden; /** Hide our form, for now. **/
width: 10px; /** The current width is set to 10px, when we'll hover on the form, it'll expand to 250px. **/
-webkit-transition: all 0.2s ease-in-out; /** Transitions: increase the 0.2s to slow (1s for example) the fading/sliding effect. **/;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}This is where the expanding happens. When you hover on the form, the styles here will over the ones above. Therefore, expanding it from 10px to 250px and from a hidden state, to visible.
Code:
.form:hover #searchform {
display: block;
opacity: 1;
visibility: visible; /** Show our form. **/
width: 250px; /** This is the new of the form, expanding from 10px. **/
-webkit-transition: all 0.2s ease-in-out; /** Transitions: increase the 0.2s to slow (1s for example) the fading/sliding effect. **/;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}These 2 last classes are for the input field, where you type your search query. And the submit button, where you click to submit your search. Same deal as before, you can change the icon, background, font, size...etc here.
Code:
#searchform #s {
background: none repeat scroll 0 0 #E14D43;
border: medium none;
color: #FFFFFF;
float: right;
font-family: helvetica,verdana,arial,sans-serif;
font-size: 12px;
height: 100%;
padding: 0 15px;
outline: none;
width: 100%;
}
#searchform #searchsubmit {
background: url("img/s-icon.png") no-repeat scroll center center #c6473f;
border: medium none;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 40px;
position: absolute;
right: 0;
width: 50px;
}Check out the live demo, download the source files if need and let me know how it goes. If you run into any difficulties, drop me a comment and I'll help you out.
PS: You'll most likely gonna have to change a few CSS values to fit your own theme, but it shouldn't be that hard.
Live Demo | Download Source
Last edited:
