How To Make a WordPress Custom Search Box Using CSS

In this article I am going to show you how to make a wordpress custom search box using CSS. I often find that the search form on a majority of CMS websites tends to look kind of repelling. I don’t know what it is, but I really don’t like the look of any default search boxes.

As you design more and more websites you seem to get a lot more pickier about how things are displayed and this is one of the things that I am not too keen on.

It’s even worse when you have these awesome icons and subscribe widgets, yet you have this gross default search box which kind of makes the website look odd, I think every detail counts. So it’s time to learn how to customize your website search bar using some CSS code.

This tutorial is aimed towards WordPress search boxes, but you could use this CSS for any type of input forms.

You should already have a basic understanding of Cascading Style Sheets (CSS) before trying this tutorial.

Refresh your Memory

To refresh your memory, here is a picture of the not so good looking search bar.

How to Customize Your Search Bar

As you can see it’s very basic and not very attractive, but I am going to show you how we are going to change this into something more like this:

WordPress Custom Search Box

Using a transition effect to expand the box when clicked.

Step 1: Modifications

In a majority of search bars you may notice the “Enter your search term here” inside the input area. To add this text in your own WordPress search box you will need to add some code to your searchform.php file, which is located in your WordPress theme files.

Once you have located your search form area there should be something similar to the line below.


&lt;input type="text" value="<?php get_search_query(); ?>" name="s" id="s" /&gt;

We are going to replace this line of code with the following:

&lt;input id="s" type="text" name="s" onblur="if (this.value == '')
 {this.value = 'Enter your Search Term here';}" onfocus="if 
(this.value == 'Enter your Search Term here')
 {this.value = '';}" value="Enter your Search Term here"&gt;

We are only replacing the one line, do NOT replace your form code or your submit button.

The whole thing together should look something similar to this, depending on your theme.

&lt;form method="get" id="searchform" action="<?php echo home_url( '/' ); ?>"&gt;
	&lt;div&gt;
	&lt;input id="s" type="text" name="s" onblur="if (this.value == '') 
{this.value = 'Enter your Search Term here';}" onfocus="if
 (this.value = 'Enter your Search Term here')
 {this.value = '';}" value="Enter your Search Term here"&gt;
	&lt;input type="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'nest' ); ?>" /&gt;
	&lt;/div&gt;
&lt;/form&gt;

If it does, we are on the right track. I am not going to explain each and every single element, but the code we added basically inputs the word “enter your search term here” and assigns an id of “s” to your search bar which we will be referring to in our CSS document.

Step 2: Styling the Search Bar

Now I assume that you want your search bar to correspond with your own website colours. I am going to show you how I styled it for my website and you can get creative and style it how you want later on, but for the purpose of this tutorial I’ll use the CSS that I am currently using.Now there should already be some CSS for the current search bar which we will leave how it is. It should have references like so, if it doesn’t add them in.

input[type="text"], input[type="password"], textarea {

        background: #f9f9f9;
	border: 1px solid #cccccc;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	padding: 2px;
}

This code basically gives your search box a shadow, border and a background color.

Below is the CSS for the id of “S” which we added in the searchform.php file in step 1. Go ahead and add this to your style sheet.

#s {
color: #999999;
font-family: Arial, sans-serif; 
font-size: 13px; 
margin: 0 -31px 0 0; 
padding: 10px 30px 10px 8px;
text-transform: lowercase; 
width: 200px;

transition-duration: 400ms;
transition-property: width, background;
transition-timing-function: ease; 

/* Safari and Chrome */
-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease; 

/* Opera */ 
-o-transition-duration:400ms;
-o-transition-property: width, background;
-o-transition-timing-function: ease; 


} 

You can make changes to the font size and width if you need too.

When you click on the search bar, it will expand the width and this effect comes from the transition property which is used in the CSS. The width you set it to when it expands comes from the code below, which you can adjust the size too, if necessary.


#s:focus { width: 300px; } 

Simple as that..

Step 3: Styling The Submit Button

There should already be an ID assigned to the submit button, In my case it’s “searchsubmit”. You can find out what it is by checking in the searchform.php file. If there isn’t an ID, add id=”searchsubmit” to your code.

This is the CSS I have used for my submit button.


#searchsubmit {
text-indent: -9999px;
background-image: url('images/searchsubmit.png'); 
border: medium none;
height: 23px;
width: 21px; 
background-color: white; 

}

The text-indent is to move the term “search” off the screen and the rest is pretty self explanatory.

I made a little magnifying glass image in photoshop with a width of 21px and height of 23px using the custom shape tool. Which has a preset of a magnifying glass. You can add your own colours if you wish or a different image, its totally up to you.

Now you know how to customize your search bar using CSS. If you run into any problems just let me know in the comments and I will be more than happy to assist you.

Please leave your feedback on the tutorial and let me know how it worked for you. Good Luck with your WordPress custom search box.

Author: Jake

Share This Post On

9 Comments

  1. Thank you so much for this tutorial! Just what I needed. One question though, when I click into the Search bar, is there a way for the text (which I have set as ‘Search…’) to be cleared? Currently I have to manually erase the text before inputting my search.

    Thanks again!

    Post a Reply
    • Hey craZy, it shouldn’t be doing that. The text should disappear when you click in. Which browser are you viewing it in? Send me the link and i’ll have a quick look.

      Post a Reply
      • Hey Jake. I’m using Chrome, however it’s no longer a problem. I’m not sure how it exactly happened but after changing some things around to my preference, it just started working somehow. Nonetheless, thank you for your response and again for this great guide. :]

        Post a Reply
        • Oh ok thats good. I’m glad it worked out for you 🙂 have a good day.

          Post a Reply
          • Hi Jake,
            I am using a wordpress search bar in my site . Its searching on basis of the keywords. I want it to search on the basis of post titles. Is ther any way to do that ? Can you help me over this …..

      • I know this is an old post but the reason is you have 2 equal signs in your code above:
        (this.value == ‘Enter your Search Term here’)

        I removed one of the equal signs and it works fine. You might want to edit that when you get a chance.

        Post a Reply
        • Hi Nate, thanks for pointing that out. I’m going to change it right now 🙂

          Post a Reply
  2. Hi jake,
    Mine is a wordpress website, I used the wordpress search bar. Which perform the search on basis of keywords. but I want it in the basis of post title. That means the search bar must search only the post titles, is there a way? Can you help me out of this

    Post a Reply
    • Hi Krish,

      Sorry for the late reply, I’m not entirely sure about that I thought the search worked based on your title tags. Why don’t you add the search terms you want in the tags section of each post? Let me know if you were able to get this resolved.

      Thanks,

      Post a Reply

Submit a Comment

Your email address will not be published. Required fields are marked *