Blog Post: Custom Search Bar Addition

Red Deer & Blackfalds Web Design Writes:

Using a Search Bar on a website is fairly common practice these days, and knowing how to insert a functional search bar into a custom location on your WordPress Website is a great way to increase your user experience and add a custom level of expertise to your website. This search bar needs to be able to grab all the data from your site and display it on a page quickly and efficiently, as well as needs to populate this page based on the saturation of that keyword to allow on the individual post/page.

The following bit of code is a quick and easy piece you can add to any existing (or custom) .php template that your website functions off of:

<div class=”homepage-search” align=”center”>
<form role=”search” method=”get” id=”searchform” class=”searchform” action=”<?php esc_url( home_url( ‘/’ ) ); ?>”>
<div>
<label class=”screen-reader-text” for=”s”><?php _x( ‘Search for:’, ‘label’ ); ?></label>
<input type=”text” value=”<?php echo get_search_query(); ?>” name=”s” id=”s” />
<input type=”submit” id=”searchsubmit” value=”Search For Keyword” />
</div>
</form>
</div>

This will produce a search bar just like this one:

 

*Note: this will appear very generic initially, but is (as always) customizable with with CSS

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)