Archived topic
Custom search form in header
5 replies · Started by Daniel on October 24, 2022
Hello!
I used a code snippet I got from this forum to generate a new search form and display it in the hook: generate_after_header
The form is triggered from the magnifying glass icon in the GP menu.
The code I am using is this:
add_action( 'after_setup_theme', function() {
remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
remove_action( 'generate_inside_mobile_header', 'generate_navigation_search' , 1 );
add_action( 'generate_after_header', 'generate_navigation_search' );
});
add_filter( 'generate_navigation_search_output', function($form) {
$form = sprintf('
<form method="get" class="search-form navigation-search" action="%1$s">
<div class="search-form-container grid-container">
<input type="search" class="search-field" placeholder="Introduce aquí la palabra clave de tu búsqueda" value="%2$s" name="s" title="%3$s" />
<input type="hidden" name="post_type" />
<button class="search-submit" aria-label="%1$s"></button>
</div>
</form>',
esc_url( home_url( '/' ) ),
esc_attr( get_search_query() ),
esc_attr_x( 'Search', 'label', 'generatepress' ),
esc_attr__( 'Search', 'submit button', 'generatepress' ),
generate_get_svg_icon( 'search', true )
);
return $form;
});I want to know how to accomplish two things if possible.
One is to display the magnifying glass icon on the search button that is displayed next to the search box and now appears empty.
And the other is that when clicking on the magnifying glass icon in the main navigation I want the form to move from top to bottom with some css transition. I have tried with the height value but it didn't work, is it possible to achieve this somehow?
Thanks!
Hi there,
try changing the snippet to:
add_action( 'after_setup_theme', function() {
remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
remove_action( 'generate_inside_mobile_header', 'generate_navigation_search' , 1 );
add_action( 'generate_after_header', 'generate_navigation_search' );
});
add_filter( 'generate_navigation_search_output', function($form) {
$form = sprintf('
<form method="get" class="search-form navigation-search" action="%1$s">
<div class="search-form-container grid-container">
<input type="search" class="search-field" placeholder="Introduce aquí la palabra clave de tu búsqueda" value="%2$s" name="s" title="%3$s" />
<input type="hidden" name="post_type" />
<button class="search-submit" aria-label="%1$s">%4$s</button>
</div>
</form>',
esc_url( home_url( '/' ) ),
esc_attr( get_search_query() ),
esc_attr_x( 'Search', 'label', 'generatepress' ),
generate_get_svg_icon( 'search', true )
);
return $form;
});Note the change to this line:
<button class="search-submit" aria-label="%1$s">%4$s</button>
the %4$s refers to the 4th argument ie. generate_get_svg_icon( 'search', true )
For the other requirement - can i see the site ?
Hi David and many thanks for pointing me in the right direction!
I sent you the access to check the web.
Please tell me if it is possible to get the vertical scrolling effect to show the search form.
Thanks!
Try this CSS:
/* SEARCH BAR */
.navigation-search {
position: relative;
max-width: 1200px;
margin: auto;
left: unset !important;
visibility: unset !important;
width: auto !important;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-in;
}
.navigation-search.nav-search-active {
position: relative;
max-height: 100px;
top: 0;
right: 0;
z-index: 10000;
background-color: var(--contrast-2);
display: flex;
align-items: center;
}
.search-form-container {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
max-width: 800px;
padding: 20px;
}
.navigation-search input[type="search"] {
width: auto;
flex: 1;
color: var(--contrast-2);
background-color: #fff;
}
.navigation-search .search-submit {
padding: 16px 20px;
background-color: var(--base);
}Perfect!
I really like this way of displaying the search form. I will use it in future websites I develop.
Thank you very much!
I like it too - looks great :)
