Adding and styling the wordpress search form

In this tutorial we're going to look at how you can add a WordPress search form to your site, then customise the markup and styling.

A WordPress search form can easily be added using the following function:

get_search_form();

An ideal place to put this would be in one of your page templates. This will then add something like the following depending on the default styling for your theme:

To customise the layout, add a file titled 'searchform.php' in the root of your theme:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
	<div>
		<input type="text" value="" name="s" id="s" placeholder="Search" />
		<input type="submit" id="searchsubmit" value="Search" class="button" />
	</div>
</form>

Now you can modify the markup and classes to suit your needs.

This now gives you the freedom to modify the styling more easily with your custom classes:

  .search  input
  {
	padding:5px 10px;
  }

  .button
  {
	padding:7px 10px;
	background-color:#0ec3de;
	border:0;
	color:#fff;
  }

In this example you should have something that looks a bit more like this (though note there is also likely to be additional styling from your theme):

Sign Up

NEXT: WordPress shortcode menu plugin

Add a WordPress shortcode plugin to your client sites to make managing content even easier!

comments powered by Disqus
Sign Up

Popular Tags

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.