Customizing Appearance

There are many built-in features which will allow you to customize the structure and appearance of your search forms.

Custom Form Field HTML

You can insert custom HTML markup in your form fields by using the pre_html and post_html parameters. These parameters insert HTML directly before and after a form field, respectively.


$args['fields'][] = array('type' => 'search',
                          'placeholder' => 'Enter search terms...',
                          'pre_html' => '<div class="row">',
                          'post_html' => '</div>');

In this example, the generated search field would be wrapped in a custom div element with class “row”.

Custom CSS Classes

You can specify custom CSS classes for any form field, as well as for the search for itself by using the
class parameter:

$args['fields'][] = array('type' => 'search',
                          'placeholder' => 'Enter search terms...',
                          'class' => array('myclass', 'anotherclass'));

Custom HTML Blocks

You can also insert blocks of custom HTML markup inside your search form by using the html field type.

Disable HTML Wrappers

By default, form fields are wrapped in outer div elements. You may wish to remove these in order to more easily customize the appearance of your search form. You can do this by setting ‘disable_wrappers’ => true in your form configuration:

$args['form'] = array('disable_wrappers' => true);