How to add a search form in nav menu in Genesis

This tutorial provides the steps to add a search form with a Font Awesome’s SVG search icon submit button as the last nav menu item in Genesis.

While the tutorial has been written for Genesis Sample 2.8.0, it should work with a few adjustments in any Genesis theme.

Step 1

If you have not already, go to Appearance > Menus > Manage Locations.

Assign a menu in the Header Menu location.

If your theme does not display a menu assigned to the primary menu location, and instead uses say, a Navigation Menu widget, see the note at the end of Step 2.

Step 2

Add the following in child theme’s functions.php:

add_filter( 'wp_nav_menu_items', 'custom_menu_extras', 10, 2 );
/**
 * Filter menu items, appending a a search icon at the end.
 *
 * @param string   $menu HTML string of list items.
 * @param stdClass $args Menu arguments.
 *
 * @return string Amended HTML string of list items.
 */
function custom_menu_extras( $menu, $args ) {

	if ( 'primary' !== $args->theme_location ) {
		return $menu;
	}

	$menu .= '<li class="menu-item">' . get_search_form( false ) . '</li>';

	return $menu;

}

add_filter( 'genesis_markup_search-form-submit_open', 'custom_search_form_submit' );
/**
 * Change Search Form submit button markup.
 *
 * @return string Modified HTML for search forms' submit button.
 */
function custom_search_form_submit() {

	$search_button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'genesis' ) );

	$searchicon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="search-icon"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>';

	return sprintf( '<button type="submit" class="search-form-submit" aria-label="Search">%s<span class="screen-reader-text">%s</span></button>', $searchicon, $search_button_text );

}

If your theme does not display a menu assigned to the primary menu location, and instead uses say, a Navigation Menu widget, replace

if ( 'primary' !== $args->theme_location ) {

with

if ( 'primary-navigation' !== $args->menu->slug ) {

where primary-navigation is the slug of your menu.

Step 3

Add the following in child theme’s style.css:

.search-form {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.menu-item .search-form {
	margin-top: 20px;
	max-width: 300px;
}

@media only screen and (min-width: 960px) {

	.menu-item .search-form {
		margin-left: 20px;
		margin-top: 0;
	}

}

.search-form-input {
	padding: 7px;
	font-size: 14px;
}

.search-form-submit {
	border-radius: 0;
	background-color: #ddd;
	padding: 0 10px;
}

.search-icon {
	height: 12px;
	-webkit-transform: rotate(90deg);
	        transform: rotate(90deg);
}

.search-form-submit:hover .search-icon path {
	fill: white;
}

That’s it!

Note:

Here’s how I obtained the value of $searchicon:

a) Downloaded Free Font Awesome icon pack for Web from here.

b) Extracted the zip file and opened fontawesome-free-5.6.3-web/svgs/solid/search.svg inside a text editor.

c) Pasted all the code at http://svg.enshrined.co.uk/ and obtained cleaned SVG code.

Credits:

Thanks to Robin Cornett and Lee Anthony for helping me with the code.