Enter your keyword

How To Make a Cool WordPress Search Bar

How To Make a Cool WordPress Search Bar

Ever wanted to jazz up the default search bar in WordPress? Today I’ll show you how to make a search bar just like mine. My search bar is created by the WordPress search functionality, but I’ve styled it completely separately from the widget area in my WordPress dashboard. Therefore, if you have the WordPress default search widget (or any search function) activated, you’re going to want to deactivate it just to avoid duplicates. Note: nothing will go wrong with your site if you don’t deactivate it, you’ll just end up with duplicate content. An alternative to deleting it is to just alter the style of the search bar you’ve already got installed — if you’d like to do this, apply the various CSS customizations I discuss below to the elements currently styling your search function. You can figure out what they are by examining them in Firebug

First, figure out where on your page you want your new search bar to appear. My sidebars here are completely coded in custom_functions.php — there is no widget area activated. If you do want to use a sidebar widget, you are going to need one that allows php functionality. The easiest way is to figure out where you want to put the search funciton, find a hook that corresponds to that area, and place it there in Open Hook.

If you’re using Open Hook, paste this code into the area for the hook you want to use, and make sure that php is enabled.

SEARCH



This is the code that will tell the browser what information to fetch. We still need to tell it how to appear, though. So add this styling to your custom.css fle:


/* sidebar search form */

#searchsubmit {
background:url(URLOFMAGNIFYINGGLASSHERE.png) no-repeat scroll 0 0;
border:medium none;
height:20px;
position:absolute;
right:10px;
text-indent:-9999px;
top:10px;
width:20px;
padding:0px;
}

#searchform {
x-system-font:none;
font-size:14px;
margin:3px;
position:relative;
overflow:hidden;
font-variant:normal;
font-weight:normal;
line-height:normal;
padding:5px;
width:210px;
}

.sidebar h3 {
-x-system-font:none;
background:url(URLOFGRADIENTIMAGEHERE.COM/PHOTONAME.png);
font-color:#FFFFFF;
font-size:14px;
height:29px;
line-height:29px;
margin:0 0 2px 0;
overflow:hidden;
padding:0;
text-align:center;
width:230px;
}

.sidebar h3 {
color:#ffffff;
}

My heading is created by calling up a white font against a gradient background. If you’d like to use the same configuration, you can right-click on the gradient picture and upload it to your server. Or, you can change the font color to whatever color you want, or you can make your own gradient image (or any other kind of image) instead. Please note that you will also need the image of the magnifying glass — you can either right-click on my image to save it to your desktop and then upload it to your own site via FTP, or you can cruise over to a site like deviantART and pick out an icon that you like better. Either way, you need to ensure that the url is correct and pointing to the right place in your code.

You can also change things like the thickness of the box or the size of the input form. Play around with the CSS until you get it to look how you want!

Comments (2)

  1. ryan
    Apr 14, 2010

    Anna, I’ve created a search box, but when I type text int he box it also appears behind my graphic. Meaning once the text takes up the box it can be seen behind the graphic. How can I fix that?

  2. Apr 14, 2010

    Hi Ryan:

    You probably need to reposition the graphic in the search bar so that it’s further away. Do you have a link? I can give you better directions if I can see the problem that you’re having.

Post a Comment

Your email address will not be published.