Adding bootstrap styled search

[bryanwillis]

This can be improved upon but I think we at least need to add the bootstrap styles to the input search field. The default search border is kinda ugly.

add_filter( 'genesis_search_form', 'bsg_search_form', 10, 4);

function bsg_search_form( $form, $search_text, $button_text, $label ) {

    $value_or_placeholder = ( get_search_query() == '' ) ? 'placeholder' : 'value';

    $form = sprintf( '<form method="get" class="search-form form-inline" action="%s" role="search"><div class="input-group">%s<input type="search" class="search-field form-control" name="s" %s="%s" /><span class="input-group-btn"><button type="submit" class="search-submit btn btn-default" value="%s" /><i class="glyphicon glyphicon-search"></i></button></span></div></form>', home_url( '/' ), esc_html( $label ), $value_or_placeholder, esc_attr( $search_text ), esc_attr( $button_text ) );

    return $form;
}

Also, not sure why this is needed, but it seems to fix issues with the search width:

form.search-form .input-group-btn {
    width: 1%;
}
.search-form > .input-group {
    width: 100%;
}
.search-form .glyphicon {
    top: 2px;
}

[bryanwillis]

[salcode]

Wow, this screenshot looks way better. Thanks @bryanwillis

I look forward to trying this code out and getting this added to the project

[salcode]

For future reference, here is a list of the markup changes @bryanwillis outlined above

• add class .form-inline to form element
• wrap $search_text in div.input-group
• add class .form-control to input search field
• wrap input button in span.input-group-btn
• change submit from input to button
• add classes .search-submit and .btn-default to submit button
• add i.glyphicon-search inside submit button

[salcode]

I found these three links helpful is building the format of the search box.

• http://getbootstrap.com/css/#forms
• http://getbootstrap.com/components/#input-groups-buttons
• http://getbootstrap.com/components/#glyphicons-examples