You can display a search form anywhere on a WordPress site by including <?php get_search_form(); ?> in the template. Creating a custom search form in WordPress is super easy. Just create a new php file called searchform.php and save it in your theme directory. Then add your form code to the file.
<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<fieldset>
<label for="s" class="screen-reader-text">Search for:</label>
<input type="search" id="s" name="s" placeholder="Enter keywords" required />
<input type="image" id="search submit" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/searchicon.png />
</fieldset>
</form>
<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<fieldset>
<label for="s" class="screen-reader-text">Search for:</label>
<input type="search" id="s" name="s" placeholder="Enter keywords" required />
<input type="image" id="search submit" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/searchicon.png />
</fieldset>
</form>
----------------OR----------------
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
----------------OR----------------
Example-One:
Search form CSS:
form#searchform
{
display:block;
width:255px;
height:20px;
position:absolute;
top:56px;
left:753px;
}
.searchbutton
{
color: #0066ff;
border: 0px solid;
display:block;
width:45px;
height:20px;
background: #d2e4ff;
position:absolute;
top:0px;
left:202px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px;
font-size: 12px;
}
.searchbutton:hover
{
background-color: #0066ff;
color: #ffffff;
font-size: 12px;
}
.searchfield
{
background:url(/images/search-field-shadow.png) top left repeat-x #666666;
color: #eeeeee;
border: 0px solid;
position: absolute;
top:0px;
left:0px;
display:block;
width:200px;
height:20px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
font-size: 12px;
}
searchform.php:
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="searchfield" />
<input type="submit" id="searchsubmit" value="search" class="searchbutton"/>
</form>
Call function:
<?php get_search_form(); ?>
----------------OR----------------
Example-Two: create a separate template: freedom-search.php and paste the below code
<div class="widget freedom-seachform search" rol="search">
<h3 class="widget-title">Search Form</h3>
<form role="search" action="<?php echo site_url('/'); ?>" method="get">
<input type="search" name="s" placeholder="Search: Enter keywords hit enter"/>
<input type="hidden" name="post_type" value="freedom" /> <!-- // hidden 'your_custom_post_type' value -->
<input type="submit" alt="Search" value="Search" />
</form>
</div><!-- .search -->
Load the template part into your template:
Now you can load that file into your template using get_template_part :
<?php get_template_part( 'search', freedom' ); ?>
Post Type Archive template:
To display the search results, WordPress will first look for archive-$posttype.php if you have it. Otherwise it will fall back to index.php. If you happen to use Hybrid Core you can also fall back to archive.php.
