Want to add search box

[John]

Hello

I want to add search box in homepage hero banner area.

I want to display search box instead of “Lets Get Started” button.

How can I do this?

Thanks

[David]

Hi there,

this article explains how to display the WP search field using a Shortcode:

https://www.wpbeginner.com/wp-tutorials/how-to-add-search-form-in-your-post-with-a-wordpress-search-shortcode/

The you can edit the Header Element ( in Appearance > Elements ) and add in the short code.

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

[John]

Added this code

function wpbsearchform( $form ) {
 
    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </div>
    </form>';
 
    return $form;
}
 
add_shortcode('wpbsearch', 'wpbsearchform');

Then added [wpbsearch] in header element.
It shows.

I want to add some style. Want to add placeholder text like ” Search Better Product”

And want to keep search box background transparent.

[David]

1. You can add placeholders in your code – edit this line:

<input type="text" value="' . get_search_query() . '" name="s" id="s" />

to:

<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="Your placeholder text here" />

2. Try this CSS to style search field background:

.toolzview_sarchbox input[type=text] {
    background-color: rgbas(255,255,255,0.5);
    min-width: 220px; /* Set minimumn width to cover mobile */
    width: 50%; /* Set width for all devices */
    margin-right: -5px; /* Remove margin between inputs */ 
}

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

[John]

Works fine.

Now, Want to remove blank space between search box and submit button.

And, If I want to increase search box width, how can I do this?

[David]

Updated the CSS here

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

[John]

Thanks a lot David. Your support is great always.

[David]

Glad to be of help 🙂

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

[Author]

Posts