Step-by-Step Guide to Creating a Custom bbPress Theme
The following is written for version 2.2 of the bbPress WordPress plugin. Information in this tutorial may not be applicable to earlier or subsequent versions of the plugin. With that in mind, on to the tutorial!
Step 1: Install WordPress
In the past, bbPress was a stand-alone forum script that could work with WordPress if you hacked it a bit, but that is not the case anymore and any information that states as much is outdated. Nowadays, bbPress is a plugin for WordPress that will not work by itself. So, if you haven’t already, you need to install WordPress on your web server for bbPress to work at all.
Step 2: Install bbPress
Once you have WordPress set up, installing plugins is easy. (But you can follow this guide if you still need some help!) In the Plugins area of the admin panel, run a search for bbPress plugins; there will be several that come up, but it should be obvious which is the core bbPress plugin. Install and activate the bbPress plugin. It’s this one if you have trouble locating it.
Step 3: Edit bbPress’ Settings
After installing and activating the bbPress plugin, you will have three new menu options at the bottom of your WordPress admin sidebar:
You will also have two new sub-menu options: Tools > Recount and Settings > Forums.
Now that you know where everything is, click Forums under Settings. This area will help you control basic features and functionality of the bbPress plugin. Take a minute to change the settings to what you’d like them to be.
Note that this area does not contain methods for you to edit the theme’s layout or style. This will change in subsequent bbPress versions a little, but for now this is the case.
Step 4: Make Some Forums
Go to Forums > New Forum and add details to create a new forum. You can make as many forums as you want or venture into making topics, replies, and tags through the admin area if you’d like. Having some of this content already made will likely help you test your design more thoroughly later.
Step 5: Create a Child Theme
If you’re running the default Twenty Ten or Twenty Eleven theme, bbPress should work fairly well out of the box. However, you probably aren’t running these themes or at least don’t plan to run them indefinitely, and so you’ll want to know how to customize bbPress. This is where Child Themes, a feature of WordPress, become useful.
Go to the WordPress Codex and follow the instructions on how to create and activate a child theme (alternatively, this guide provides further detail). For this step–and the next–you’ll need to use an FTP client (FTP instructions here).
A child theme allows you to have two connected themes running at the same time. In the case of bbPress and WordPress working together, one (likely the parent) will contain files for your WordPress design, while the other (likely the child) will contain files for your bbPress design. The child will inherit as many of the style qualities of the parent as it can; whatever else you need to add to the child will be done within its own folder.
Troubleshooting Tip
If you’re having trouble getting WordPress to recognize your child theme, make sure stylesheet referencing is done correctly in your parent/WordPress theme’s header.php. It should look like this:
Step 6: Copy the Default bbPress Theme to Your Child Theme Folder
The default files are no longer stored in wp-content > plugins > bbpress > bbp-themes. There is a folder called default at bbpress > templates > default, but which files need copying I do not know.
While still in FTP and looking at the root folder of your WordPress installation, go to bbPress’ theme folder. That is, go to wp-content > plugins > bbpress > bbp-themes > bbp-twentyten. Download all the files from this folder except style.css. These are the files that will style your bbPress theme.
Now return to your child theme folder (wp-content > themes > yourthemefolder-child). Upload the default bbPress theme files to the child theme folder. You can change the image you see for your child theme in the admin area by uploading a new screenshot.png image to this folder.
Step 5: Customize the bbPress’ Theme Files
With all your files in place, you can now start styling everything. CSS will go a long way to visually styling your forum, of course, but in some instances you’ll want to edit the layout, too. To do this, find the relevant file, edit it in your text editor (Notepad++ is good to use), overwrite the old file using your FTP client, and test it out. CTRL+Z may or may not be your friend.
Sometimes it may be confusing as to which file is controlling what. Note that any time you see bbp_get_template_part in a bbPress template, it is pulling templating information from another file (one often similarly named to whatever function it’s referencing). You may have to do a little digging to find the right files to edit, but they’re all well-named and structured, so it shouldn’t take too much effort.
Now, get theming! If you have questions, visit the support forums.
