Shiba

Adventures in WordPress

  • Home
  • Dog
  • Art
  • Contact
  • WordPress Articles
    • WP Plugins
    • WP Programming
    • WP Admin Panels
    • WP Theme Design
    • WP How-To
    • WP Theme Images
You are here: Home / WordPress Design / Wordpress Search Widget – How to Style It

WordPress Search Widget – How to Style It

by ShibaShake 57 Comments

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 –

red
blue
Search Orange Button

green

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.

Leave a Reply Cancel reply

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

Comments

« Previous 1 … 3 4 5
  1. Nelson says

    December 16, 2020 at 7:46 am

    Tanks master – Fine

    Reply
« Previous 1 … 3 4 5

Recent Posts

  • Screenshot of an example article in code view of a modified Gutenberg editor.How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text
  • Screenshot of the Success, WordPress has been installed page.Migrating Your WordPress Website to Amazon EC2 (AWS)
  • Screenshot of WinSCP for creating a SFTP configuration.How to Set-Up SFTP on Amazon EC2 (AWS)
  • WordPress Gutenberg code view screenshot of this article.How to Prevent Gutenberg Autop from Messing Up Your Code, Shortcodes, and Scripts
  • Screenshot of the Success, WordPress has been installed page.How to Create a WordPress Website on Amazon EC2 (AWS)

Recent Comments

  • Screenshot of the Success, WordPress has been installed page.How to Create a WordPress Website on Amazon EC2 (AWS) (1)
    • Erik
      - Great article. All worked great except for this step:apt install php-mysqlChanging to this fixed it:apt install ...
  • Add Custom Taxonomy Tags to Your WordPress Permalinks (125)
    • Anthony
      - Where does this code go? Like, what exact .php file please?
  • Screenshot of an example article in code view of a modified Gutenberg editor.How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text (1)
    • tom
      - hi,my experience was like the same, but for me as theme developer the "lazy blocks"(https://wordpress.org/plugins/lazy-blocks/) ...
  • WordPress Custom Taxonomy Input Panels (106)
    • Phil T
      - This is unnecessarily confusing. Why declare a variable with the same name as your taxonomy? Why did you choose a taxonomy ...
  • Create Pop-up Windows in Your WordPress Blog with Thickbox (57)
    • Jim Camomile
      - I have used this tutorial several times and it is one of the few simple and effective ways to add popups with dynamic content, ...

Copyright © 2025 · Genesis Skins by ShibaShake · Terms of Service · Privacy Policy ·