Automatically Clearing the Search in Navigation

[Janet Davis]

Hello,

After someone uses the search I’d like the search to clear. It doesn’t clear in the navigation search, and when nothing is found the same search is in the search on the nothing found page.

I found the following which I put into Snippet plugin – but it didn’t work.
Thank you
Jan

add_filter( ‘generate_navigation_search_output’, function() {
return sprintf( // WPCS: XSS ok, sanitization ok.
‘<form method=”get” class=”search-form navigation-search” action=”%1$s”>
<input placeholder=”Type to search” autocomplete=”off” type=”search” class=”search-field” value=”” name=”s” title=”%2$s” />
</form>’,
esc_url( home_url( ‘/’ ) ),
esc_attr_x( ‘Search’, ‘label’, ‘generatepress’ )
);
} );

[Leo]

Hi there,

Can you try this code?
https://generatepress.com/forums/topic/search-box-clear/#post-574769

It was recently tested to be working:
https://generatepress.com/forums/topic/search-nav-color/#post-926121

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janet Davis]

Hi Leo,
I put the coding (see the bottom – copy paste from your post) into snippet plug-in hit saved.
Doesn’t work.

I created a new snippet and saved. Doesn’t work.
I made sure the snippet was on. Doesn’t work.

Thank you
Jan

add_filter( ‘generate_navigation_search_output’, ‘tu_remove_search_query’ );
function tu_remove_search_query() {
printf( // WPCS: XSS ok, sanitization ok.
‘<form method=”get” class=”search-form navigation-search” action=”%1$s”>
<input type=”search” class=”search-field” value=”” name=”s” title=”%2$s” />
</form>’,
esc_url( home_url( ‘/’ ) ),
esc_attr_x( ‘Search’, ‘label’, ‘generatepress’ )
);
}

[Tom]

Hi there,

I’m not seeing the navigation search on your website – did you turn it off?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Janet Davis]

Hey Tom,
My apologies, when I went to the library starter of Wordsmith I didn’t turn it back on.
It’s on now and it has the same issue.

Thank you
Jan

[Leo]

Are you already using the generate_navigation_search_output filter in another function?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janet Davis]

Not that I know of.
I didn’t create anything

[Leo]

I see Enter your search placeholder text when activating the search.

I believe that’s added with the same filter?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janet Davis]

Below is what is in the css and the snippet

This is what is in the CSS
input::placeholder {
line-height: 1;
}

.main-navigation li.search-item {
display: inline-flex !important;
align-items: center;
}
.main-navigation li.search-item:before {
content: ‘Search Site’;
margin-right: 10px;

}

.navigation-search input[type=”search”],
.navigation-search input[type=”search”]:active,
.navigation-search input[type=”search”]:focus {
color: #000000;
background-color: #ffffff;
}

input::placeholder {
line-height: 1;
color: #000000;
}

This is what is in the snippet

add_filter( ‘generate_navigation_search_output’, function() {
printf(
‘<form method=”get” class=”search-form navigation-search” action=”%1$s”>
<input type=”search” placeholder=”Enter your search” class=”search-field” value=”%2$s” name=”s” title=”%3$s” />
</form>’,
esc_url( home_url( ‘/’ ) ),
esc_attr( get_search_query() ),
esc_attr_x( ‘Search’, ‘label’, ‘generatepress’ )
);
} );

[Leo]

Change the PHP snippet to this one ONLY:

add_filter( 'generate_navigation_search_output', 'tu_remove_search_query' );
function tu_remove_search_query() {
	printf( // WPCS: XSS ok, sanitization ok.
		'<form method="get" class="search-form navigation-search" action="%1$s">
			<input type="search" placeholder="Enter your search" class="search-field" value="" name="s" title="%2$s" />
		</form>',
		esc_url( home_url( '/' ) ),
		esc_attr_x( 'Search', 'label', 'generatepress' )
	);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janet Davis]

I put that into my snippet.

What I wrote that was in my css was in the site css.

I am still not getting it to clear.

Thank you

[Leo]

Did you remove the other functions that were added?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janet Davis]

These are the only 2 snippets I have in the snippet plugin
for the place holder

add_filter( ‘generate_navigation_search_output’, function() {
printf(
‘<form method=”get” class=”search-form navigation-search” action=”%1$s”>
<input type=”search” placeholder=”Enter your search” class=”search-field” value=”%2$s” name=”s” title=”%3$s” />
</form>’,
esc_url( home_url( ‘/’ ) ),
esc_attr( get_search_query() ),
esc_attr_x( ‘Search’, ‘label’, ‘generatepress’ )
);
} );

and to clear

add_filter( ‘generate_navigation_search_output’, ‘tu_remove_search_query’ );
function tu_remove_search_query() {
printf( // WPCS: XSS ok, sanitization ok.
‘<form method=”get” class=”search-form navigation-search” action=”%1$s”>
<input type=”search” placeholder=”Enter your search” class=”search-field” value=”” name=”s” title=”%2$s” />
</form>’,
esc_url( home_url( ‘/’ ) ),
esc_attr_x( ‘Search’, ‘label’, ‘generatepress’ )
);
}

[Leo]

That’s what I’m trying to say.

I’ve combined the placeholder and clear function in the snippet above so please only use that one and remove the others:
https://generatepress.com/forums/topic/automatically-clearing-the-search-in-navigation/#post-937336

Let me know if this is clear 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janet Davis]

Ahh that makes sense now.
And yes it works now thank you.

[Author]

Posts