WordPress Custom Search Box

WordPress has a search box form by default, but it has the code itself. In this tutorial we will talk about custom search box for WordPress theme.

Go to your theme folder and create searchform.php. WordPress will detect the file and will replace your search form with the default one. Open the file and add below code inside the file.

if (!defined('ABSPATH')) {
    exit;
}
?>
<div class="search-box-form">
    <form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url("/")); ?>">
        <input type="search" placeholder="<?php esc_attr_e('Search', 'text-domain') ?>" class="search-field" value="<?php echo esc_attr(get_search_query()); ?>" name="s" />
        <button type="submit" tabindex="0" class="search-submit btn btn-default"><?php esc_attr_e('Search', 'text-domain') ?></button>
    </form>
</div>

This code will tell the WordPress how the search box form code will be. Now, you can call the code by calling get_search_form() function where you need.

Shopping Cart