• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WPbasics - A beginner's resource for WordPress

  • Blog
    • Tutorials
    • Articles
    • Showcase
    • Themes
    • Plugins
  • Recommended Hosts
  • About
  • Contact Us
Full width search form on top of the header

Full width search form on top of the header

Last updated on July 10, 2019 2 Comments

In this tutorial I will show you how to add a full width search form on top of the header using the Genesis Framework.  I will be using a modified version of the Genesis Sample theme.  The theme can be found here.  This tutorial is designed for the modified version of the Genesis Sample Theme.  To get this code to work on other themes, some modifications will be required.  With that out of the way, let’s continue with this tutorial.

At the end of this tutorial, you will have a search form that looks like this;

Full width search form

I will be using Font Awesome for the x and magnifying glass in this tutorial.  In order for this tutorial to work, you have to install Font Awesome.  The easiest way to to it is to install a plugin called  Better Font Awesome you can find the plugin here.

Now that we have Font Awesome installed, let’s get started!!

Step 1

The first thing that we need to do is to register a widget area for our Search Form.  To do that just add this code to the functions.php file

// Search Form
// Register Search widget area
function wpb_register_search() {
	genesis_register_sidebar( array(
		'id'            => 'search',
		'name'          => __( 'Search', 'genesis sample' ),
		'description'   => __( 'This is the Search Widget area', 'genesis sample' ),
		'before_widget' => '<div class="wrap search">',
		'after_widget'  => '</div>',
	) );
}
add_action( 'widgets_init', 'wpb_register_search' );

Step 2

The next thing that we need to do is to add some code so that our form displays on our web page.  Go ahead and add the following code to the functions.php file

//Display the Search Area
function wpb_display_search() {
	genesis_widget_area ( 'search', array(
		'before' => '<div id="search-form-container">',
		'after'  => '</div><button type="submit" class="icon-search"><i class="mglass fa fa-search"></i></button>',));
}
add_action( 'genesis_header','wpb_display_search',9 );

Step 3

We will be using some jQuery to make our search form appear and disappear.  So we need to enqueue a JavaScript file.  We will create the Javascript file shortly.  We will also be modifying the default placeholder in our search form.  To do this, go ahead and add the following code to the functions.php file

//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'search_bar_script' );
function search_bar_script() {
	wp_enqueue_script( 'search_bar', get_bloginfo( 'stylesheet_directory' ) . '/js/search-bar.js', array( 'jquery' ), '1.0.0' );
}
//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
	return esc_attr( 'START TYPING TO SEARCH...') ;
}

Step 4

That’s it for the functions.php file.  The next thing that we need to do is create a file called search-bar.js in our js folder.

Place the following code inside the search-bar.js file

jQuery(document).ready(function( $ ) {
    $(".mglass").click(function() {
        $("#search-form-container").toggle( );
        $(".search-form-label:first").focus();
        $(".fa-search").toggleClass("fa-times");
    });
});

Step 5

Now we need to add some styling to our web page.  Go ahead and add the following code to the style.css file

/*****************************************************************************************/
/* Search Form */
.search .search-form input[type="submit"] {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	width: 1px;
}
#search-form-container {
	background-color: #fff;
	position: absolute;
	width: 100%;
	left: 0;
	display: none;
}
#search-form-container input {
	border: none;
}
.site-header .search-form {
	width: 100%;
	height: 100%;
}
button.icon-search {
	position: relative;
	float: right;
	margin-top: 15px;
	background: transparent;
	color: #333;
	outline: none;
}
.fa-search,
.fa-times {
	font-size: 25px!important;
	line-height: 1;
}
.fa-times {
	padding-right: 4px;
}
.fa-search:hover,
.fa-times:hover {
	color: #999;
}
input:focus::placeholder { color: #999; }

Step 6

The final step is to place a search widget in the Search Widget Area.

That’s it.  You should now have a working full width search bar.

Let me know how things worked out for you.

Tagged With: Font Awesome, jQuery, Sample Theme, Search Bar

Reader Interactions

Comments

  1. Isaac NG says

    March 4, 2018 at 11:30 am

    Great!!!

    This is just what I need for my custom child theme, thank you for sharing this wonderful code.

    But, the problem is presented in the mobile version

    Do you have the code for Media Queries? That would be wonderful

    Thank you very much!!!

    Reply
  2. Daniel says

    May 4, 2020 at 5:09 am

    Do you have an update on this, does not seem to work with latest, 3.3.0

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

Search this site

Popular Posts

  • How to copy a live WordPress site to a local host | Duplicator
  • How to add a jQuery UI Accordion to WordPress
  • How to copy a live WordPress site to a localhost
  • How to Use FileZilla | FTP Client
  • How to Create a Localhost with local by Flywheel

Recent Posts

  • How to Install a MailChimp Popup in WordPress
  • Googles reCaptcha slow mobile site
  • Check if your site is indexed by Search Engines
  • ACF Blocks | Gutenberg
  • ACF Blocks for Gutenberg | Introducing ACF 5.8
SEE MORE POSTS

Footer

Site Links

  • Affiliate Disclosure

Contact

  • Email
  • Twitter
  • Facebook

About WPbasics

WPbasics was created to assist WordPress Beginners. This site provides tutorial, reviews, and access to deals on products used by WordPress users.

Copyright © 2022 · WPbasics ·

Enter your name and email and get the weekly newsletter... it's FREE!
Signup today and be the first to get notified on new updates
Your information will *never* be shared or sold to a 3rd party.