Building a Custom Search Form in WordPress

In this tutorial, we will guide you through the process of building a custom search form in WordPress. By creating your own search form, you can have full control over its design and functionality, and tailor it to fit the specific needs of your website. 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

To begin, we need to create 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 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="Search" value="<?php echo get_search_query(); ?>" name="s" />
    </label>
    <input type="submit" class="search-submit" value="Search" />
</form>
Code language: PHP (php)

This code creates a simple search form with a search input field and a submit button. The home_url('/') function ensures that the search action is directed to the website’s homepage.

Enqueue the Search Form Stylesheet

To apply custom styles to your search form, we’ll create a new stylesheet file. In your child theme’s directory, create a new file and name it searchform.css. 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 custom search form on your website, locate the template file where you want to include the search form. Typically, this would be the search.php file or any other template file where you want the search functionality to be available.

Inside the template file, add the following code snippet:

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

This code will automatically load the searchform.php file we created earlier and display the custom search form on your website.

Styling and Customization

Now that your 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 a custom search form in WordPress. By creating your own search form, you have full control over its appearance and functionality. Feel free to customize it further to meet your specific requirements.

Looking to take your search functionality to the next level? Check out our tutorial on Building an Advanced Custom Search Form in WordPress. This in-depth tutorial will guide you through creating a powerful search form with additional options and parameters.

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