Integrating WordPress and PunBB

You might have noticed the new Forum link on the top of this site. I’ve just finished integrating the lovely PunBB with the amazing WordPress, featuring the brand new k2 theme. Visually integrating the two programs is a very easy process, made even easier by the tutelage of LiewCF, who posted a nice guide on his blog.

I’ll walk you through the process of integrating PunBB with WordPress/k2 here at æ.

1. Install PunBB and add a link to your forum (or whatever you call it) to your WordPress theme header. In my case, this meant adding the a link to the forum like this:

<li class="page_item"><a href="http://eldorado.heroku.com">Forum</a></li>

within the

<ul class="menu"></ul>

section near the end of the k2 header code. You can download my k2 header file, if you’d like to have a look at it.

2. The only other thing you need to edit is the main.tpl file included with PunBB. If you’re using the default k2 theme, you can download my main.tpl file, and simply replace yours with that one. The file is located in

/include/template/

within the PunBB folder. This should cover you using the Oxygen PunBB style, but some other styles might not look right. You can edit these via the Profile -> Display options when you’re logged into PunBB.

Customized k2 Theme. If you are using a customized version of the k2 theme, take a look at the code added in-between the

<!-- WordPress Template CSS -->

code comments in the main.tpl file. You might want to change the colors added in the CSS

<style type="text/css"></style>

area to match your own. This should allow you to override the PunBB colors enough to make it match your theme. If you’re using a different custom k2 stylesheet, you’ll want to include that at the top of your main.tpl file instead of the sample.css CSS.

Other Themes. If you made a lot of changed to k2, or you aren’t using k2 at all, you’ll need to collect the CSS, header, and footer code from your blog manually. Do a View Source on your blog, and copy the code for your CSS stylesheets, header, and footer into your PunBB main.tpl file. You might want to begin by downloading the main.tpl file I linked to above, and note the code comment areas, which indicate exactly where to paste in your WordPress code:

<!-- WordPress Template CSS -->
<!-- WordPress Template Header -->
<!-- WordPress Template Footer -->

You’ll have to do some fiddling, but the basic idea is to get the code from your WordPress blog into those 3 sections of the main.tpl file. The goal is to wrap your PunBB forum within your WordPress header and footer, while including the CSS for the overall look and feel. Another small thing is to give the list-item that contains the link to your forum a class of current-page-item as I’ve done in my main.tpl file. This will highlight the forum link in the header when you’re in the forum.

Update: I made a couple of small changed to get things working properly in (boo!) Internet Explorer. My main.tpl file contains the fixes. I added this line to the CSS:

.pun { font-size: 11px !important; }

and also changed this line

#punwrap { padding: 0; padding-top: 10px; margin: 0; width: 760px; }

to sets the font size and width specifically. So, if you’re using the flexible width or a different font size in k2, you might need to make some tweaks.

Update 2: I’ve updated my main.tpl file again to match the new look on this site. If you’re interested, please feel free to take a look. Be careful, though – this file is straight from my site, so it still contains code to include Mint, links to my CSS, header navigation bar, footer, etc etc etc. If you’re going to use this file on your site, you’ll most certainly have to edit it first.

Update 3: Another redesign, another new main.tpl.

That’s it! Discuss… in the forum »

Update 4: By the way, I ended up leaving PunBB and writing this instead:

http://almosteffortless.com/eldorado/