How To Add A Forum To Your Thesis Themed WordPress Blog

by on February 21, 2009 · 30 comments

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

Expand2web Forums Screenshot
If you are using the Thesis WordPress Theme and want to add corresponding theme for forum software like phpBB, bbPress or Vbulletin this tutorial is for you.

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.

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:

Blog header code example
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:

overall-header Screenshot

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.
closing-divs-screenshot

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:
styles-thesis-phpbb

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.

Update #2: I’ve moved away from phpBB to SimplePress for my forums. I found that phpBB was too much of a target for hackers and it was way too much work to keep up with and protect.

Article by »

Don is an entrepreneur based in Silicon Valley. He founded Expand2Web and is the publisher of the Expand2Web Blog, and the GetFiveStars Customer Feedback and Reviews service.

Don has written 313 articles on Expand2Web

Author Connect » Twitter | | Facebook |

See my disclosure about advertising and affiliate links

{ 30 comments… read them below or add one }

wGEric February 23, 2009 at 4:03 pm

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.

Reply

Don Campbell February 23, 2009 at 5:42 pm

Thanks @wGEric – that saves a lot of time when testing changes to the theme. I’ll update the post to include your tip!

Reply

giannisonottimista February 25, 2009 at 11:40 am

excellent!

Reply

Jay Thompson April 9, 2009 at 4:33 pm

*Very* nice! But how did you get the “Forum” tab in the nav menu to link to the forum and not just be a Wordpress page?

Reply

Don Campbell April 9, 2009 at 9:13 pm

Thanks Jay!
I see you are using Thesis on your site. To add a new item to your Thesis Nav menu that is not linked to a WordPress page:

1) Go in to WordPress Admin -> Links -> Link Categories. Add a Link Category called “Additional Menu Items.”

2) Add a new link to the page you want to link to from the menu (in this case, your forum) and assign it the new “Additional Menu Items” category.

3) In your Thesis Options, go to the Add More Links section in the middle column, and the Additional Menu Items dropdown. Select your “Additional Menu Items” category and now all links in that category will show up on your nav menu!

I get asked this question a lot so I recorded a short video of how to do it here: How To Add Custom Links to Your Thesis Navigation Menu.

Reply

Somone April 12, 2009 at 2:34 pm

You’ve done a good job but for those who don’t want to mess with code and are more comfortable with selecting options using tick boxes you can use the Simple:Press plugin for WordPress for a fully integrated forum in your Thesis Theme.
Check it out on one of my Thesis sites Beyond 2012 HQ. I wrote an article about how to set it up at another one of our Thesis sites Thesis Theme HQ.

Reply

RichB April 18, 2009 at 8:49 am

Can this also work with bbpress?

If yes any unique items I would need to know to make it work?

Also, have you been able to get bbpress to allow logins form google freind connect?

Reply

Don Campbell April 18, 2009 at 9:15 am

@RichB – I tried bbpress a few months ago. It is supposed to be able to integrate with your WordPress logins, but I found it very rough and difficult to configure that way.

Also, it doesn’t seem like they are updating the code very frequently. They are missing a huge opportunity because there is a lot of demand for WordPress with an integrated forum, and bbpress would fit the bill nicely if they worked on it a bit more.

Thanks for your comment – I’ll keep an eye on it and report back as bbpress evolves.

Reply

RichB April 19, 2009 at 7:52 am

Don, thanks for the timely and honest repsone.

I agree, bbPress could be the solution if they would update it.

I tried your skin method and I get an error message that keeps me form opening the page.

http://www.njaneh.org/forums/

Any thoughts?

I do prefer phpbb but as a novice find the enditing of the files to add anything difficult.

Reply

Don Campbell April 19, 2009 at 8:09 am

@RichB – When I follow that link your forum does come up for me. It looks like you have it mostly working.

Another forum solution that looks promising and is supposed to require less coding to set up is SimplePress.
It is mentioned in one of the earlier comments on this post. I haven’t installed it yet, but I plan to check it out when I have some time.

Have you looked at that?

Reply

Jay Thompson April 19, 2009 at 8:41 am

I played around with phpBB using this GREAT tutorial (thanks Don), but couldn’t get things quite right (due to my customizations and poor CSS skills).

So I tried the SimplePress plug in and have to say, it was easy. It’s HUGE plugin so I have some concerns as to compatibility, performance over time etc but it seems to be running well so far.

I haven’t released it yet as I want to add a few areas to it, but you can see it in action (and post to it if you want to test it out and play around) here:

http://www.phoenixrealestateguy.com/forum/tpreg-forum

Reply

Don Campbell April 19, 2009 at 9:02 am

@Jay – Thanks for reporting back on your experiences with SimplePress. I checked out your forums and they look good.

A couple of things I noticed: (I know you are still working on things)

1) The colors don’t match the rest of your site. Does the plugin provide other color schemes to use?
2) I wanted to leave a post on your forum, but I couldn’t find any place to register as a new user.

I’m very interested to hear what you think of the plugin as you use it – both in terms of administration and the performance concerns you mentioned.

Reply

Jay Thompson April 19, 2009 at 9:08 am

OK, so something is fundamentally wrong with my SimplePress forum mentioned above. It’s returning 404 errors. I suspect I missed a setting somewhere…

Reply

Jay Thompson April 19, 2009 at 10:23 am

Don –

The correct link to my SimplePress forum is:

http://www.phoenixrealestateguy.com/forum/tpreg-forum

This corrects my 404 problem (and feel free to edit my original comment).

To your questions:
1) Yes, 10 “skins” are provided by default. I just went in and did some (very basic) color matching via the skins style sheet. At leat for the skin I chose, the CSS was well commented, so between that and FireBug, editing colors was pretty easy.
2) SP appears to take the membership setting from blogs primary settings. I had registration disabled. Once enabled, it passes through to the forum. You should be able to register now.

Would appreciate anyone’s help who is willing to test it out.

I’ll keep you posted on my thoughts!

Reply

Robert April 26, 2009 at 11:07 am

Has anyone been able to integrate thesis with vbulletin including logins?

Reply

mssmotorrd May 3, 2009 at 4:51 am

It’s the first time I commented here and I must say you share us genuine, and quality information for bloggers! Good job.
p.s. You have a very good template for your blog. Where did you find it?

Reply

Don Campbell May 3, 2009 at 9:30 am

@mssmotord – Thank You – comments like yours mean a lot!
I’m using Thesis for the theme on this blog. I added a custom header and have been refining/tweaking the style sheet over time. There’s a lot you can do with Thesis.

Reply

GreggG May 15, 2009 at 11:52 am

I’ve been watching for a while but now i’m making my first post.
So, I’m looking for some feedback about the forum from regulars.
Looking to meet new people to exchange info with,so leave me your name
Bye,

Reply

janiceenberg June 14, 2009 at 5:59 pm

Just saying hello to you all .. Still a bit confused about the goings on here, but I guess I’ll keep poking around.

Reply

test September 2, 2009 at 6:04 am

Excellent blog was very useful……

Reply

Jonas September 13, 2009 at 11:05 am

Hey Don this is great — I’m at the same place that you were when you first started looking into this so it’s great to know that it can be done.

One question though — while you can select a style template for phpBB that roughly meshes with Thesis, what do you think it would take to make an actual Thesis template for this — one that has the same fonts, styling, etc….

I just think it would be really cool to be able to add a forum that meshes seamlessly with Thesis in terms of styling and not just functionality… any thoughts?

Reply

Don Campbell September 13, 2009 at 11:13 am

@Jonas – thanks for your comment.
It’s a good question – there would be a fair amount of work involved in doing that, but it is possible.

What I’ve found, though, is that I’m moving away from phpBB. It is such a target for spammers that it makes it very difficult to manage. There are literally thousands of spam bots that target phpBB sites.

I’m looking into a plugin called SimplePress (mentioned earlier in this comment stream) and may end up moving to that. It is implemented as a WordPress Plugin, so the styling issue might be a little easier to deal with too.

I’ll let you know what I find out!

Reply

Jonas September 13, 2009 at 11:15 am

Hi Don — that’d be great. I did a bunch of research into forums and came away with the impression that phpBB was the industry standard. Although if there’s another alternative that seems to work well and that doesn’t have the spam problems, I’d definitely be interested in knowing about it.

Keep us posted!

Reply

Natalie September 23, 2009 at 6:12 pm

Thank you so much for this post – although it took the best part of a few hours getting my head around the phpbb.css file to create, with a little tweaking I have actually managed to integrate my forum into the same skin as my site’s theme. While it’s not ideal (hope that future Thesis versions will provide an easier solution for integrating a forum) you have been incredibly helpful! Thanks!

Reply

Phoenix Short Sale July 6, 2010 at 3:37 pm

Great information !!!

Reply

SanJoseBass October 18, 2010 at 2:47 pm

This tutorial got me on my way and I’d like to thank you for that. I purchased a custom theme from Press75.com and I was able to work my way through getting the Hestia PHPBB style to match. I did do something a little different though and I thought it helped simplify things a bit….

The CSS files for Wordpress have a lot of items in there that do not pertain to the PHPBB whatsoever, and I wanted to avoid any overlapping as much as possible.

1. I created a new FORUMS CSS folder and copied the Wordpress CSS into the new folder.

2. I then stripped out everything that did pertain to PHPBB.

This allowed me to not have to mess with any “overlapping” CSS attributes. It also made it easier while customizing as I didn’t have to mess with my Wordpress CSS.

The bottom line is I wouldn’t have been able to get my site to match if it weren’t for your tutorial AND Firefox with Firebug. Thanks again for the post, it really helped out….

Reply

How can I make money on the Internet? August 19, 2011 at 1:08 am

You’ve done a good job but for those who don’t want to mess with code and are more comfortable with selecting options using tick boxes you can use the Simple:Press plugin for WordPress for a fully integrated forum in your Thesis Theme.
how did you get the “Forum” tab in the nav menu to link to the forum and not just be a Wordpress page?

Reply

Don Campbell November 27, 2011 at 3:29 pm

You can just use Custom WordPress Menus to do this. See this video for instructions: WordPress Custom Navigation Menus

Reply

Al Lachman November 3, 2011 at 1:05 pm

Hello I see some old posts about bbpress and thesis here. Maybe you guys can shine some updated light on the issues I am having! I just activated the Bbpress plugin to my word press Thesis theme, but I can’t even see the Forum on my pages…..Can someone give some some guidance on how to integrate bbpress plugin with Thesis??

On a side note, I was able to set up a bbpress plugin Forum on another theme (Awake)but I cant seem to make it work with Thesis.

What I see is the Thesis Blog but not the forum.

Please help! Thanks

Reply

Don Campbell November 27, 2011 at 3:30 pm

Hi Al,
I’m sorry but I haven’t integrated BBPress into any themes yet. I tried it out about a year ago and it just wan’t ready for prime time yet.

Reply

Leave a Comment

{ 1 trackback }

Previous post:

Next post: