Ekto gammit

Integrate PunBB into your WordPress site

The info in this post is pretty old but I’m leaving it here for reference, regardless…

I wanted to add a forum to my WordPress blog but everything I came across did not integrate well (design/page continuity, etc.) or was too simple for my tastes… Then I came across a tutorial here (there are a few around, that’s just the one I tripped across). Following the tutorial I had a somewhat more integrated forum…
…where the blood-splatter of our butchery won’t stain anything…
With the lessons learned and the release of PunBB 1.2.15 I decided to see if I could do a better job. Since the first install/integration I had added a css-based navigation menu and some random quotes which did not display when my banner/header was displayed above the PunBB forum.

Annoyed, I picked up the scissors and started running….

Important to this whole process is where I installed PunBB. I chose /wp-content/myforums. If you do choose to install in a different location/path just modify my examples accordingly, however, you may experience problems if you move it outside the ‘wordpress’ directory (YMMV).

Since I didn’t want to re-design or customize PunBB any more then necessary, I used their template system as well as their include/user feature (allows a user to ‘include’ their own PHP scripts/pages).

First I had to massage my WordPress theme’s header.php into 2 files I named head.php and body.php so there wasn’t any DOCTYPE duplication and it would be valid XHTML strict. About now is a good time to copy your header/php file to a place where the blood-splatter of our butchery won’t stain anything.

The following will only work in versions less than 2.3
With 2.3 I had to remove all calls to WP functions.

  1. Remove all lines (at the top of the header.php file) that refer to <!DOCTYPE <html and <head (as these would duplicate what PunBB 1.2.15 already sends)
  2. Add this in it’s place, right at the top: <?php require('../../wp-blog-header.php'); ?> (this allows our WordPress functions to be used)
  3. Scroll down to the </head> (head closing) tag and delete it AND everything that follows through the rest of the file.
  4. Save it as /wp-content/myforums/include/user/head.php
  5. Re-open the original, unedited header.php file (same one we used above)
  6. Delete everything from line #1 all the way through, and including, the <body> tag
  7. Now save that as /wp-content/myforums/include/user/body.php
  8. Now open your themes footer.php
  9. Scroll down to the end of the file and delete any reference to the closing tags
    </body> and </html>
  10. Now save that as /wp-content/myforums/include/user/foot.php
  11. Now open /wp-content/myforums/include/template/main.tpl
  12. After the line containing <pun_head> but before the line </head> insert the line: <pun_include "head.php">
  13. Then, after the line containing <body> but before the line <div id="punwrap"> insert the line: <pun_include "body.php">
  14. And finally, after the 2 closing </div> but before the </body> insert the line: <pun_include "foot.php">
  15. Lastly, I killed PunBB’s <title> by opening /wp-content/myforums/header.php and commenting out line #79 like this: <!-- <title><?php echo $page_title ?></title> -->

Et voilá!

I found the minima theme for PunBB worked best for my site, but after the integration steps above, I still found annoying traces of borders, so I opened /wp-content/myforums/style/imports/Minima_cs.css and changed the #brdmenu border-width: element/property to border-width:0;

I also found the PunBB ‘header’ (in the box along with the top horizontal nav links) very clumsy so I commented it out, effectively.

Here is the original main.tpl:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="<a href="http://www.w3.org/1999/xhtml>/a>
<pun_content_direction>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
</head>
<body>
<div id="punwrap">
<div id="pun<pun_page>" class="pun">
<div id="brdheader" class="block">
<div class="box">
<div id="brdtitle" class="inbox">
<pun_title>
<pun_desc>
</div>
<pun_navlinks>
<pun_status>
</div>
</div>
<pun_announcement>
<pun_main>
<pun_footer>
</div>
</div>
</body>
</html>

And my finished /wp-content/myforums/include/template/main.tpl:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!-- <div id="brdheader" class="block">
<div class="box">
<div id="brdtitle" class="inbox">
<pun_title>
<pun_desc>
</div>
<pun_navlinks>
<pun_status>
</div>
</div> -->
<pun_navlinks>
<pun_status>
<pun_announcement>
<pun_main>
<pun_footer>
</div>
</div>
<pun_include "foot.php">
</body>
</html>

I thought this worked quite well with my theme (Barthelme) and it is (was?) XHTML valid.

Integrating it with other themes may require different ‘tweaks’ but this tutorial should get you in the ballpark.

As always, feedback is welcome!

Tagged with: , , , , , ,
Posted in Computers, Things, WordPress
12 comments on “Integrate PunBB into your WordPress site
  1. kirkpatrick says:

    Hello? All the code is missing. You open <code> but nothing follows it, and the closing tag is missing.

    Might be nice to see what you did. OK?

  2. Sam says:

    @kirkpatrick: Thanks for pointing that out, at some point formatting for the code was mangled…

    Should be all better now.

  3. lasertest says:

    This page really has all the info I wanted about this subject and didn’t know who to ask.

  4. I’m really enjoying the theme/design of your blog. Do you ever run into any browser compatibility problems?

    A handful of my blog readers have complained about
    my blog not working correctly in Explorer but looks great
    in Opera. Do you have any solutions to help fix this problem?

  5. ztgaoxin.com says:

    Tal como certo dos seus efeitos secundários contudo hirsutismo (desenvolvimento agigantado com pelos),
    ainda por cima ele foi arrumado comercialmente com finalidade de tratamento dentre
    alopecia. http://ztgaoxin.com/comment/html/?377155.html

  6. vaytien.me says:

    This is the perfect webpage for anybody who wants to find out about this topic.
    You realize so much its almost hard to argue with you (not that I personally
    would want to…HaHa). You definitely put
    a brand new spin on a topic which has been written about for many years.
    Great stuff, just great!

  7. Bora aprender a fazer uma maquiagem bem muito, muito bela? http://CELSOKAMURAMAQUIAGEM.COM.BR

  8. Anastasia says:

    When someone writes an article he/she maintains the image of
    a user in his/her mind that how a user can understand
    it. So that’s why this article is perfect. Thanks!

  9. misvulva.com says:

    you’re really a excellent webmaster. The website loading pace is amazing.
    It sort of feels that you’re doing any unique trick.
    Also, The contents are masterpiece. you have performed a fantastic process on this matter!

  10. ukmpp.web.id says:

    What a information of un-ambiguity and preserveness of precious know-how regarding unpredicted feelings.

  11. Superb blog! Do you have any recommendations for aspiring
    writers? I’m hoping to start my own site soon but I’m
    a little lost on everything. Would you recommend starting with a free platform like WordPress or go for a paid
    option? There are so many choices out there that I’m totally overwhelmed ..
    Any recommendations? Cheers!

  12. Ezequiel says:

    dever da fêmea na Anos Nota – Régine Perroud. http://sweetiebomi.com/xe/free/371104

1 Pings/Trackbacks for "Integrate PunBB into your WordPress site"
  1. Integrate PunBB into your WordPress site | Sam Devol says:

    […] the original: Integrate PunBB into your WordPress site | Sam Devol Comments0 Leave a Reply Click here to cancel […]

Leave a Reply

Your email address will not be published.

*