Styling and working with bbPress forums can prove to be a challenge. If you’re anything like me, chances are you have tried a handful of different solutions for your WordPress forum software. I have finally begun to really enjoy and utilize bbPress for our forum needs and I feel that I finally have a grasp on the method to the madness. Below I will outline some methods we use here at Mojoness Inc. to utilize bbPress for our network support forum.

I am going to assume that you have installed the bbPress plugin and you are using the basic settings with installation. I want to discuss more about how the Mojoness team organized and setup our forum. I am not going to attempt to say this is the only way to setup your forum, this is just what we did to get off the ground.

Understanding the basics – The Home Page Shortcodes

Without going into too much detail about the programming structure, I am going to quickly highlight the basics of how the bbPress forum is powered. bbPress currently offers multiple options for displaying your forum. You can use custom page templates or shortcodes to define how your forum will display. For the Mojoness support forums, we decided to use a combination of both. We wanted a custom homepage where we call the shortcodes to show forums and topics. To begin with, we created a custom homepage template which had a right sidebar and displayed the_content() 2/3′s left. Below are the shortcodes we added to the Home page.

[bbp-forum-index]– This shortcode displays an index/archive of all forums.

[bbp-topic-index]– This shortcode displays an index/archive of all topics.

After we added those shortcodes in the editor, we had our Home page all setup.

Custom bbPress Page Template

Now that we have defined our Home page to display an overview of our forums, we used a custom page ( bbpress.php ) template previously mentioned to display everything else. The page template looks very similar to what a general custom page template would look like. Don’t be intimidated by the term “custom” in this context. Below is a look at what we did:

001 <?php get_header(); ?>
002
003 <div class="support-forum-mid clearfix">
004
005 <div class="support-left">
006
007     <p class="support-intro">If you have an issue with Eventr our support team is standing by will to answer your questions as soon as humanly possible. Please be patient during busy periods and be aware of any difference in timezone. Unfortanutely we cannot provide support for modifications beyond a few lines of code. Any more and you should enlist the help of a our customization team. Read the full support policy.</p>
008
009     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
010
011         <?php the_content(); ?>
012
013     <?php endwhile; ?>
014
015     <?php endif; ?>
016
017 </div><!-- End of .support-left -->
018
019 <div class="support-right">
020
021     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('...') ) : ?>
022
023     <?php endif; ?>
024
025 </div> <!-- End of .support-right -->
026
027 </div><!-- End of .support-forum-mid -->
028
029 <?php get_footer(); ?>

What this custom page is doing is defining how we want the interior of the forum to look. As you can see, we have two floats with support-left and support-right. The class support-left has the loop running within it and displays the content. The class support-right is our forum sidebar.

If you want more detail and control of your file templates, use a more specific file template, which bbPress will look for when processing ( In order of operation ):

  • bbpress.php – Similar to your index.php file in a WordPress theme. The default.
  • forum.php – Use for forum view.
  • page.php – Use for page view.
  • single.php – Use for single forum post view.

After going through that process you should have a working forum and if you used the same method described above it should operate just like the Mojoness support forum. We hope this helps explain how we used bbPress to power our support forum and hopefully the experience can be quicker for you than it was for us.