- This topic has 7 replies, 2 voices, and was last updated 1 year ago by
David.
-
AuthorPosts
-
December 22, 2019 at 10:45 pm #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
December 23, 2019 at 4:29 am #1112060David
StaffCustomer SupportHi there,
this article explains how to display the WP search field using a 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/December 23, 2019 at 4:56 am #1112081John
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.
December 23, 2019 at 5:34 am #1112126David
StaffCustomer Support1. 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/December 23, 2019 at 5:53 am #1112162John
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?
December 23, 2019 at 5:58 am #1112166David
StaffCustomer SupportUpdated the CSS here
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 23, 2019 at 6:10 am #1112183John
Thanks a lot David. Your support is great always.
December 23, 2019 at 6:27 am #1112202David
StaffCustomer SupportGlad to be of help 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.