[Resolved] Want to add search box

Home Forums Support [Resolved] Want to add search box

Home Forums Support Want to add search box

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1111843
    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

    #1112060
    David
    Staff
    Customer Support

    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.

    #1112081
    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.

    #1112126
    David
    Staff
    Customer Support

    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 */ 
    }
    #1112162
    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?

    #1112166
    David
    Staff
    Customer Support

    Updated the CSS here

    #1112183
    John

    Thanks a lot David. Your support is great always.

    #1112202
    David
    Staff
    Customer Support

    Glad to be of help 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.