Integrate FluxBB 1.4 with a WordPress site
Part 1 - Integrating the forum into the site design
Somebody asked me to integrate FluxBB into his WordPress site. I was once more surprised to see how simple it actually is to integrate FluxBB into another piece of software after already experiencing that with the new FluxBB website, though I do not know whether that is a general fact or just luck on my side.
This article will not deal with integrating the FluxBB and the WordPress user accounts, but rather making the forum fit nicely into the overall site design, for example using the site main menu.
Recommendations
In general, I have a few recommendations to make regarding integration:
- Only use one style. While it can seem nice to offer your forum users multiple styles to choose from, this is most likely a bad idea when integrating the forum into a site which probably already has some kind of color scheme. Not only that: different styles sometimes use different font families and sizes, which would make your integration less seamless and probably more clumsy on some styles. Only using one style also makes it easier to accomodate changes in the FluxBB core or the style itself.
- Rename the default style. Assuming you are going to start making a forum style that fits well into your site based on the default Air style, it is definitely a good idea to rename that style (or whatever style you use). As the integration process probably requires some editing of the stylesheets, this keeps them from being overridden when updating the source code.
- CSS selectors should use prefixes. It is very useful if your style – just like the default styles do it – uses some prefix on its CSS selectors. That means that all forum pages should be wrapped in a
<div>container (#punwrapin the default styles). This makes integration easier, as there are far less conflicts between the forum’s and the site’s stylesheet rules.
Step 1: Loading the WordPress Core
Integrating parts of another site into a FluxBB style is very easy thanks to the <pun_include> tags. These can be used to include custom PHP (or other) files from either the include/user/ directory (if it does not exist, simply create it yourself) of your FluxBB copy or the directory of the style itself.
So, in our imaginary WordPress site, we would want to display the site’s dynamic header and footer above and below the forum, too. WordPress’ theme architecture helps us with this: It’s themes’ files are split up into different sections, two of them header and footer.
Both template files contain a lot of WordPress functions, though, which means that they cannot just be included from the forum template. To gain access to WordPress’ functionality, we have to include it’s loader file, wp-load.php, too. The good news is that that makes loading the header and footer templates even easier, since we now have access to convenient functions.
So, to get started, create a file called header.php with the following contents in your forum’s include/user/ directory.
<?php
define('WP_ROOT', PUN_ROOT.'../');
require WP_ROOT.'wp-blog-header.php';
get_header();
Note: You need to set WP_ROOT to the directory where the WordPress files are located. In this case, I assumed that FluxBB sits in a subfolder (e.g. forums/) of the main site. You can use PUN_ROOT to specify a directory relative to the FluxBB base path.
In the same way, we create a file footer.php:
<?php get_footer();
This time we don’t have to load any WordPress files, since they are already included in the header.
Now we have some files with dynamic contents for our FluxBB template. To actually insert them into the header, we have to use the <pun_include> tags mentioned above.
So, to use WordPress’ header, open your style’s main template file. It is called main.tpl and you can usually find it in the /style/<your_style_name> directory. If it doesn’t exist, switch to the /include/template directory and copy the main.tpl from there to your style’s folder. This again prevents your changes from being overwritten when upgrading. In that file, replace everything from the very beginning down to and including the opening <body> tag with the following code snippet:
<pun_include "header.php">
We do the same for the footer by replacing everything starting at the closing </body> tag down to the end of the file with this code:
<pun_include "footer.php">
If you visit your forum now, you will probably see its output between your site’s header and footer, but without any styling.
Step 2: Loading the FluxBB stylesheets from WordPress
Loading the WordPress header also means that the WordPress stylesheets are included instead of the FluxBB ones. That means that we somehow have to insert those in the WordPress header template. The problem: stylesheet inclusions and other header elements like RSS feed links etc. are generated dynamically.
Replicating that functionality in WordPress is possible, but not recommendable, because changes in the core would have to be replicated, too. Luckily enough, the <pun_head> tag is used to insert the dynamic header code into the FluxBB templates, too. Even better: <pun_include> tags are executed before other tags, so that we can actually use the <pun_head> tag in the WordPress template.
The header code which is generated by FluxBB consists of stylesheets, meta tags and feed links as well as a page title. The latter would cause conflicts with the WordPress template, as that already contains this tag. Instead of somehow stripping the title from FluxBB’s header code, we just use the one from the forum instead.
This only requires a small edit to the WordPress theme header file. Somewhere in it there should be an opening <title> and a closing </title> tag with some content in between (probably PHP code). We switch between the forum’s header and the site’s title by replacing the title tag mentioned above with the following code snippet:
<?php if (defined('PUN_ROOT')) : ?>
<pun_head>
<?php else: ?>
<title>...here goes the old title code...</title>
<?php endif; ?>
With this done, you can now try visiting the forum. You should see it sitting properly between your site’s header and footer. Well done!
Step 3: Finishing
Integration probably wouldn’t be integration if it worked correctly from the very beginning on. Well, it should be working now. However, usually there are some rules in the forum stylesheet that make the display a little weird (obviously depending on the site’s markup).
As an example: Assuming you are using the default “Air” style as a starting point for your forum style, you will probably notice that there is a lot of whitespace on the top and the bottom as well as on the sides of the forum. In this case, you would have to remove the following lines from your /style/<your_style_name>.css file:
.pun {
padding: 30px 40px;
}
And now enjoy your integrated forum!
[...] This post was mentioned on Twitter by FluxBB, Franz. Franz said: Integrate FluxBB 1.4 with a WordPress site | Part 1 – Integrating the forum into the site design http://is.gd/clOhn [...]
Franz,
What about users login integration between Fluxbb 1.4 and WordPress 2.9 ?
The Graal !!
@Bloody: I will definitely take a look at it. Part 2 will be written some time soon.
Hi Franz, thanks for the tutorial. I agree with Bloody, I am looking forward to read your article about users login integration between Fluxbb 1.4 and WordPress 2.9.
Thanks.
>users login integration between Fluxbb 1.4 and WordPress
Wow, yes, just the grall! I look forward for it too
so…FluxBB 1.4.4
What happened to include/user/?
Hey,
if the folder does not exist, you need to create it yourself.
I updated the article with that info, thanks.
Hi,
11 month later – cant wait for part 2
…
What a disappointment. How is this “integration”. This is making sure header/footer appear the same, which is pretty trivial. Wake me up when you can figure out how to integrate users. Oh wait, there’s BBPress.
Hallo,
habe gerade diesen Bericht gefunden, weil ich mich gerade etwas mit Fluxbb beschäftigt habe.
Grund im deutschen Forum für die Blogsoftware Dotclear ( http://forum.dotclear-germany.com/ ) kam gerade die Frage auf wie man Fluxbb in die Blogsoftware Dotclear integrieren könnte.
Vielleicht gibt es ja auch eine Lösung dafür, auch wenn hier die WordPress Blogsoftware verwendet wird.
Hallo Thomas. Ich denke auch, dass das ähnlich leicht möglich sein müsste. Ich stand mit dem Poster auch schon in Kontakt, auf fluxbb.de: http://www.fluxbb.de/forum/viewtopic.php?id=176. Dabei habe ich ihm diesen Artikel auch empfohlen. Ich selbst habe zur Zeit leider keine Zeit, um das auszuprobieren, aber vielleicht kann ja jemand anderes helfen und diese Ideen übernehmen und zu Dotclear portieren.
@Phoenix,
Yeah, because you really need thousands of users in your wordpress database.
I’ve run wordpress as a CMS consistently since 2.6 and I’ve NEVER considered running BBPress or simple forum or any other type of forum like this…having the ability to appear as though the site is uniform is the key.
If you want integration, go with Joomla…they integrate EVERYTHING better.
Joomla? Seriously? The buggiest and most idiotic system ever written. In the recent most version — which is what, version 11? — SQL injections are possible. Whatever, man. Whatever works for you.
WordPress is a million times better with its caches and amenability to all the new technologies such as Varnish.
I have no problem running with Postgresql as I have written my own plugin to translate all its MySQL queries to PG. Which is much better.
Look forward to some instructions on how to integrated FluxBB with *any external* database — I mean, to login, what cookies I need to set etc. Then I will do the rest.
@Phoenix,
what kind of instructions do you want? FluxBB should work without problems on SQLite v2 (v3 will be supported in the next version), MySQL and PostGreSQL. And the database has nothing to do with cookies – or did I misunderstand something? Anyway, you’re better off asking these questions on the FluxBB support forums.
Yes I will ask at FluxBB forums. Sorry.
What I was asking is whether I can use my own database, and when users login based on my own login code, how can I make them appear as though they have ALSO logged in for FluxBB on my site. For this, when I am logging them in, I also need to setup FluxBB’s cookies, so FluxBB *thinks* that the user is logged in.
Thanks.
Oh, yes. I suggest you take a look at the function
check_cookie(). With everything else, we can help you over at the forums. It is not the first time this kind of thing is being done.Thanks for this tutorial. I’m havign an issue though. I’ve gone over the steps several times and cannot figure out what I’m doing wrong. the forum appears with my theme header and footer, but the actual forum seems unstyled mostly.
http://zeaks.org/forums/index.php is my forum
Any ideas what I might have done wrong?
I figured out what I did wrong, and have it looking the way I wanted. Thanks again
This seems to be of little use,I mean integrating users will have more fun.
It says at the top “Integrating the forum into the site design” It doesn’t say “Integrating the user database”. I dunno why there are so many comments complaining about the content of the post, it’s clearly stated.
True, but it also says “Part 1″. My todo list is too long…
Hi Franz!
Thank you for this amazing tutorial but I got a little problem.
Well I think I made a mistake with the css or something, if you check it out maybe you will understand what I did wrong:
http://ajz.nu/tks/forum/
Thank you so much!
Regards,
JackBlackW
I suggest you include FluxBB’s stylesheet after the one from your WordPress theme – I believe that should fix it.
I tried this,
http://pokit.org/get/?85fe643396108868d0543d6ec9af94b5.jpg
Did not work
So everything works except when trying to login to the forum it seems the form posts to some wordpress thing and wont allow login
Hey Sam,
what exactly happens instead?
This worked perfect for Twenty Ten, I’m trying to do the same with Twenty Eleven now.
It works mostly, but at the top and bottom of the page it shows a white area about 15px high and I’m unable to figure out what’s causing it.
Any ideas?
You don’t happen to have a link, do you? Can you identify the problem using something like Firebug etc.?
link is http://zeaks.org/forums and no, I tried firebug but it won’t pick it up, I really have no idea what’s causing it.
I only see your “site overhaul” page…
Sorry, forgot that was up, I removed it, the link should work now.
Found it.
The problem is line 1332 in Air2.css. Seems like html is being assigned a background color. You need to change that there or overwrite it somewhere else.
That fixed it, thanks alot
That worked great, thanks a lot. With a couple of further tweaks in the CSS of both FluxBB and WordPress, I have the BB integrated in the Blog frames.
However, I have now the problem, that whenever I try to call FluxBB-Pages that make use of “action” in the URI, WordPress appends “/wp-admin/install.php”, appearently thinking that WP isn’t installed.
(Example: “fluxbb/misc.php?action=markread” becomes “fluxbb/misc.php?action=markread/wp-admin/install.php”)
Did you per chance encounter this problem and would have a solution?
Hello Daniel,
thanks for the feedback. Looks like this problem has been bugging a couple of people for a while. Unfortunately I am traveling right now, but I will have a look later – probably when I’m back (three more weeks, sorry).
I trying to remove the white-space in the bottom of my page. Any idea?
http://www.svenskadiablo.se/forumet/index.php
Sorry… This is the link to the issue: http://www.svenskadiablo.se/forumet/index.php
Seems the site is to short and generates white space on the bottom
Looks like you figured it out on the real site now. Everything working okay?
Hi there, I’m using a forum that was actually based on FluxBB and tried out your tutorial just in case. It still works, so thanks!
Unfortunately I’m having the same problem as Sam and Daniel, where trying to visit certain URLs appends “/wp-admin/install.php” onto the end and results in a redirect loop.
I’ll be able to figure out what’s happening and sort it out but just thought I’d ask here first, since you did say in an earlier comment you’d be looking into it and there’s no point reinventing the wheel if you already have a fix.
So, any progress on that at all?
Hey Michelle,
thanks for the feedback.
Unfortunately, I have still not been able to fix this problem. I have been digging through the code, and had a few hopeful traces, but didn’t find anything. If you know WordPress better than I do, you might have better chances.
Hello,
What I did eventually was to simply leave all the pages of FluxBB that do anything, such as the above mentioned “misc.php”, out of the WordPress frames. If I remember correctly they only redirect to some other page anyway.
It may not be the optimal way, but that solved all problems for me.
On a sidenote my report above may not be correct, as “search.php?action=” works flawless within WordPress.
Sorry for the somewhat inaccurate description, it’s been a while.
Hmm, obviously I’d prefer if you wouldn’t have to edit FluxBB core files. But I’m glad there’s a somewhat workable solution.
I think what I initially did was to apply your suggestion above not only to main.tpl but other templates as well and then I had the problem.
I simply removed that and now only main.tpl has the wordpress header and footer. So no editing of fluxbb core files.