search button

  • Resolved kanex32

    (@kanex32)


    2 years, 4 months ago

    Maybe this is a possible feature to be added in the future, but could the search bar have an included search button to be added for those looking for a button to push.

    Even Yoast SEO states that some people expect a button to be used for searching a topic. Not everyone knows they have to push the ENTER button on the keyboard to initiate a search. Google search allows both ways to be used to start a search. Could GeneratePress do the same?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Leo

    (@leohsiang)

    Hi there,

    Are you referring to the navigation search or the WP default search widget?

    Thread Starter kanex32

    (@kanex32)

    not the widget, yeah I’m talking about the navigation search

    Hi there,

    we are working on accessibility improvements and that will include the Navigation Search.

    Today you can:

    1. Add this PHP Snippet to insert a revised search form that includes a label and a submit button:

    // Add labels and submit button
add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
        <label for="nav-search">Search:</label> 
        <div class="search-input-wrapper">
            <input type="search" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" id="nav-search" />
            <button type="submit" class="search-submit" value="%4$s">Search</button>
            </div>
            </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ),
        esc_attr_x( 'Search', 'submit button' )
    ); 
} );

    2. Add this CSS to style it:

    .navigation-search.nav-search-active,
.inside-navigation  .navigation-search {
	top: 100%;
	width: 400px;
	max-width: calc( 100vw );
	left: unset;
}
.inside-navigation  .navigation-search .search-input-wrapper {
	display: flex;
}
    Thread Starter kanex32

    (@kanex32)

    thanks David

    You’re welcome

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘search button’ is closed to new replies.