How to create Custom Search Form in WordPress

Most of the WordPress websites contains a Search Form. It is more beneficial in both sides. Because users can easily get into what they are looking for. When creating a Search Form as per the designers aspect and the design, there were various designs for Search Forms available. Have you ever wondered how to show particular search form design in WordPress. I have seen that developers has integrated Search Forms into the WordPress. But here we are going to talk about the best way to do so. Nothing to worry anymore how to do that and here we go.

Just create the page called searchform.php inside your theme folder. First just add your HTML code to the page and then we can make it to the WordPress. Here is my code for this example.

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url(‘/’) ?>">
    <div class="rw-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <div class="input-group">
                    <input type="text" class="form-control" id="search" name="s" value="<?php the_search_query(); ?>" placeholder="Search for…">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!— /input–group —>
            </div><!— /.col–lg–6 —>
        </div><!— /.row —>
    </div>
</form>

role – Add role to the form. Role is search.

method – Method should be GET. It is defined by the WordPress.

id – This is not compulsory. You can make it your own.

class – It is better to have a class for Search Form.

Note: Having both the ID and Class same name (searchform) allows any Plugin to Hook into the Search Form where needed.

action – Action is compulsory and it should be the URL to the Home Page. home_url(‘/’) is a WordPress function returns Home path URL.

name – Name should always be ‘s’. WordPress use this for the ‘loop’. You can use any value here except ‘s’ but it is better to use ‘s’.

value – Value is set to the last search value. the_search_query() returns the last searched value.

That is all and other all things according to your own.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *