Search box style

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.

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)?

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.

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.

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?

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.

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 :)

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.

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?

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

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;
}

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

No problem :)