Building an Advanced Custom Search Form in WordPress

In this tutorial, we will walk you through the process of building an advanced custom search form in WordPress. With this enhanced search form, users will have more search options and parameters to refine their search queries. Whether you’re a beginner or a seasoned developer, this tutorial will provide you with the necessary steps to accomplish this task.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Create a New Template File

Start by creating a new template file in your child theme. Open your preferred code editor and navigate to your child theme’s directory. Create a new file and name it searchform.php.

Add HTML Markup

Inside the searchform.php file, add the following HTML markup to create the advanced search form:

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label>
		<span class="screen-reader-text">Search for:</span>
		<input type="search" class="search-field" placeholder="Keyword" value="<?php echo get_search_query(); ?>" name="s" />
	</label>
	<label>
		<span class="screen-reader-text">Search in:</span>
		<select name="post_type">
			<option value="">All</option>
			<option value="post">Posts</option>
			<option value="page">Pages</option>
		</select>
	</label>
	<input type="submit" class="search-submit" value="Search" />
</form>
Code language: PHP (php)

In this code, we’ve added an additional <select> element that allows users to choose between searching for “All” content types, “Posts,” or “Pages.” This gives users the flexibility to narrow down their search results based on specific content types.

Enqueue the Search Form Stylesheet

To style the advanced search form, create a new stylesheet file named searchform.css in your child theme’s directory. Add your desired styles to this file.

Next, enqueue the stylesheet by adding the following code to your child theme’s functions.php file:

function enqueue_search_form_stylesheet() {
    wp_enqueue_style( 'searchform-style', get_stylesheet_directory_uri() . '/searchform.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_search_form_stylesheet' );
Code language: PHP (php)

Display the Custom Search Form

To display the advanced custom search form on your website, locate the template file where you want to include the search form (e.g., search.php or any other template file). Add the following code snippet:

<?php
// Function to modify the search query
function custom_search_filter( $query ) {
	if ( $query->is_search && ! is_admin() && $query->is_main_query() ) {
		$content_type = isset( $_GET['post_type'] ) ? sanitize_text_field( $_GET['post_type'] ) : '';

		if ( ! empty( $content_type ) ) {
			$query->set( 'post_type', $content_type );
		}
	}
}
add_action( 'pre_get_posts', 'custom_search_filter' );
?>

<?php
get_search_form();
Code language: PHP (php)

This code uses the pre_get_posts hook to modify the search query before it is executed. Inside the custom_search_filter function, it checks if the query is a search query and not in the admin area. It then retrieves the selected content type from the search form, sanitizes it, and sets the post_type parameter in the query if a content type is selected.

By using pre_get_posts, the search query is modified in a more appropriate and efficient way, without resorting to the query_posts function.

Feel free to adjust and customize the code to fit your specific needs and backend logic.

Styling and Customization

Now that your advanced custom search form is functional, you can further style and customize it to match your website’s design. Edit the searchform.css file and modify the styles as desired.

That’s it! You have successfully built an advanced custom search form in WordPress. This enhanced search form provides users with more search options, such as filtering by content type. Feel free to customize it further to meet your specific requirements.

Want to start with the basics of building a custom search form in WordPress? Head over to our tutorial on Building a Custom Search Form in WordPress. This tutorial will help you get started with creating a simple search form and provide a foundation for building more advanced search functionalities.

Note: While we have avoided the use of plugins in this tutorial, there are plugins available in the WordPress repository that offer advanced search form customization options, such as “FacetWP” and “SearchWP.” These plugins can provide additional features and functionality if needed.