Are you using WordPress and Timber to build a site? Need to replace the default search form? Here’s how.

Step 1: searchform.php

Create a file called searchform.php in your theme and put this in it:

$context = Timber::get_context();
$site = new TimberSite();
Timber::render( 'searchform.twig', $context );

$site = new TimberSite(); allows you to get the home URL in the twig file.

Step 2: searchform.twig

In the /templates directory of your theme create a file named searchform.twig and put the search form markup in it. Below is the markup for duplicating the default WordPress search form but this is where you’ll build your custom form.

<form role="search" method="get" id="searchform" class="searchform" action="{{site.link}}">
  <div>
    <label class="screen-reader-text" for="s">Search for:</label>
    <input type="text" value="{{ function('get_search_query') }}" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
  </div>
</form>

Here’s a handy resource with tips on how to customize the search form. Customize away!