WordPress Search Button Inline after search box

The following tutorial explains how to make the WordPress search button inline after the search box in your sidebar. If your like me, you'd probably rather have the search button next to the search box rather than under the search box. However, by default, the sidebar widget employs a break between the search form and search button. This is relatively easy to fix as I explain below.

How to Make WordPress Search Button Inline

1. Using an ftp client, navigate to your WordPress wp-includes directory and locate the widgets.php file
2. Using a text or code editor, open the widgets.php file and find the following code:

   <?php echo $before_widget; ?>
   <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
   <div>
   <input type="text" name="s" id="s" size="15" /><br />
   <input type="submit" value="<?php echo attribute_escape(__('Search')); ?>" />
   </div>
   </form>

3. Remove the break in the code so it looks like the following:

   <?php echo $before_widget; ?>
   <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
   <div>
   <input type="text" name="s" id="s" size="15" />
   <input type="submit" value="<?php echo attribute_escape(__('Search')); ?>" />
   </div>
   </form>

4. upload the fixed wigets.php to your wp-includes directory replacing the original.

Correcting CSS to allow the search form and button to fit on the same line

1. Login to your WordPress admin panel and navigate to Design -> Theme Editor.
2. From the Theme Editor, select (Stylesheet) Style.css
3. Find the following section of code:

   #sidebar #searchform #s {
   width: 108px;
   padding: 2px;
   }

4. Change the code to the following:

   #sidebar #searchform #s {
   width: 90px;
   padding: 1px;
   }

   Were basically just changing the width of the searchform to allow the searchform and searchsubmit to appear on one line.

5. Click Update File and go view your site.