How To Setup bbPress Forums With Your WordPress Theme
Seamlessly integrate bbPress forums into any WordPress theme.
Forums are perhaps the earliest evolution of online communities. However, their relevance has stood the test of time. An online forum is great way to provide support or build a community on your WordPress website.
bbPress is a free forum plugin for WordPress. It’s maintained and supported by the WordPress Foundation. As a result, it’s the easiest and most affordable solution for adding forums to a WordPress website.
We have used the plugin to power the support forums on Organic Themes for several years. It’s an excellent plugin! However, getting the forums to appear exactly how you want may require some work.
In this article, I’ll help you integrate bbPress seamlessly into virtually any WordPress theme. Additionally, for the code inept, we have provided an easy method for adding bbPress forums as well.
Getting Started
First, you’ll need to install the bbPress plugin in your WordPress dashboard. This can be done by navigating to Plugins > Add New within the WordPress admin. Search for “bbPress” in the search field. Then, follow the prompts to install and activate the plugin.
As for the basics of using the plugin, that’s not the topic of this article. So, if you need to learn how to create and manage forums, we suggest reviewing the bbPress documentation.
Forum Demo Content
For testing purposes, we highly recommend installing bbPress demo content. As a result, it will help you understand how forum content will appear on your site.
The demo content is available for download here.
After downloading the demo content file, you’ll need to import the content into WordPress. This can be accomplished using the following steps:
- Navigate to Tools > Import in the WordPress admin.
- Click the “Run Importer” link under WordPress.
- Then, click the “Browse” button, and locate your downloaded demo content file.
- Click the blue “Upload file and import” button.
- Create a new user such as “bbPress_demo” as the author for the content.
- Click the option to “Download and import file attachments.”
- Click the “Submit” button. The content will be imported within seconds.
Upon a successful import, multiple forums, topics, replies, and users will now populate the bbPress post types within the WordPress admin.
Locating The Forums
By default, bbPress adds a “forums” page to your site. However, this page will not be visible among your list of pages within the WordPress admin. Instead, It can be accessed directly by appending the /forums/ directory to your website domain in the URL field. For instance, https://yourwebsite.com/forums/.
Go ahead, navigate to the forums on your site.
Now, your forums may or may not look great. It depends on your theme. That’s because the forums will use the default page template included with your theme, unless your theme has been optimized for bbPress.
If your theme has been optimized, like our Origin or Gamer themes, then you’re in luck! You probably don’t need to proceed any further in this tutorial. On the other hand, if it doesn’t look great, let’s press on. We’ll help you whip those forums into shape!
The Forum Page Template
Sometimes, the page template provided by your theme just won’t cut it for the forums. Fortunately, it’s easy enough to create a forum page template.
For this part, we recommend at least a basic understanding of WordPress and HTML. Additionally, we highly recommend making these changes within a child theme. As a result, your parent theme can continue to receive updates without wiping out your forums.
Okay, we’re going to assume you now have a basic child theme created and activated. Within that child theme folder, you should have at least 2 files, a functions.php and style.css file. We’ll get back to those.
Create The Forum Template
Now, we’re going to create our forum.php file for the child theme. Follow these steps:
- Copy the page.php file from your parent theme.
- Paste the file into your child theme folder.
- Rename the file to forum.php.
- Open the file in a code editor like Atom, or within your WordPress dashboard by navigating to Appearance > Theme Editor.
Within that forum.php file, you will see the code that your theme uses to display pages. It should be relatively simple, and hopefully well commented. For instance, here is the page.php code from an Organic Theme:
In the example code, there are conditionals for displaying a sidebar. So, if you were to add widgets to your sidebar in the WordPress admin, those widgets would display on your pages. If no widgets have been added to the sidebar, then the page content displays at full width, without a sidebar column. Simple enough.
However, you probably don’t want the same widgets that are displayed on pages displayed within your forums. Instead, it’s best to have a separate sidebar for forum widgets. As a result, you can add forum login fields, recent topics and replies, and other useful bbPress widgets to your forums.
That brings us to our next step — creating a sidebar for forum specific widgets.
Creating A Sidebar For Forums
Remember those 2 original files for your child theme? Well, let’s go back to that functions.php file.
Register The Sidebar
Add the following code in your functions.php file to register a new sidebar:
Now, when navigating to Appearance > Widgets within the WordPress admin, you should see the Forums Sidebar on the right. You can go ahead and add forum widgets to that sidebar.
However, displaying them on the front-end of your site requires an additional step.
Add The Sidebar To The Forums Template
Let’s go back to the recently created forum.php file. As of now, it still contains the same code as the parent theme page.php file. We need to edit that code to display your forum sidebar.
First, let’s add the sidebar code. We’ll replace the <?php get_sidebar(); ?> code on line 35 with the following code:
Next, replace the following code on line 22:
<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?>
With this code:
<?php if ( is_active_sidebar( 'sidebar-forum' ) ) { ?>
Great! Your forum.php file should now look something like this:
Keep in mind, these template examples are using code from an Organic Theme. If you’re using a different theme, the code structure may appear drastically different. As a result, you may need to contact your theme developer if you experience difficulty making these changes.
Style The Forums
Now that the forums are displayed with a sidebar on your site, let’s make it look good!
bbPress includes default styles. However, more often than not, those styles conflict with theme styles. As a result, the appearance of your forums might be less than ideal.
We use the bbPress forum styles below within Organic Themes to override any conflicts. While the styles might not work with every theme, it should provide a good starting place.
Within the style.css file of your child theme, add the following styles:
After adding the styles, check the appearance of your forums. View the topics, replies, and user profiles. Hopefully, everything looks great. If not, tweak the styles as needed for your theme.
That’s it! Once you’ve successfully completed the previous steps, bbPress should be seamlessly integrated into your site.
The Easy Method – Using Forum Shortcodes
For some users, creating a child theme, registering sidebars, and duplicating template files may be overwhelming. Fortunately, there is another way. The bbPress plugin provides a number of useful shortcodes for adding forum content to any page.
Add Forums To A Page
Follow these steps to add a bbPress forum to a page:
- Navigate to Pages > Add New in the WordPress admin.
- Enter a Title such as “Community” to the page.
- Add a “Shortcode” block to the content.
- Within the field, add the
[bbp-forum-index]shortcode. - Publish the page.
Now, the forums will appear on the new page. Additionally, you can experiment with the other bbPress shortcodes for adding search forms, login forms, statistics, and more!
Add Forum Styles
The previously provided styles may still be relevant. Fortunately, you don’t need a child theme for adding styles to your site. Styles can be added directly within the WordPress Customizer by navigating to Appearance > Customize > Additional CSS.
Within the Customizer, paste the previously provided styles. Then, publish the changes. As a result, your forums should now appear more organized.
Forum Specific Widgets
If you don’t want to go through the hassle of registering a new sidebar, you’re in luck! There is another solution for displaying forum widgets.
The Jetpack plugin provides Widget Visibility functionality. The option can be toggled on within the Jetpack Writing settings. As a result, you can add bbPress widgets to your theme’s default page sidebar. Then, choose to display them only on forum pages.
All Done!
Or, as they say in Hawaii, “All pau!” You should now have bbPress forums working seamlessly on your WordPress site.
When you’re ready, delete the demo content. Then, start talking and building that community!
