How To Add Search Box In WordPress Theme With Custom Form?
September 23rd, 2016 | by Ravi Chahar || Leave a comment |
The most important thing is to provide the best experience to your readers on your blog. They should be able to search for their requirements on your blog.
For which, you have to add search box in WordPress. It can be done by adding the search form in the WordPress theme.
When someone visits your website and try to find anything then he/she searches for the search box to enter the queries. If your theme doesn’t have the search box then how would anyone search your website?
To fix this, I am going to provide you the code using which you can add search box in WordPress theme with a custom form.
You Can Add Search Box In WordPress Using Default WordPress Function.
There is a simple code which can be used to show the search box anywhere in your WordPress theme. You just have to put that code in the file.
If you want to show the search box on the blog page then add the code in the index.php file. If you add the search box on the single pages then add it in single.php file.
Here is the code.
It will show the default search form wherever you place this code in the theme files. If you know the WordPress theme file structure then it won’t be a problem.
How To Add Search Box In WordPress Theme To Use From The Widget Area?
The above code would show the search box on the place where you add the code in the theme files. It would be hard for a non-tech savvy person to handle it.
There should be search form whose location can be chosen from the WordPress admin panel. I am going to let you know about it.
There are some steps to take.
Step 1:- Create a new file in the Theme folder with the name “searchform.php”. In this file, you have to create your own custom search form.
<form role=”search” method=”get” id=”searchform” action=” <?php echo home_url( ‘/’ ); ?>”>
<label class=”screen-reader-text” for=”s”></label>
<input type=”text” value=”” name=”s” id=”s” placeholder=”<?php the_search_query();?>” />
<input type=”submit” id=”searchsubmit” value=”Search” />
</form>
</div>
The above code would create a search form and would work when you fill the queries.
Step 2:- Now you have to add the code which would handle the appearance of the search results. Create a new file in the theme folder with the name “search.php”.
This code would differ according to every theme. Every developer has his/her own style of coding and every WordPress theme is different.
Let me show you an example.
get_header(); ?>
<div class=”main-column”>
<?php
if (have_posts()) : ?>
<h2>Search results for: <?php the_search_query(); ?></h2>
<?php
while (have_posts()) : the_post();
get_template_part(‘content’, get_post_format());
endwhile;
else :
echo ‘<p>No content found</p>’;
endif;
?>
</div>
<?php get_footer();?>
This code is showing the same appearance as used for the all the pages of your theme. You can use the code of your index.php file.
The only thing to change is the WordPress loop.
if (have_posts()) : ?>
<h2>Search results for: <?php the_search_query(); ?></h2>
<?php
while (have_posts()) : the_post();
get_template_part(‘content’, get_post_format());
endwhile;
else :
echo ‘<p>No content found</p>’;
endif;
?>
This is an example of only the loop. You can change this loop according to the theme you want to develop. As I have mentioned above that it would be great if you use the same structure as of the index.php file and change the loop for showing the search results.
The above code consists the HTML elements and tags to target for the designing purpose using CSS.
You can design the search box using the IDs and class given in the search form. Just target the HTML elements and choose the background color and more.
Isn’t That Easy To Add Search Box In WordPress Theme?
To create a custom form for the search box, you have to create the “searchform.php” file. This file would show a search box in your WordPress admin panel.
You would be able to pick up the search box to add in any widget area. If you have added the sidebar for your WordPress theme then you can show the search box in the sidebar.
You may have seen that on many websites, the search box is added in the footer area. If you have created the footer widgets for your theme then just pick up the search box and add it in the footer.
The only complication is the structure of the page. You should choose the basic structure shown for all other pages.
