Adding forum functionality to WordPress is now insanely easy thanks to the bbPress team and their latest creation: bbPress 2.0. In this post, I’ll list what you need to know to get started with bbPress. Skip below to check out my bbPress Twenty Eleven child theme and quick implementation details, but read on to learn why bbPress 2.0 is a great solution and why you need a forum in the first place.

Why You Need a Forum

The need for forums is obvious in any community driven website: gaming, hobbyist, and user groups thrive on forums. This also includes companies. Most companies with a successful service or product will leverage community forums to augment their customer service. It is a fundamental part of CRM. But integrating your forum with your website can have added benefits too. Often times, a prospective customer will review forums for legitimacy or post pre-order questions, registering their contact information along the way. Informally, forums can gather bug reports or product feedback, and private forums can also provide a premium level of service and additional revenue stream. It is no wonder why third-party forum services exist on the web today. But be cautious of third-party forum hosts as such data can provide valuable information back to the company or the company’s competitor. Without a doubt, keeping forums native to your website is essential for good business.

Introducing bbPress 2.0

There are other forum engines out there (vBulletin, phpBB, etc.), and there are hacks for varying levels of WordPress integration. But no other forum engine presents itself with WordPress integration like bbPress 2.0. As a WordPress user, you already know that WordPress is an expert on taxonomy and already handles posts, tags, and parent-to-child page hierarchy beautifully. bbPress takes forums to a whole new level by taking advantage of WordPress’ taxonomy expertise and couples it with a familiar, powerful administration back-end. You get dedicated menus for forums, topics, and replies (click image to zoom).

.

.

Users get to keep track of favorites and subscriptions. They also get an enhanced profile view and profile editor, email notifications with unsubscribe links, and a native WordPress/bbPress combined single point of log in. Admins have it easier as well with parent/child forum management, a library of shortcodes, and a series of widgets to round out an unprecedented level of deep WordPress integration. Later, I’ll show you how bbPress and WordPress can be taken further with unified search and a familiar responsive theme.

Installation

Adding bbPress 2.0 to WordPress is simple and straight forward. You can fire up DesktopServer and create a new WordPress site to test it or just head on over to your existing WordPress’ Plugins ? Add New admin menu. Type ‘bbPress’ in the search box, look for version 2.0 and then install and activate it. Upon activation, you will see the additional menu items added to your admin menu.

I first had to… [go] to WordPress’ Settings ? Forums page, …clicking ‘Save Changes’ in order to get bbPress’s Forum list to appear.

.

Here is the process to add a bbPress forum to your base WordPress site in a nutshell:

  1. In WordPress’ plugin admin screen install and activate the bbPress 2.0 plugin.
  2. Go over to your WordPress’ Appearance ? Widgets menu and add the “bbPress Login” (optional) and “bbPress Forum List” widgets.
  3. Head over to WordPress’ Forums ? New Forum menu and create some new forums, topics, and replies to test styling.
  4. Integrate bbPress into your search results with our Search for bbPress 2.0 plugin which includes the log in widget fix.

You should be able to go to your WordPress website and use the widgets to access your new forums. My initial installation had some hitches: I first had to toggle permalinks (via WordPress’ Settings ? Permalinks, and “Save Changes”) and then to WordPress’ Settings ? Forums page, also clicking “Save Changes” in order to get bbPress’ Forum list to appear.

Parent and Child Forum Options

bbPress supports parent/child forum relationships which allows a forum visitor to post topics and replies under a parent forum or a child forum. For instance, you could have an Automobile forum with child forums for Ford, Chevy, and Toyota. Keep in mind that a user could post just in the Automobile parent forum if they wanted (which could get messy if you have lazy users). But if you wanted to enforce a specific subforum, use a parent category instead. To create a parent category to house all subforums, change the forum type of the parent to “category” in the Forum Attributes box to the right of the New Forum screen. The “category” type prevents users from posting and turns the parent forum into just a parent container. Keeping the parent forum open to posts isn’t necessarily a bad idea, as the admin can always move or re-categorize a user’s post. However, changing a parent forum to a parent category tends to keep things organized with less manual moderation. You could start off with allowing a parent forum to accept posts. Later you could create subforums for subjects that you might not have anticipated and move relevant posts there as your site grows larger. The Forum Attributes box controls parent/child relationships in a similar fashion to page parent/child relationships and can be nested multiple levels.

For good forum practices, you may wish to put in at least one super-sticky topic. A super-sticky topic will appear on the first page of all forums. This is where you can place your terms and conditions, forum rules, or other essential information you wish to tell your forum participants. It’s also a good idea to create a forum dedicated to Miscellaneous or Off-Topic items. Moderators of a forum will find that it is better to re-categorize or move posts out of a forum that doesn’t apply to the subject (vs deleting them). Moving topics to a Miscellaneous or Off-Topic also keeps what might be decent information around, but more importantly prevents stepping on your visitors toes with claims of censorship. A poster will still have access to their post as WordPress re-organizes their subscription links for you. Other users will appreciate not having to wade through clutter.

Since I decided on using parent categories, I chose to eliminate the default base permalink ‘forums’ and ‘topics’ to avoid the redundant url (in my opinion) ‘forums/forum’ (http://serverpress.com/forums/forum/some-subject) in my permalinks. To do this, head over to WordPress’ Settings ? Forum admin menu and un-check the “Prefix your forum area with the Forum Base slug” option box.

Styling bbPress 2.0 Forums and Profile Pages

You can go about styling your forum with CSS right out of the box. Just add the rules to the bottom of your theme’s style.css file. But if you want just a little more control, it helps to know what bbPress is looking for inside your theme folder in order to customize the layout further. For instance, I chose a wider format, free of side bars to maximize the forum’s readability. Doing this means knowing about how bbPress alters WordPress’ page template hierarchy. First, bbPress will look for bbpress.php, and if it can’t be found it will progress through the complete list that follows:

  1. bbpress.php
  2. forum.php
  3. page.php
  4. single.php
  5. index.php

bbPress will attempt to resolve finding these files within your current theme’s folder. It will most likely find one of the last three files: page.php, single.php or lastly, the infamous catch-all, index.php. Those template files will have surely existed for your WordPress theme. The injection of the forum parts will then cause bbPress to venture out of your WordPress’ current theme folder and into it’s own bbPress plugin folder. You don’t want to alter the files in the bbPress plugin folder as that will most likely be overwritten with plugin updates.

My project’s requirements for a little more control had me simply copying the page.php template file and renaming it bbpress.php. This eliminated the sidebar and gave the forum more space. I then added the search form above it and a login/register link below to promote forum participation by adding a few more template tags to bbpress.php. The results can be found in my bbPress for Twenty Eleven theme in the downloads section of ServerPress.com.

.

.

The older Twenty Ten theme appears to have been the dominate theme during the development of bbPress 2.0. But because this leaves the current, more responsive Twenty Eleven theme behind, I created a simple bbPress enabled Twenty Eleven child theme that brings the responsive design of Twenty Eleven to bbPress 2.0. It includes CSS formatting for not just the forum and topics, but to the profile view and profile edit pages as well. The responsive design is iPhone and iPad friendly and allows bbPress to both look good and increase usability on mobile devices. A peek at my Twenty Eleven child theme’s style.css and bbpress.php may satisfy your own forum integration requirements but there also exists a whole set of bbPress 2.0 shortcodes:

Forums

Topics

Topic Tags

Replies

  • You must be logged in to reply to this topic.

    – Show the topic reply form

Views

  • – Show topics associated with a specific view

Account

  • – Show the login screen
  • – Show the register screen
  • – Show the lost password screen

The Case of the Missing Search Results

Once you get your feet wet with bbPress 2.0, you may notice that a critical part of the forum experience is missing: search results. While bbPress does an excellent job of managing forums on the back-end, it completely misses search results on the front-end where it matters most: to your website visitors. My Search bbPress 2.0 plugin takes care of missing search results, and fixes a few bugs along the way. Naturally, I’ve submitted fixes to core code to bbPress’ trac and hopefully those fixes will appear in the next version. But if you want those fixes now, plus enhanced search capabilities, Search bbPress 2.0 is for you! You will find the following fixes and enhancements:

  • Extends WordPress’ native search to include forums, topics, and replies.
  • Corrects permalinks in search results to link to forum/topic/replies directly. Promotes user forum participation.
  • Fixes typo in bbPress Login widget for all languages, removing the preceding quote in the submit button.

Installation is quick and easy. Just activate the plugin and forums, topics, and replies, will show up in your search results.

Troubleshooting and Fixes

I found that anytime there is a change to permalinks, one must go back to Settings ? Forums, and click “Save Changes” to avoid the 404 error.

If you are using the bbPress Login widget, but not the Search for bbPress plugin, you may notice that there is a typo on the submit button (“Log in). It’s got a proceeding quote in it. Simply remove the quote in the not-so-convenient file plugins\bbpress\bbp-includes\bbp-core-widgets.php, line 103 should read:

</pre>
<div class="bbp-submit-wrapper">
 <!--?php do_action( 'login_form' ); ?-->

<button id="user-submit" class="button submit user-submit" tabindex="<?php bbp_tab_index(); ?>" name="user-submit" type="submit"><!--?php _e( 'Log In', 'bbpress' ); ?--></button>

 <!--?php bbp_user_login_fields(); ?--></div>
<pre>

This is unnecessary if you use my Search for bbPress plugin.

Conclusion

Now you can integrate a lightweight forum with sticky topics, email subscription, public/private/hidden forums, and unified search results with a native look and feel to your existing WordPress site. A forum can bring fresh, meaningful data to both the company that runs it and to the company’s customers. It can increase customer loyalty as well as simply make answers easier to find. You can always test forums by making a copy of your existing website using the free Duplicator plugin in the WordPress repository and build it out in DesktopServer before deploying it live. Moderating a forum does have some overhead, but thankfully WordPress can make that easy too. Give it try and let me know how you make out by posting a comment here or in ServerPress.com’s very own forum!

Tagged , , , ,
About Stephen Carnam
I’m a San Diego, California based computer programmer and graphic designer that has been consulting, developing, and maintaining web & software applications for well over ten years. My languages and interests include PHP, Java, JavaScript, 3D rendering/sculpting, and snow boarding.

20 Comments

  1. seanster says:

    Thanks for a great post. I was looking for a good Bulletin Board I am sold! I Appreciate you changing Twenty Eleven up, thats a great start. Not sure if you made the modification, but all single post pages, drop the Right sidebar, I think is a mistake.

    I made the adjustments necessary to add it back in, it wasn’t easy, thankfully someone did a post on it, but of course, I tried to do it myself first, and got hung up. :( You always think its a quick fix, but its not, try google if you get stuck beyond 15 min! :)

    In terms of commerce, I am looking to BUY a Active User forum that is for sale in one of the following niches. (Health, Gadgets, Electronic Music, Yoga/Meditation, Kitesurfing, Occupy Wallstreet movement). If its now 2012, check out my profile if you want to be part of the forum that will probably be up.

    1. Steveorevo says:

      Thank you Sean. It is no mistake, as the TwentyEleven theme does not display sidebars on single posts. But as a resourceful professional, you’ve discovered how to fix that :)

  2. angelomilan says:

    Hi Stephen, I’m using your child theme on http://www.startupforum.it

    I’ve just one problem with the position of the search box when using an image as header.

    This is the final design I have in my mind:

    http://www.startupforum.it/wp-content/images/startup-Forum-bbpress-child.jpg

    I know that the best way to do this is to customize the child theme.
    Can you release a second version for those like me who want an image as header, but with the search box over the image?
    I think that one of the most important for a forum is an highly visibile search box… So…. this will improve user experience.
    With this design, you always know where the search box is.
    Either reading a blog post or when you are in the forum.
    Let me know :)

    1. admin says:

      Hi Angel, you should be able to do this by just altering the style.css file that is included in the theme. Use the attributes for display, margin and padding to position the search box where you want it. ;)

      1. angelomilan says:

        Hello again.
        For future reference, I’m posting the code I added.
        It works, but… can you tell me if I wrote some bad code?

        Thank you

        #site-title {
        display: none

        }
        #site-description {
        display: none

        }

        #branding #searchform {
        background: white;
        top: 14em;
        }

        1. Stephen Carroll says:

          Looks good. Just need a few semi-colons (after ‘display:none’):

          #site-title {
          display: none;
          }
          #site-description {
          display: none;
          }

          #branding #searchform {
          background: white;
          top: 14em;
          }

          1. angelomilan says:

            Thanks! so, like this? Can you tell me why (newbie here)

            #site-title {
            display: none;
            ;
            ;
            }

        2. Stephen Carroll says:

          Actually, how I posted it. You can remove those empty lines (and their semi colons). Checkout http://www.tizag.com/cssT/

          :-)

  3. dmoz says:

    Hey Stephen,

    I had a question about your suggestion to make a bbpress.php file.

    I’m trying to make a very general wrapper for all my forum pages, but I don’t want it to use the WP theme’s page structure. I can’t figure out what to define in the “get_template_part” or “bbp_get_template_part” code to only define a structure for all the forum pages.

    Let me know if you have a minute to take a look and I can send the page code I have. Any help would be greatly appreciated. Thanks.

    1. Stephen Carroll says:

      Hello dmoz!
      This might be more appropriate for the forum. http://serverpress.com/forum/premium-support/general/

      We’ve got some new forum features that will allow you to upload (zipped) files and images that can better convey and help us answer your questions in a timely manner.

      Thanks!
      Stephen

  4. MarkM says:

    Hi Stephen,
    Interesting post, however I have one question related to bbPress plugin setup.
    I have a website with all .html files at the root level and WordPress blog setup at /blog. After installing bbPress plugin for forum, I’m not able to separate blog and forum in permalinks, so to setup bbPress to have forum at /forum, instead of the default /blog/forum. Such permalink is unnecessary and confusing. Do you know how to setup bbPress correctly to solve this issue?

    Thanks in advance!

    1. admin says:

      You can alter your permalinks by going to your WordPress’ Settings -> Forums admin menu and adjusting the slugs options. For our site, we used the default and turned off (unchecked) the “Prefix your forum area with the Forum Base slug (Recommended)” option. Note that you may need to re-save your permalink settings in WordPress’ Settings -> Permalinks admin menu after making this change.

  5. klimas says:

    Hi, perfect article!

    I am solving one issue. I am using plugins WP likes and fbLikeButton and when I use the shortcode to display the FORUMS it shows the like buttons of the mentioned plugins under each and every FORUM title.

    Don´t you know how to filter this? WP likes has at least setting to filter category on which it should not be used but what is the category for forums?
    THANKS!
    Klimas

    1. Stephen Carroll says:

      Hello Klimas,
      You should be able to provide a rule in your style.css to display:none; or float: right (or left) the element to your liking. For additional support, post in our own monitored public forum.

      Regards,
      Stephen

  6. [...] I scratched my head for a while trying to figure out how to add bbpress registration links to my WordPress theme until I finally came across this bbpress tutorial. [...]

  7. natproff says:

    Great post Stephen.

    I’ve uncovered a problem with BBPress that I can’t fix. With BBPress activated, any way I choose to log out (be that WordPress’s own log out or BBPress widget), the redirect adds another subdirectory to the domain and results in a 404 error. Log in works fine, and if i deactivate BBPress the log out works fine.

    example:
    http://www.mysite.com/forum
    when i log out i get redirected to
    http://www.mysite.com/forum/forum

    If you have any ideas what’s causing this I’d love to know!

    Thanks,
    Natalie

    1. Stephen Carroll says:

      Hi Natalie, try posting in the http://bbpress.org/ forum, or our own. The bbPress.org forum has heavier traffic however.

      Regards,
      Stephen

      1. natproff says:

        Thanks Stephen, I already have but not heard anything.

        1. natproff says:

          in case anyone has a similar problem I’ve found a work around by using the Sidebar Login plugin which allows you to specify an absolute URL to redirect to after log out.

  8. [...] More info about organising forums can be found in this article from Serverpress. [...]