Integrating Wordpress and PunBB
September 25th, 2005 by TrevorYou 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://www.almosteffortless.com/forum/">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 our brand new forum »
[...] Thanks to Trevor’s excellent instructions, there’s now a link to our Forum up there in the main menu in our header. Go ahead in and register, then let’s get some conversaions going. Commenting on discussions is fun, but a forum is where real interactivity between readers begins. [...]
[...] I doubt a forum here will get much use, but I’m going to see if I can integrate PunBB forum into Wordpress. Of course, I will be doing this while using the K2 theme. This post here on almost effortless should help a lot. Technorati Tags: k2 punBB wordpress // Used for showing and hiding user information in the comment form function ShowUtils() { document.getElementById(”authorinfo”).style.display = “”; document.getElementById(”showinfo”).style.display = “none”; document.getElementById(”hideinfo”).style.display = “”; } function HideUtils() { document.getElementById(”authorinfo”).style.display = “none”; document.getElementById(”showinfo”).style.display = “”; document.getElementById(”hideinfo”).style.display = “none”; } [...]
[...] Integrating Wordpress and PunBB at almost effortless Technorati Tags: forum punbb wordpressPopularity: 8% [...]
WordPress and PunBB…
It seems to me that every web designer/developer’s problem comes, not so much with the design, but with the actual integration of a content management system, blog, or preexisting content with another part of that website, like, let’s say, a forum. T…
When its integrated like this does it share the database of users or do people have to sign up for the site (ie when they leave comments) and then for the forums too? Thanks
Danno, this is just a visual integration. As far as I know, there aren\’t any deeper integrations with a unified login etc, but there seems to be a lot of demand for something like that. You can check this out, which is something in the right direction. http://forums.punbb.org/viewtopic.php?id=8373
[...] And if all you want is for your forum to look like your blog, then rest assured that there are a couple of detailed guides on that subject lying around. [...]
Hey man, I am going to use this tutorial on my site, if that’s okay with you (will give you credit and a link of course) once I get my new site up and running. I am currently trying to adjust some settings. The site looks perfect in IE (once the forum nav is hovered over), but looks horrible in FF. Any suggestions? And if you have any suggestions about that hoover issue, that would be great too. Thanks man…heres the url:
http://www.webreality.net/wp/Punbb/upload/
Joe, you can feel free to re-publish this article, as long as you give me credit and link back to this page. As for your display problems, you can ask in my forum, but I don’t have time to troubleshoot it with you myself right now.
Great article and It’s working very well on my blog!
thanks
Hi! Thx this…!!!
[...] PunBB Auch hier gibt es ein Plugin, um punBB als Wordpress-Kommentarsystem einzusetzen. Um die neuesten Foreneinträge im WP-Blog anzuzeigen, solltest Du diese Anleitung lesen. Informationen für die Layout-Integration findest Du hier und hier. [...]
[...] La solution a été trouvée ici. [...]
[...] phpBB ist zu umfangreich und scheidete wegen der unschönen URLs aus. Als Kommentarersatz gibt es auch eine Plugin-Lösung, welche wir aber nicht getestet haben. PunBB weist ebenfalls nicht das gewünschte URL-System auf und ist auch noch etwas zu umfangreich. Dafür steckt ein flexibles, sauberes Templatesystem dahinter, das einen Versuch lohnt. Eine Integrationshilfe oder Anleitung sowie ein Kommentarersatzplugin gibt es auch hier. [...]
[...] if all you want is for your forum to look like your blog, then rest assured that there are a couple of detailed guides on that subject lying [...]
[...] Buradaki ve ?uradaki ad?mlarla daha detayl? bilgilere ula?abilirsiniz. Kaynak [...]