How To Add A Forum To Your Thesis Themed WordPress Blog

Do you want to add a forum to your WordPress blog that is sporting the Thesis theme? Here’s how!

I’ve wanted to add a forum to Expand2Web for some time. I’m using the Thesis WordPress Theme and am very happy with it. But it does not have a corresponding theme for forum software like phpBB, bbPress or Vbulletin.

Then I stumbled across Chris Coyier’s excellent video that shows how to “skin” phpBB with your WordPress Theme. That gave me the motivation to do this with Thesis and phpBB, which happens to be my favorite forum software.

While this isn’t a Thesis “theme” for phpBB, it allows you to “skin” your phpBB forum to give it the same header and navigation that the rest of your blog has, so that it looks like it is nicely integrated into the rest of your site.

Here’s how you do it.

Step 1: Install phpBB

First, you’ll need to install phpBB. If you are using a hosting provider like BlueHost, they have a SimpleScripts 1-click installer for phpBB.

If not you can still install it as long as your hosting provider supports PHP and MySQL, but you’ll have to download phpBB and install it the long way (which isn’t so bad.) I installed phpBB in the /forums directory off the root of my website.

Step 2: Choose Your phpBB Style

phpBB comes with a very nice style called prosilver. You’ll want to check it out to see if the colors are compatible with your blog colors and styles.

There are a lot of other styles available for phpBB – I ended up selecting and installing prosilver Special Edition because the colors matched with my blog better and I didn’t feel like doing a lot of custom .css work.

Step 3: Modify the phpBB Header

The important files that we’ll be working with in phpBB are the overall_header.html and overall_footer.html files in your forum/styles/prosilver/template directory.

If you installed and activated a different theme than the default prosilver theme, then you’ll want to navigate to the templates directory in that theme instead.

Get your blog header code

Now go to your blog in the browser, and view the source code. Copy out the header section of your blog code, just below the opening body tag. On my blog, that looks like this:

Copy that code to your clipboard or to a text editor, and then open up the overall_header.html in your phpBB style. You’ll want to paste this code in that file right after the opening body tag. Here’s what mine looks like:

Note: The method I used here is “static”; if you change your blog header or navigation menu later you will need to re-copy the html from your blog to phpBB if you want the changes to show up on your forum. If any Thesis gurus out there can tell me how to do this part dynamically I would love to hear from you!

Step 4: Modify Your phpBB Footer

Close Your DIV Tags

Ok, now you need to edit your phpBB overall_footer.html file to close any DIVS that you opened in the overall_header.html file. In my example, I opened two DIV tags, so I just need to insert two closing DIV tags in overall_footer.html just before the closing body tag.

Step 5: Import Your Thesis Style Sheets

Next, you need to make phpBB import the same CSS styles that your blog has.

I found that I only needed the following stylesheets from Thesis:

• wp-content/themes/thesis/lib/css/style.css
• wp-content/themes/thesis/lib/css/nav.css
• wp-content/themes/thesis/lib/css/header.css
• wp-content/themes/thesis/lib/css/widths.php

So I just did a view source on my Blog home page again, and copied these lines. Paste them just before the closing head tag in your phpBB overall_header.html file. It should look like this:

You’ll notice one additional style in there – phpbb.css. There are some CSS IDs in the phpBB styles that have the same name as some of the Thesis styles which causes conflicts.

So I created phpbb.css to override them. I placed it in my wp-content/themes/thesis/custom directory. I took the #header styles out of my Thesis custom.css (I customized my header) and put that code into phpbb.css because I did not want to import custom.css into phpBB to minimize conflicting styles.

You’ll want to import it into your phpBB overall_header.html like your other Thesis styles.

Here is a link to my phpbb.css so you can download it and use it for your phpBB too. (You’ll want to remove my header image from this though.)

If you’ve made a lot of changes to your Thesis theme, you may have to adjust some other .css to get everything to look right. If you do, just override styles in the phpbb.css file.

The custom directory is one of the very cool features in the Thesis theme. It allows you to place all of your theme customizations in one place so that when you upgrade Thesis, you can do it seamlessly and preserve all of your customizations.

Clearing the phpBB Cache

Here’s a tip I learned the hard way: when working with phpBB, remember that it caches the html files after you view them (but not the CSS.) So while you are making changes to overall_header.html and overall_footer.html, you need to clear the cache before you’ll see your changes show up.

To do this, go to the /forums/cache directory and delete the tpl_prosilver_overall_header.html and tpl_prosilver_overall_footer.html files each time you make a change and want to test it.

Update: Here’s an excellent tip @wGEric left in the comments – In phpBB3 under Load Settings there is an option called “Recompile stale style components:”. Set that to yes and you won’t have to clear the cache after every change. phpBB3 will not use the cache if there have been changes made to the file.

Whew! Well if you’re still with me, you should have a nice new forum that has the same header and navigation as the rest of your Thesis styled blog.

Please let me know your comments, suggestions and experiences in the comments below. I’ve also created a forum thread about this topic so that we can all chime in and help each other out.

Tagged as: forum, phpbb, thesis theme, wordpress blog