How to Edit the Search Bar in WordPress

1. Log into your WordPress dashboard and then navigate to 'Appearance' in the left-hand menu. Click the 'Editor' link under 'Appearance' to load the theme editing screen. Look for a file on the right-hand side called 'searchform.php' and click on its link. Create a file and name it 'searchform.php' and then upload it to your theme if it does not yet exist. The file goes in the following location:/public_html/wp-content/themes/theme-name/Replace 'theme-name' with the name of the theme you use. Sometimes 'public_html' is 'www'.
2. Edit or code the HTML for your 'searchform.php' to match your needs. This file can also include PHP code. Here is an example:




Use the
tag as shown above, including the ID, method and action to make it work correctly. You also must name your text field 's' so it can work with WordPress. Add whatever other HTML code you like, and add ID and class names to tags you need to reference in CSS code.

3. Edit the 'style.css' file using the theme editor screen or edit it on your computer and upload it onto the server under the same directory as 'searchform.php.' Use CSS code in 'style.css' to style the search form. Here is an example:#searchfield {border: 1px solid #ccc; font-style: italic;}The code puts a one-pixel wide, light gray border around the search field and makes its text italic. You can also edit the button or style other text in your 'searchform.php' file.