Archived topic
Trying To Make bbPress Function like the GeneratePress Support forum
1 reply · Started by Py on September 15, 2018
Viewing posts 1–2 of 2
This is my bbPress forum - https://ofpad.com/community
I am trying to make it function like this support forum.
More specifically I am trying to add one specific features
The search bar along with the open support topics and forum profile buttons on the right of the search bar.
The screenshot is taken from this forum.
Here is what I have done so far to get to where I am now.
My bbPress CSS Code is the following:
#bbpress-forums .bbp-forums-list li {
display: block;
}
#bbpress-forums fieldset.bbp-form {
border: 0;
padding: 0;
}
div.bbp-submit-wrapper {
float: none;
}
.bbp-replies .bbp-header,
.bbp-replies .bbp-footer ,
.bbp-topics .bbp-footer,
.bbp-topic-started-in,
.bbp-author-role {
display: none;
}
.bbp-replies div.bbp-reply-header {
border-top: 0;
padding: 0;
}
li.bbp-body div.type-topic,
li.bbp-body div.type-reply {
margin-bottom: 30px;
}
.bbp-the-content-wrapper {
margin-bottom: 20px;
}
#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic,
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
padding: 20px;
}
#bbpress-forums div.odd,
#bbpress-forums ul.odd,
#bbpress-forums div.even,
#bbpress-forums ul.even {
background-color: #fff;
display: flex;
padding: 0;
border-radius: 5px;
}
#bbp-forum-0 .topic {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#bbp-forum-0 .topic .bbp-topic-title .bbp-topic-meta {
display: none;
}
#bbpress-forums ul.even {
background: rgba(245, 247, 249, 0.2);
}
#bbpress-forums div.bbp-forum-header,
#bbpress-forums div.bbp-topic-header,
#bbpress-forums div.bbp-reply-header {
background-color: transparent;
}
.bbp-reply-author .staff {
font-size: 14px;
padding: 5px 10px;
display: block;
margin-top: 10px;
font-weight: bold;
border-radius: 5px;
}
#bbpress-forums ul.bbp-lead-topic,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-search-results {
border: 0;
}
li.bbp-body div.hentry {
padding: 30px;
border: 1px solid rgba(0,0,0,0.05);
box-sizing: border-box;
}
#bbpress-forums li.bbp-header {
/*background: transparent;*/
border: 0;
}
div.bbp-template-notice.info {
display: none;
}
.bbp-pagination-count {
display: none;
}
/*
.bbp-search-form {
display: none;
}
*/
#bbp-your-profile .form-table,
#bbp-your-profile .security-keys {
display: none;
}
a.bbp-breadcrumb-home,
a.bbp-breadcrumb-home + span{
display: none;
}
#new-post {
margin: 0 auto;
}
.account-info ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.account-info {
font-size: 15px;
margin-bottom: 40px;
}
.account-info ul li:first-child {
flex-grow: 1;
margin-right: 10px;
}
.account-info ul li:last-child {
margin-left: 10px;
}
.account-info ul li a {
font-size: 15px;
color: #bacad6;
}
#bbp-search-form input[type="submit"] {
font-size: 15px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
width: 84px;
}
#bbp-search-form input[type="text"] {
font-size: 15px;
background: #fff;
border: 1px solid #bacad6;
margin-right: -4px;
border-right: 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: calc(100% - 85px);
}
.bbpress .entry-header {
overflow: hidden;
}
#new-post input[type="text"],
#new-post input[type="url"],
#new-post select,
#new-post .wp-editor-container,
textarea#bbp_reply_content,
textarea#bbp_topic_content,
textarea#bbp_forum_content {
width: 100%;
border-color: #bacad6;
background-color: #fff;
border-radius: 5px;
box-sizing: border-box;
}
#new-post .quicktags-toolbar {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#new-post legend {
font-size: 30px;
margin-bottom: 10px;
}
#bbpress-results {
padding: 40px;
}
.documenation-topics {
margin-bottom: 40px;
}
#bbpress-forums li.bbp-body ul.topic:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#bbpress-forums li.bbp-body ul.topic:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#bbpress-forums div.bbp-forum-author img.avatar,
#bbpress-forums div.bbp-topic-author img.avatar,
#bbpress-forums div.bbp-reply-author img.avatar {
border-radius: 50%;
}
div.bbp-forum-header,
div.bbp-topic-header,
div.bbp-reply-header {
border-top: 0;
}
.bbp-meta {
font-size: 12px;
margin-bottom: 5px;
}
span.bbp-admin-links,
span.bbp-admin-links a,
.bbp-forum-header a.bbp-forum-permalink,
.bbp-topic-header a.bbp-topic-permalink,
.bbp-reply-header a.bbp-reply-permalink {
color: #000;
}
#bbpress-forums div.bbp-forum-author,
#bbpress-forums div.bbp-topic-author,
#bbpress-forums div.bbp-reply-author {
border-right: 1px solid rgba(0,0,0,0.05);
width: 200px;
padding: 40px;
background: rgba(245, 247, 249, 0.2);
}
#bbpress-forums div.bbp-forum-content,
#bbpress-forums div.bbp-topic-content,
#bbpress-forums div.bbp-reply-content {
width: calc(100% - 200px);
margin: 0;
padding: 40px;
min-width: 0;
}
#bbpress-forums .bbp-forum-info .bbp-forum-content,
#bbpress-forums p.bbp-topic-meta{
font-size: 14px;
}
.subscription-toggle {
display: none;
}
.resolved, .topic-not-resolved, .topic-resolved {
display: none;
}
.topic-resolved+a:before {
color: #76b711;
content: "RESOLVED";
font-size: 13px;
font-weight: 700;
border: 1px solid #76b711;
padding: 3px 10px;
float: right;
border-radius: 5px;
}
.bbp-topic-pagination a {
border-radius: 5px;
padding: 5px 10px;
vertical-align: middle;
border-color: #efefef;
}
.bbp-topic-pagination a:hover {
border-color: #bacad6;
}
.bbp-pagination-links {
float: none;
}
.bbp-pagination-links a,
.bbp-pagination-links span.current {
min-width: 25px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
background: #fff;
}
.bbp-pagination-links a:hover,
.bbp-pagination-links span.current {
border: 1px solid #bacad6;
background: #fff;
}
#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content {
font-size: 15px;
}
.bbp-forum-header a.bbp-forum-permalink,
.bbp-topic-header a.bbp-topic-permalink,
.bbp-reply-header a.bbp-reply-permalink {
float: none;
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #ddd;
}
#bbpress-forums div.bbp-topic-content code,
#bbpress-forums div.bbp-topic-content pre,
#bbpress-forums div.bbp-reply-content code,
#bbpress-forums div.bbp-reply-content pre {
font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
#bbpress-forums div.bbp-topic-content code,
#bbpress-forums div.bbp-reply-content code {
padding: .2rem .4rem;
color: #bd4147;
background-color: #f8f9fa;
border-radius: .25rem;
}
#bbpress-forums div.bbp-topic-content pre code,
#bbpress-forums div.bbp-reply-content pre code {
padding: 0;
font-size: inherit;
color: inherit;
background-color: transparent;
border-radius: 0;
}
#bbpress-forums div.bbp-topic-content pre,
#bbpress-forums div.bbp-reply-content pre {
margin-top: 0;
overflow: auto;
-ms-overflow-style: scrollbar;
display: block;
font-size: 90%;
color: #212529;
padding: 20px;
border-radius: 5px;
border: 1px solid rgba(0,0,0,0.05);
}
#bbpress-forums p.bbp-topic-meta img.avatar,
#bbpress-forums ul.bbp-reply-revision-log img.avatar,
#bbpress-forums ul.bbp-topic-revision-log img.avatar,
#bbpress-forums div.bbp-template-notice img.avatar,
#bbpress-forums .widget_display_topics img.avatar,
#bbpress-forums .widget_display_replies img.avatar {
border: 0;
margin-bottom: -3px;
border-radius: 50%;
}
.bbp-topic-started-by {
display: none;
}
.bbp-pagination {
float: none;
clear: both;
}
.bbp-pagination-links a, .bbp-pagination-links span.current,
.bbp-pagination-links span.dots {
float: none;
display: inline-block;
}
span.happy,
span.unhappy {
cursor: pointer;
}
span.happy {
font-weight: bold;
color: #5ea337;
}
span.unhappy {
font-weight: bold;
color: #444;
}
#bbpress-forums .status-closed, #bbpress-forums .status-closed a {
color: #222;
}
#bbpress-forums .status-closed .bbp-reply-content a {
color: #1e73be;
}
@media (max-width: 768px) {
#bbpress-forums div.odd,
#bbpress-forums ul.odd,
#bbpress-forums div.even,
#bbpress-forums ul.even {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#bbpress-forums div.bbp-forum-author,
#bbpress-forums div.bbp-topic-author,
#bbpress-forums div.bbp-reply-author {
float: none;
width: auto;
min-height: auto !important;
margin: 0 !important;
box-sizing: border-box;
text-align: center !important;
padding-left: 40px !important;
}
#bbpress-forums div.bbp-forum-content,
#bbpress-forums div.bbp-topic-content,
#bbpress-forums div.bbp-reply-content {
margin-left: 0;
}
.account-info ul {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.account-info ul li:first-child {
margin-right: 0;
width: 100%;
margin-bottom: 20px;
}
#bbpress-forums li.bbp-header {
display: none;
}
li.bbp-forum-topic-count,
li.bbp-topic-voice-count,
li.bbp-forum-reply-count,
li.bbp-topic-reply-count {
float: none;
width: 100%;
text-align: left;
}
li.bbp-forum-freshness,
li.bbp-topic-freshness {
float: none;
width: 100%;
text-align: left;
}
li.bbp-forum-info,
li.bbp-topic-title {
float: none;
width: 100%;
margin-bottom: 20px !important;
}
li.bbp-topic-voice-count {
display: inline-block;
width: auto;
}
li.bbp-topic-voice-count:after {
content: " Voices";
}
li.bbp-topic-reply-count {
display: inline-block;
width: auto;
}
li.bbp-topic-reply-count:after {
content: " Replies";
}
li.bbp-topic-reply-count:before {
content: " | ";
}
span.bbp-topic-started-by {
display: none;
}
#bbpress-forums div.bbp-forum-content,
#bbpress-forums div.bbp-topic-content,
#bbpress-forums div.bbp-reply-content {
width: 100%;
box-sizing: border-box;
}
#bbpress-forums div.bbp-reply-author img.avatar {
position: relative;
margin-bottom: 20px;
}
#bbpress-forums .bbp-body div.bbp-reply-content {
padding: 20px !important;
}
}I have also used the Code Snippet plugin to add some PHP code to my functions.php file. Here is the PHP Code I have inserted:
//Removes the sub-forum topic and reply count
function remove_counts() {
$args['show_topic_count'] = false;
$args['show_reply_count'] = false;
$args['count_sep'] = '';
return $args;
}
add_filter('bbp_before_list_forums_parse_args', 'remove_counts' );
//Removes Breadcrumbs
//add_filter( 'bbp_no_breadcrumb', '__return_true' );
//Change Breadcrumbs Text
function change_bread_crumbs_text( $args = array() ) {
$args['root_text'] = 'Community';
return $args;
}
add_filter( 'bbp_after_get_breadcrumb_parse_args', 'change_bread_crumbs_text' );
//Add descriptions to subforums
function custom_list_forums( $args = '' ) {
// Define used variables
$output = $sub_forums = $topic_count = $reply_count = $counts = '';
$i = 0;
$count = array();
// Parse arguments against default values
$r = bbp_parse_args( $args, array(
'before' => '<ul class="bbp-forums-list">',
'after' => '</ul>',
'link_before' => '<li class="bbp-forum">',
'link_after' => '</li>',
'count_before' => ' (',
'count_after' => ')',
'count_sep' => ', ',
'separator' => ' ',
'forum_id' => '',
'show_topic_count' => true,
'show_reply_count' => true,
), 'list_forums' );
// Loop through forums and create a list
$sub_forums = bbp_forum_get_subforums( $r['forum_id'] );
if ( !empty( $sub_forums ) ) {
// Total count (for separator)
$total_subs = count( $sub_forums );
foreach ( $sub_forums as $sub_forum ) {
$i++; // Separator count
// Get forum details
$count = array();
$show_sep = $total_subs > $i ? $r['separator'] : '';
$permalink = bbp_get_forum_permalink( $sub_forum->ID );
$title = bbp_get_forum_title( $sub_forum->ID );
$content = bbp_get_forum_content($sub_forum->ID) ;
// Show topic count
if ( !empty( $r['show_topic_count'] ) && !bbp_is_forum_category( $sub_forum->ID ) ) {
$count['topic'] = bbp_get_forum_topic_count( $sub_forum->ID );
}
// Show reply count
if ( !empty( $r['show_reply_count'] ) && !bbp_is_forum_category( $sub_forum->ID ) ) {
$count['reply'] = bbp_get_forum_reply_count( $sub_forum->ID );
}
// Counts to show
if ( !empty( $count ) ) {
$counts = $r['count_before'] . implode( $r['count_sep'], $count ) . $r['count_after'];
}
// Build this sub forums link
$output .= $r['before'].$r['link_before'] . '<a href="' . esc_url( $permalink ) . '" class="bbp-forum-link">' . $title . $counts . '</a>' . $show_sep . $r['link_after'].'<div class="bbp-forum-content">'.$content.'</div>'.$r['after'];
}
// Output the list
return $output ;
}
}
add_filter('bbp_list_forums', 'custom_list_forums' );
// Change Forums in Index page table header to Communities
function change_translate_text( $translated_text ) {
if ( $translated_text == 'Forum' ) {
$translated_text = 'Communities ';
}
return $translated_text;
}
add_filter( 'gettext', 'change_translate_text', 20 );How do I incorporate the search feature along with the buttons into my bbpress forum?
Thank you in advance for all the help.
Here's the function we're using for the search bar:
add_action( 'generate_before_content', function() {
if ( is_page( 'support' ) || ( function_exists( 'is_bbpress' ) && is_bbpress() ) ) :
?>
<div class="account-info">
<ul>
<li><?php echo do_shortcode( '[ bbp-search-form ]' ); ?></li>
<?php if ( is_user_logged_in() ) : ?>
<li><a class="button ghost" href="<?php echo site_url(); ?>/support/#new-post">Open Support Topic</a></li>
<?php if ( function_exists( 'bbp_get_user_profile_url' ) ) : ?>
<li><a class="button ghost" href="<?php echo bbp_get_user_profile_url( get_current_user_id() ); ?>">Forum Profile</a></li>
<?php endif; ?>
<?php else : ?>
<li><a class="button ghost" href="<?php echo wp_login_url( get_permalink() ); ?>" title="Log in">Log In</a></li>
<li><a class="button ghost" href="#" rel="nofollow" title="Our free support forum">Free Support</a></li>
<?php endif; ?>
</ul>
</div>
<?php
endif;
} );As for the toolbar, I think it may be this plugin: https://wordpress.org/plugins/gd-bbpress-tools/
This archived topic is closed to new replies.
