HTML 5 Custom Search Form for Custom Post Type

This tutorial includes 2 solutions which enable you to create a custom search form for custom post types.

1. The 1st method filters the default WordPress form conditionally
2. The 2nd method enables you to filter the search results by adding check boxes for each custom post type.

1. Modify Default Search Form

This code enables you to conditionally modify the output of your themes search form for any post type.

The code works in any theme.

If your theme doesn’t include a search form file, this code will filter the default HTML 5 search form, native to WordPress.

This way you can use the default search form widget which includes results for ALL post types and still use another search widget which only displays results for a specific custom post type or any post type.

The above code modifies the search form on single pages of the post type portfolio only. All other search forms will return the default results for ALL post types.

You may notice the styling will vary per theme for the modified form.

Genesis Users

Genesis already includes a custom search form located in genesis > lib > structure > search.php which uses the same filter as the above code, get_search_form.

To create a custom search form in Genesis, you can use the above code or replace the get_search_form filter in the above code with the genesis_search_form filter.

This filter includes 4 parameters you can see on line 47 of genesis > lib > structure > search.php you can use to filter the default output of the search form in genesis child themes.

2. Filter Search Form by CPT

This HTML works in any theme however you may need to add CSS to make it look the way you want depending on your themes default classes.

Notes:

Tested on the Executive Pro child theme by StudioPress.