Posted on

Customizing bbPress forum layout using a child theme

bbPress is THE forum software if you have ever considered creating a forum / bulletin board on your WordPress site and there are hundreds of bbPress compatible themes out there. bbPress (Twenty Ten) is one of the most popular bbPress compatible theme within the WordPress themes directory. But we’ve all been there when we want to use a premium theme (or a different free theme which is visually more appealing for that matter ) & customize our bbPress powered forums as per our own requirements. So today I’ll walk you through customizing bbPress forum layout using a child theme of a popular theme (we are using the Customizr theme).

Before you begin, make sure you have the Child Theme Configurator plugin installed & activated on your WordPress site. Also, create a child theme for the activated Customizr theme as the parent and activate the child theme.

Using stylesheet.css & functions.php in the child theme to customize the default forum layout

Navigate to WordPress Dashboard -> Appearance -> Editor. On the right side of the editor choose the Stylesheet (stylesheet.css) for applying custom CSS styling rules and the Theme Functions (functions.php) to add the code snippets for changing the default layout of your bbPress forums.

Edit functions.php in the child theme

Let’s see some code snippets that you can use in your child theme

#1 Display subforums as a vertical list

Paste the following code in your stylesheet.css file to display subforums as a vertical list.

#bbpress-forums .bbp-forums-list li {
display: block;
}

#2 Change the topics & replies count display

Paste the following code in your functions.php file to change the topics & replies count display.

// change the topics & replies count display 
function counts_display() {
    $args['count_before'] =' (Topic(s): ';
    $args['show_topic_count'] = true;
    $args['show_reply_count'] = true;
    $args['count_sep'] = ', Replies: ';
return $args;
}
add_filter('bbp_before_list_forums_parse_args', 'counts_display' );

Preview:

Custom display of topics & counts

#3 Show forum descriptions on forum index

Paste the following code in your functions.php file to show forum descriptions on the forum index.

//Add description after forums titles on forum index
function singleforum_description() {
  echo '<div class="bbp-forum-content">';
  echo bbp_forum_content();
  echo '</div>';
}
add_action( 'bbp_template_before_single_forum' , 'singleforum_description');

Add the following code in your stylesheet.css file so the description shows up under the breadcrumbs on the forum page.

#bbpress-forums div.bbp-forum-content {
  clear: both !important;
  margin-left: 0 !important;
  padding: 0  !important;
  text-align: left !improtant;
}

#4 Show descriptions of subforums

Paste the following code in your functions.php file to show the descriptions of subforums.

//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' );

#5 Change the freshness text of topics & forums

Paste the following code in your functions.php file to change the freshness text of topics & forums.

//Change the freshness text about forums & topics 
//Example '1 month, 2 weeks' to '1 month'
function short_freshness_time( $output) {
$output = preg_replace( '/, .*[^ago]/', ' ', $output );
return $output;
}
add_filter( 'bbp_get_time_since', 'short_freshness_time' );
add_filter('bp_core_time_since', 'short_freshness_time');

#6 Show an icon for new topics up to an hour

Paste the following code in your functions.php file to show an icon for new topics up to an hour.

//Add an icon to new topics for an hour
//Change the offset number to whatever you want (in seconds).
//Here offset = 60*60*1 = 3600 seconds , which is how many seconds in 1 hour.

function new_topics() {
$offset = 60*60*1; 
  
   if ( get_post_time() > date('U') - $offset )
      //You can input icons by adding in the icon fonts' HTML to show the icon within the <span> tags
      //We have used a start filled dashicon in this example
      echo '<span class="new"><span class="dashicons dashicons-star-filled"></span>';
}

add_action( 'bbp_theme_before_topic_title', 'new_topics' );

Preview: Icon for new topic #7 Show an icon next to popular topics (which have received a specified number of replies)

Paste the following code in your functions.php file to show an icon next to popular topics.

//Show an icon next to popular topics
//We are showing the icon next to a topic which has more than 5 replies
//You can change 5 to whatever number you want 

function hot_topics() {
   $reply_count = bbp_get_topic_reply_count();
  
   if ( $reply_count > 5 )
      //You can input icons by adding in the icon fonts' HTML to show the icon within the <span> tags
      //We have used a chat dashicon in this example
      echo '<span class="hot"><span class="dashicons dashicons-format-chat"></span>'; 
}
  
add_action( 'bbp_theme_before_topic_title', 'hot_topics' );

Preview: Icon for popular topic

Leave us your reply in the comments box to tell us how you customize your bbPress forum layout.

Leave a Reply

Your email address will not be published. Required fields are marked *