bbPress is a forum script from the makers of WordPress. Its a very good piece of code and integrates very well with your existing WordPress installation. However there are very less number of themes available for bbPress as compared to WordPress. And it is very important to give the whole site a matching look if you are going to add something on your site. This tutorial will show you how you can integrate both WordPress and bbPress to use your WordPress theme on bbPress, use WordPress sidebar on bbPress and other functionalities.
Most of you might have been already running WordPress and in case you are starting fresh, then follow the instructions to install WordPress:
- Download WordPress.
- Extract and copy the WordPress files to domain root.
- Access the domain in browser (e.g. http://example.com) to install WordPress.
- Click Create a Configuration File, then Lets Go and fill in the database details and click Submit.
- Click Run the install, enter new blog details and click Install WordPress.
If for some reason automatic filling of WordPress database details didn’t work then proceed by following these steps:
- Rename wp-config-sample.php to wp-config.php and open it for editing.
- Fill in the database details.
- Save and access the domain in browser.
- Enter new blog details and click Install WordPress.
WordPress will be installed by now. Your username will be admin and a random password will be generated. Copy the password as you will need it to login for the first time and then you can change it.
Now login with the username and password by clicking on the button Log in. You will see a notification to change your password to one which you can remember. Go to your profile page and change it.
Download bbPress and extract the zip file and copy the bbPress files to a subfolder in your domain root.
Access the domain in browser (e.g. http://example.com/bbpress/) to install bbPress.
Click Go to step 1.
Fill in the database details and click on Save database configuration file.
Click Go to step 2.
Click Skip WordPress integration for now. We will do it once the bbPress is installed.
Click Go to step 3.
Fill in the details and click on Save site settings.
Click Complete the installation.
Copy the random password generated for the admin username you selected. (The error in the screenshot is because the email wasn’t send being on localhost)
Change the password by click on your username (this will take you to your profile page), there select Edit in the profile menu and at the bottom of the page you will have the option of changing the password.
Integrate bbPress with WordPress
Integration means we will set them to use same user database and cookies so that both existing and new users can have site wide login synchronization. You can further read benefits of integrating bbPress with WordPress.
Adding Keys and Salts
Open wp-config.php file for editing and locate the following lines :
Generate new keys and salts from this url – https://api.wordpress.org/secret-key/1.1/salt and replace the earlier ones with these.
It should look like
Now open bb-config.php file for editing and locate the following lines :
Again copy the keys and salts you just pasted in wp-config.php file and paste those replacing the above lines. Now rename name of each of them to add BB_ as prefix.
It should look like
Save both the files.
Adding WordPress Integration Settings
Now access bbPress dashboard by clicking on the Admin link or by typing /bb-admin/ at the end of the URL when you are at bbPress frontpage (http://example.com/bbpress/bb-admin/).
Go to Settings and open WordPress Integration Settings.
Set User Role Map as what you would like to assign to existing and new users who have no roles assigned in bbPress.
Now enter User Integration settings down the screen.
- Enter WordPress address (URL)
- Enter Blog address (URL)
Next 3 options will be locked as we have already defined those in bb-config.php file.
- Enter WordPress table prefix. It is usually wp_ unless you have changed it.
Leave the remaining options and click Save Changes.
bbPress Integration plugin
- Install this WordPress plugin – http://wordpress.org/extend/plugins/bbpress-integration/
- Activate it.
- Go to Settings and select bbPress Integration.
- Fill in the bbPress URL and click on Save Changes. (Other two will not be applicable if you are following this tutorial only)
- It will provide some code to add in the wp-config.php file.
- Add the code in wp-config.php file.
- Remove the plugin.
Simple Integration is completed now and we will proceed with deep integration now.
Deep Integration of bbPress with WordPress
Open bb-config.php file and add the following lines of code above where you define database connection settings.
I will briefly explain what are we going to do here. WordPress outputs its theme by calling
- get_header() for header.php
- get_sidebar() for sidebar.php
- get_footer() for footer.php
Similarly bbPress calls bb_get_header() & bb_get_footer.
We will create new theme by copying the default theme code and then changing the function calls to make it use the WordPress functions so that bbPress content is shown inside WordPress theme.
bbPress theme editing
Copy the default theme of bbPress from bb-templates folder into my-templates folder. If my-templates folder doesn’t exist then create one at the same level (root of bbPress). Open style.css file for editing and change the theme name in the starting commented lines so that you can distinguish it from the original one in the dashboard. Activate this theme so that you can see the changes live when you edit it.
Before we proceed, I would recommend using Notepad++ as we will need to do make same changes in all files at once.
Learn how to search and replace multiple text quickly.
Open the main page of WordPress blog and find out which <div> contains the content of the pages by looking in the source code. In Google chrome, you just right click and select Inspect element. In firefox you would need firebug addon for the same.
Here is what it looks like for the default theme :
The grayed line is what we are looking for. It will be <div id=”content” class=”blah blah-blah”> for most of them themes but pay attention, after header and before sidebar (if it has one) or before sidebar, it will contain all the elements of the page.
- Replace bb_get_header(); ?> by get_header(); ?> <div id=”content class=”narrowcolumn” role=”main”> in all files.
- Similarly replace php bb_get_footer(); by php get_sidebar(); get_footer(); in all files.
We have done all of the changes required at the bbPress end. Now we will move on to some changes in the WordPress theme where we will load the bbPress stylesheet and call bbPress functions where plugins can hook up so that no functionality is reduced.
WordPress theme editing
Copy the bbPress theme stylesheet, rename it to bb-style.php and put in the WordPress theme folder.
Inside header.php look for this line
Just before this line add the following line
and then look for this line
Just after this line add the following line
Similarly in footer.php file, look for this line
Just after this line add the following line
Now if you take a look at the bbPress forum, header will look somewhat messed up because of the conflict between the both stylesheets. Remove the conflicting CSS from bb-style.css or use the one I have created for this tutorial (it should work fine)
This concludes our theme matching tutorial for bbPress by using deep integration with WordPress. Our new look is very much capable of using WordPress power without sacrificing anything bbPress has to offer.
Finally when your site has grown to a large userbase and you are looking for optimization techniques, then is the time to create a matching bbPress theme instead of using deep integration as that will help decrease the server load. You can read more about the advantages and disadvantages of bbPress deep integration.