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 replace it with an empty string using Javascript. Put the Javascript below into your theme functions.php file.

<script type="text/javascript">
<!--
function search_widget_onLoad() {
	jQuery('#searchsubmit').val('');	
}
 
if (window.attachEvent) {window.attachEvent('onload', search_widget_onLoad);}
else if (window.addEventListener) {window.addEventListener('load', search_widget_onLoad, false);}
else {document.addEventListener('load', search_widget_onLoad, false);} 
//-->
</script>

Our Javascript function search_widget_onLoad runs once the page finishes loading. We do this by attaching our search_widget_onLoad function to the onLoad event.

Remember to include the jquery Javascript library into your functions.php file.

<?php
add_action('init', init_method);
 
function init_method() {
	wp_enqueue_script('jquery');	
}    
?>

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.

Related Articles

<< Previous Next >>

Multi-Column Widget WordPress Theme

Create Widgets in Your WP Theme Widgets are an extremely powerful feature of WordPress blogs. If you use a widget-ready WP theme, you can add a variety of plug-ins or WordPress-ready features such as Recent Posts, Recent Comments, Calendar, Search, and much more by using the simple drag and drop widget interface within the WordPress dashboard. This...

<< Previous Next >>

WordPress Multi-Column Widgets

Widgets are a powerful and necessary part of a WordPress blog. If you want the flexibility to customize and personalize your blog, it is crucial to pick a WordPress theme that is widget ready. Most of the newer WordPress themes are widget ready, so it will not be too difficult to find a widget ready theme that suits you. I also added some new...

<< Previous Next >>

Add Google Search to Your WordPress Blog

The native WordPress search does not return very relevant results, thus it makes a lot of sense to add Google Search into your WordPress Blog. In addition, Google Search can be easily integrated with Google AdSense. There are a variety of plugins that allow you to integrate Google Search into your WordPress Blog. I have chosen to use the Search API...

<Playback Stop Play >

Multi-Column Widget WordPress Theme

WordPress Multi-Column Widgets

Add Google Search to Your WordPress Blog