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 >>

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 Plugin that was developed by Justin Shreve and Andy Skelton at WordPress. This blog, as well as my ShibaShake website are both using the Search API/Google...

<< Previous Next >>

WordPress Widget System - How it Works

The Widget System is one of the most powerful aspects of a WordPress blog. It allows us to easily customize various regions of our blog without having to do any PHP programming. Here we examine how the WordPress Widgets System works. For an example of the different widget filters and functions in action, check out the Shiba Custom Widgets Plugin. 1. Widget Objects There are two key objects in the Widgets System - a) Sidebars The sidebar is basically a widget container. Sidebars are usually...

<< Previous Next >>

WordPress Widget Theme

I created this theme for my Shiba Widgets Plugin. This is one of my more popular plugins and it has gone a long time without its own theme, so now seemed like a good time to create one. Since it is a widgets plugin, I decided to go with a SteamPunk theme with a background of gears. For more web widget pictures visit my art site. WordPress Widget Theme images were created with Carrara, Photoshop, and 3D-models from Daz 3D. The header and footer of this page will automatically rotate through...

<Playback Stop Play >

Add Google Search to Your WordPress Blog

WordPress Widget System - How it Works

WordPress Widget Theme