[Resolved] Search box style

[George]

Hi Tom. Is the default search box style accessibility friendly without a search button?

[David]

Hi there,

It was common place when GP first started that the Submit button was not displayed for the search field. It is hidden with CSS so add this to display it:

.widget_search .search-submit {
    display: block;
}

Unfortunately it has to stay that way to preserve backward compatibility. But maybe something we can address in the future.

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

[George]

Okay, thanks. I just explored the dispatch template and I liked how the search is implemented (the way it drops down). How do I replicate that but include a search button at the end (I think it would appear below the close button)?

[Tom]

Hi there,

This should help when it comes to adding a search button to the nav search: https://generatepress.com/forums/topic/change-the-search-bar-style-in-split-template/#post-961560

Once you do that just let us know and we’ll tweak it so it drops down.

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

[George]

Hi Tom. I tried that code before but it appears broken coz I don’t use font awesome. Anyway, you can still guide me but I excluded the CSS. I edited the original post to include site URL.

[Tom]

That code doesn’t actually require Font Awesome. Any chance you can add the CSS so I can see what about it isn’t working?

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

[George]

I added the CSS and purged cache for the front page. What I mean is I use SVG and not inbuilt theme font icons so the icon is not showing up in search.

[Tom]

Ah, in that case, try this as your function:

add_filter( 'generate_navigation_search_output', function() {
    printf(  
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" />
            <input type="submit" class="search-button" value="%4$s">
        </form>', 
        esc_url( home_url( '/' ) ), 
        esc_attr( get_search_query() ),   
        esc_attr_x( 'Search', 'label', 'generatepress' ) ,
        generate_get_svg_icon( 'search' )
    ); 
} );

Let me know 🙂

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

[George]

Okay. I have added the code, but there is some text appearing before and after the icon http://prntscr.com/p0jzh6. Anyway, I hope you are able to figure that out so we can proceed.

[Tom]

Ah, the SVG icon won’t work inside the search button as it contains HTML (my mistake).

Hmm, I’m not sure how this would be possible.

I wonder if this would work:

add_filter( 'generate_navigation_search_output', function() {
    printf(  
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" />
            <label>
                <input type="submit" class="search-button" value="Submit" />
                %4$s
            </label>
        </form>', 
        esc_url( home_url( '/' ) ), 
        esc_attr( get_search_query() ),   
        esc_attr_x( 'Search', 'label', 'generatepress' ) ,
        generate_get_svg_icon( 'search' )
    ); 
} );

Then this CSS:

.navigation-search .search-button {
    display: none;
}

Does clicking on the SVG icon perform the search now?

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

[George]

The CSS works if only I add !important to it. Do I still keep this CSS provided here https://generatepress.com/forums/topic/change-the-search-bar-style-in-split-template/#post-961560? When I click on the icon (it is on the far left near the sidebar scroll thumb) it does indeed perform the search. I am trying to achieve something similar to this https://www.w3schools.com/howto/howto_css_search_button.asp

[Tom]

Instead of that CSS, try this:

.search-button + .gp-icon {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 60px;
    display: block;
    color: #fff;
    cursor: pointer;
    padding: 0 20px;
}

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

[George]

That worked! I figured out the rest after several trials and errors. Thanks for the code.

[Tom]

No problem 🙂

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

[Author]

Posts