WordPress Search Widget – How to Style It

WordPress widgets offer us a lot of flexibility. By using widgets, we can easily include a variety of functions into different widget areas within our WordPress blog. However, it can sometimes be difficult to figure out how to properly style these widgets.

Here we examine how to flexibly style the native WordPress Search Widget. This is the search widget found in the searchform.php file of the default theme.

Note – If your WordPress theme has a searchform.php file, then your theme search widget will be used.

Native WordPress search widget.

The WordPress Search Widget has several key areas –

1. Widget title – This is the title of the widget that you get to enter in the Appearance >> Widgets menu.
2. Search for text – Fixed “Search for” text shown on the top of the text entry box.
3. Search text entry area – This is where users enter the text they want to search for.
4. Search submit button – This is the search button. Clicking on it will execute a search for all public blog posts and pages containing the search text.

The good news is that all these areas can be easily modified using css. The widget title is often set by your WordPress theme, and controls not just the search widget title, but all other widget titles in the widget area. For reasons of theme consistency, you generally want to leave the widget title alone.

1. Remove Search-For Text

I don’t know about you, but the ‘Search for’ text that appears at the top of the search box is not only repetitive, but also clutters up the space.

To remove it, just enter the code below into your theme style.css file.

.widget_search .screen-reader-text {
	display:none;
}

widget_search is the container name of the entire search widget, and
screen-reader-text is the container name of the ‘Search for’ text area.

If you like the ‘Search for’ text, you can also style it using CSS instead of just removing it.

2. Style Search Text Box

The next step is to style our search widget text box. The code below allows you to define the position and width of your search text box.

.widget_search {
	position:relative;
	background: url("search_widget_image_url.jpg") top left no-repeat;  
	height:60px;
	width:180px;
}

.widget_search #s {
	position:absolute;
	top:30px;
}

Styled WordPress search widget.

First, we set the position of the parent widget area (widget_search) to relative. This will allow us to define positions for our search text box and search submit button relative to the search parent widget.

Here, you can also set a background image for your search widget. To make the background show properly, remember to define a width and height for the widget.

Next, we position our text box relative to its parent widget. In the example above, we place our text box 30 pixels down from its parent widget. This gives enough space for our search widget title to display properly.

3. Style Search Button

The most complex part of styling our search widget is the search button.

Here, we want to replace the regular button with a glossy button. We also want to replace the text with a standard magnifying-glass search graphic.

The first step is to create some search button graphics. Here are some glossy search button graphics I created with Photoshop CS4. The magnifying glass logo used is created by Derferman. It is listed as public domain on Wikimedia. Feel free to use any of the search buttons below –

Now that we have the glossy button graphics, we can apply it to our search button with the following CSS code –

.widget_search #searchsubmit {
	position:absolute;
	top:5px;
	left:135px;
	width:40px;
	height:40px;
	background: url("images/sbutton2.png") top left no-repeat;  
	border: none; 
}

.widget_search #searchsubmit:hover {
	background: url("images/sbutton2b.png") top left no-repeat;  
	border: none; 
}

Styled WordPress search widget.

Resize the button images above to suit your needs and set the width and height of the #searchsubmit area to fit the size of your button graphic. Also position the button appropriately.

This gives us a nice search widget button that changes color on mouse-over.

4. Remove Search Text

We still have a last problem – the words ‘Search’ still appears on our graphic. Since we already have an appropriate logo, as well as a search title, this text is no longer necessary.

The easiest way to remove this text, is to hook into the get_search_form filter as described by Metacowboy.

// Add to your init function
add_filter('get_search_form', 'my_search_form');

function my_search_form($text) {
     $text = str_replace('value="Search"', 'value=""', $text);
     return $text;
}

5. Congratulations – You Are Done!

Styled WordPress search widget.

Play around with the position of the elements, the background images, as well as the search button graphics to create your very own, personalized, …

WordPress search widget.