How to Create a Custom Search Form in WordPress

I have a Love/Hate relationship with WordPress Search Form, I really do. Furthermore, I am already Super Excited to be publishing this post. I have been thinking for a while to write a short article on Creating very own advanced Custom Search Form in WordPress.

To begin with, if you activate default WordPress Theme like Twenty Sixteen or Twenty Seventeen, you can see a simple search form like below screenshot:

Custom Search Form in WordPress

However, sometimes we may want to Create our very own Custom Search Form which looks more advanced and have a better look design than the default one. I had this one client, who wanted a completely different search form instead of the default one that came with the theme. After looking for awhile on codex, I figured it out how this could be done. Don’t worry, we will learn in this article step by step.

Let’s pick any design of the Search Form from CodePen.io and do our business.

For now, We will pick a particle one. i.e. Animated Search Form Created BY Christophe BéghinThis is just a design created with HTML and CSS.


Create Custom Search Form in WordPress

Before we begin, we first need to understand how search form really works in WordPress.

Every Search Form Should:

  • Use GET method in form. i.e <form method="GET">
  • The <input> text field should be named s and you should always include a label as shown below:
    <label for="custom_search">Search <?php echo home_url( '/' ); ?></label>
    <input type="text" name="s" id="custom_search" />

In the above, we added custom_search label. Apart from those, you can add, customize, or modify any fields you want in your form.

ALSO READ  How to Add Zoom effect on Image hover in WordPress

That’s it!! Now our Custom Form looks like this:

<form action="/" method="GET">
   <label for="custom_search">Search in <?php echo home_url( '/' ); ?></label>
   <input type="text" name="s" id="custom_search" value="<?php the_search_query(); ?>" />
</form>

According to Codex, the only parameter in the above code that will be submitted is s with the value of the current search query. You can, however, refine it in multiple ways.

If you haven’t noticed it yet if you search using a keyword on WordPress site, the URL will return as:

http://prabinparajuli.com.np/?s=keyword

Anyway, we’ll first attempt to locate the searchform.php file in either the child theme or the parent one, then load it. If that doesn’t exist the default search form will be displayed instead.


Getting Started

Copy CSS and HTML Codes in Respective Files.

Firstly, Copy the below CSS snippet to your custom.css file of your theme

CSS Code

input[type="text"] {
height: 60px;
font-size: 55px;
display: inline-block;
font-family: "Lato";
font-weight: 100;
border: none;
outline: none;
color: #555;
padding: 3px;
padding-right: 60px;
width: 0px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 3;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}

input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}

input[type="text"]:focus {
width: 700px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type="submit"] {
height: 67px;
width: 63px;
display: inline-block;
color:red;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}

input[type="submit"]:hover {
opacity: 0.8;
}

Copy The Below HTML Snippet in your theme’s template. If you have searchform.php
in your current theme, you can replace with the below code. If you don’t, WordPress will render its default search form. I recommend you to insert the search form code in your searchform.php.

HTML Code

 <form action="" autocomplete="on">
    <input id="search" name="search" type="text" placeholder="What're we looking for ?"><input id="search_submit" value="Rechercher" type="submit">
 </form>

Replace Above HTML Code with the Code Below

<form action="/" method="get">
  <label for="search">Search in <?php echo home_url( '/' ); ?></label>
  <input id="search" name="s" type="text" placeholder="What're we looking for ?"><input id="search_submit" type="submit">
</form>

That’s it. It’s simple as counting Alphabets. If you refresh your page, you will see your custom search form appearing. Input your field on the search form and you will get the result working with charm.

ALSO READ  5 Free WordPress e-books That Really Helps WordPress Beginners To Grow

Wrapping Up

You can always customize the search form as per your wish. Also, you can create as many search form you want on your website. That means you can have multiple search forms on your single site. However, it is not recommended. A search form is used for a better User Interface not to impress visitors with random search designs. You don’t want your regular visitors run away because of this. Do you?

Therefore, it is highly recommended either you create a page template for custom form or replace existing form.

This is how we create custom search form in WordPress. If you encounter any issue setting up the custom search form, comment in the form below.

And if this article helped you in any way, don’t forget to Share. 🙂