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" " <html xmlns="<a href="http://www.w3.org/1999/xhtml">
<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
<pun_include "head.php">
</head>
<body>
<pun_include "body.php">
<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_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
2 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.

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. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>