- This topic has 9 replies, 2 voices, and was last updated 2 years, 11 months ago by
.
-
Posts
-
Hey guys, I hope you are doing well. I’ve successfully set my BBpress forum using your CSS and I’m very satisfied by the look and feel. There’s a small issue that you may be able to fix. I have set up a custom header with a search bar, which looks ok on the screen but it’s ridiculously small on mobile. Also, I would like to add “search keyword…” as a placeholder in the search bar instead of adding a title above. Can you please help to fix it? thanks a lot!
Customer Support
Hi there,
use this CSS to set a max-width of the search for desktop and for it to fill the width on mobile:
#bbp-search-form input[type="text"] { width: 100% !important; max-width: 640px; }I am not sure for the placeholder text, but you can try adding this PHP Snippet:
function custom_bbpress_search_placeholder( $placeholder ) { $placeholder = 'Search keyword...'; return $placeholder; } add_filter( 'bbp_get_search_input_placeholder', 'custom_bbpress_search_placeholder' );Thank you very much, David. The mobile bar looks fine now, the placeholder doesn’t show.
How is the search form added to the site ?
Element Header, bb search shortcode very simple. Attached. Thank you!
OK, so looking at the BBPress github – they use this template for that search form:
https://github.com/bbpress/bbPress/blob/trunk/src/templates/default/bbpress/form-search.php
And it has no placeholder or any filters to change that.
So you could create your own search form Shortcode with this PHP Snippet:
add_shortcode( 'my_bb_search', function() { if ( !bbp_allow_search() ) { return; } $html = sprintf( '<div class="bbp-search-form"> <form role="search" method="get" id="bbp-search-form"> <div> <label class="screen-reader-text hidden" for="bbp_search">%1$s</label> <input type="hidden" name="action" value="bbp-search-request" /> <input placeholder="Enter your search" type="text" value="%2$s" name="bbp_search" id="bbp_search" /> <input class="button" type="submit" id="bbp_search_submit" value="%3$s" /> </div> </form> </div>', esc_html_e( 'Search for:', 'bbpress' ), bbp_search_terms(), esc_attr_e( 'Search', 'bbpress' ) ); return $html; } );Then you can add that with the:
[my_bb_search]shortcode instead.Hey David, thanks a lot. Almost done. It works, but I get a funky “Search for:Search” below my logo.
Hmmm… thats not going to work.
Try this PHP Snippet instead:add_shortcode( 'my_bb_search', function() { ob_start(); ?> <div class="bbp-search-form"> <form role="search" method="get" id="bbp-search-form"> <div> <label class="screen-reader-text hidden" for="bbp_search"><?php esc_html_e( 'Search for:', 'bbpress' ); ?></label> <input type="hidden" name="action" value="bbp-search-request" /> <input type="text" placeholder="Enter your search" value="<?php bbp_search_terms(); ?>" name="bbp_search" id="bbp_search" /> <input class="button" type="submit" id="bbp_search_submit" value="<?php esc_attr_e( 'Search', 'bbpress' ); ?>" /> </div> </form> </div> <?php return ob_get_clean(); } );Beautiful! Thank you for your time David, very much appreciate it.
You’re welcome
- You must be logged in to reply to this topic.
