Once you’ve created your Search Form you will want to add it to your theme/posts.

As a Shortcode

All Search Forms can be displayed using a shortcode.  Click on `Search & Filter` in your admin sidebar to list all your Search Forms, their shortcodes will also be displayed.

To use shortcodes within your theme (php) files simply call the `do_shortcode` function with the shortcode provided from the admin screen:

<?php echo do_shortcode('[searchandfilter id="1"]'); ?>

As a Widget

Head to `Appearance` -> `Widgets`.  Search & Filter Form will be listed as widget.  You can choose any of the Search forms you have already saved and are published.

Styling Your Search Form

There is currently basic styling applied to the Search Forms generated.  This is to allow your theme to handle its display, however you may need to tweak some of your CSS for better integration.

The default CSS files loaded within the plugin are designed to display the Search Form vertically (ie in a widget area), they can be used horizontally however your CSS will need to be modified in order to achieve this.

All Search Forms have the class .searchandfilter and easily stylable from here.

To style specific search forms you can use the data attribute replacing “1428” with your own Search Form ID:

.searchandfilter[data-sf-form-id="1428"]
{
	//do stuff with this particular search form
}

There are also a bunch of classes and styles applied to inputs and list items – just inspect the HTML to find the ones you need.

Making your search form horizontal

To display your search form horizontal, add the following to you theme’s CSS (this will apply to all search forms):

.searchandfilter > ul > li {
	display: inline-block;
	vertical-align: top;
	padding: 0 20px;
}