Archived topic
bbpress search bar tiny in mobile view
9 replies · Started by Riccardo on March 25, 2023
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!
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
