[Support request] Trying To Make bbPress Function like the GeneratePress Support forum

Home Forums Support [Support request] Trying To Make bbPress Function like the GeneratePress Support forum

Home Forums Support Trying To Make bbPress Function like the GeneratePress Support forum

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #677992
    Py

    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.
    1

    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.

    GeneratePress 2.1.4
    #678223
    Tom
    Lead Developer
    Lead Developer

    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/

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