miniBB ® miniBB®
miniBB Support Forums
 | Forums | Register | Reply | Search | Statistics | Manual |
Custom Tutorials and Modifications miniBB Support Forums / Custom Tutorials and Modifications /   

Integrating miniBB in a Wordpress theme

Author deuced
Registered
#1 | Posted: 24 Jul 2008 03:25 | Edited by: deuced 
Hello, I ve made this tutorial I wanna share about integrating miniBB forums in your WordPress layout matching perfectly the style you use with the most easy and transparent way, without making lots of changes, in a way that we can upgrade both scripts without having to make all things from the start each time.

Notes before we start:

If you want to synchronize miniBB with WordPress (that means share the same user table) you 'd better read this link: http://www.minibb.com/forums/11_4389_1.html and it is NOT covered with this tutorial. Before you begin backup everything, both WordPress and miniBB (databases AND files) just in case you want to revert back without losing half of your hair!!! Testing it at a localhost installation will be perfect.

Requirements:

- A working WordPress installation, preferably the latest one.
- A working miniBB installation, preferably the latest one.
- MiniBB should be installed in a separated folder INSIDE your WordPress folder.
- MiniBB should be in classic style so make sure you have $startPageModern=FALSE; in setup_options.php and that is because you ll have WordPress sidebar(s) around and that won't look good.
- Ability to edit php files with a text editor like Notepad or (better) Notepad2.
- For the purpose of this tutorial we assume that WordPress is in the ROOT of our domain and miniBB installation folder is named forums. That means your Wordpress should appear in http://YOUR_DOMAIN/ and miniBB should appear in http://YOUR_DOMAIN/forums/ In case you use different structure or names adjust accordingly.

So here we go...


Step 1

According to miniBB manual about "Including in your own PHP script" we must make a file which will include a header and a footer and minibb index.php file. To make things a bit easier RENAME miniBB index.php file to something else like forums.php so you can use the name index.php for the file that will include header, footer and our newly forums.php file.

So the old index.php should be named forums.php and then create a new index.php which will have this code inside:

<?php
ob_start();
include ('./forums.php');
$flushed=ob_get_contents();
ob_end_clean();
/* Output your header here */
echo 'header';
echo $flushed;
/* Output your footer here */
echo 'footer';
?>

Going to http://YOUR_DOMAIN/forums/ should appear your miniBB forums along with the word header at the top and the word footer at the end of the page. Anytime you want to revert back just rename forums.php to index.php and you 'll have your forums like you did without any header or footer.

Step 2

Now what we need to change is SOME of the files that are inside miniBB templates directory so you should better have a backup of them before you do it.

First open main_header.html file and REMOVE everything from <body class="gbody"> and UP. Then open main_footer.html file and REMOVE </body> and </html> at the bottom.

Now go to your main miniBB installation and copy ALL your bb_default_style.css content to your WordPress theme CSS file at the bottom.

Don't test anything now. It'll work but you 'll be disappointed from the result. Just go to...

Step 3

What we need now is to construct a header and a footer from WordPress. Again this is pretty straight forward if you follow the manual about "create static pages" : http://codex.wordpress.org/Creating_a_Static_Front_Page

To create just a STATIC page in WordPress without any of it's dynamic content you 'll have to make a page and put it in it's root installation with that code:

<!—FIRST PART-->
<?php
define('WP_USE_THEMES', false);
require('wp-blog-header.php');
get_header();
?>

<!—SECOND PART-->
<div id="content">
WHERE MAIN STATIC CONTENT AND POSTS LIVE
</div>

<!—THIRD PART-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

As you see there are three parts, the first one is calling the header, the third is calling sidebar and footer. So we need to concentrate to the second part, which is where our miniBB will be shown. To match perfectly I suggest that you open page.php, which is inside your WordPress theme folder and check the lines AROUND the LOOP.

Let's take a look at the default theme code removing get_header() get_sidebar() and get_footer() so that's what it should look like:

<div id="content" class="narrowcolumn">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>

Remove php lines and you 'll get something like this:

<div id="content" class="narrowcolumn">
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">

</div> </div> </div>

Now change it to have static content like this:

<div id="content" class="narrowcolumn">
<div class="post" id="post-forum">
<h2>My FORUM page</h2>
<div class="entry">

</div> </div> </div>

Note that the changes are depending on your theme. So open your theme's page.php and try to construct something similar keeping all div's ID and classes.

So now it's time to play! We won't construct one static page but two. In fact we will split it so miniBB will take it's place in the middle. Make two static pages based on the code above and call it whatever you like. I ll name the first one miniheader.php and the second one minifooter.php and that's the code they 'll have:

miniheader.php

<?php
define('WP_USE_THEMES', false);
require('wp-blog-header.php');
get_header();
?>
<div id="content" class="narrowcolumn">
<div class="post" id="post-forum">
<h2>My static FORUM page</h2>
<div class="entry">

minifooter.php

</div> </div> </div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

As we said, SAVE them in your WordPress ROOT folder and proceed to...

Step 4

Go again to your miniBB folder and open our newly created index.php and change accordingly:

<?php
ob_start();
include ('./forums.php');
$flushed=ob_get_contents();
ob_end_clean();
/* Output your header here */
include ('../miniheader.php');
echo $flushed;
/* Output your footer here */
include ('../minifooter.php');
?>

Time for a test! Just type http://YOUR_DOMAIN/forums/ and tell me what you see...

If you use the default theme you 'll like it but if you use a theme more complicated you have more work to do. It all depends on how good you understand the LOOP and your theme.

Hey, is that all? Nope, there's also one more thing...

Step 5

MiniBB admin menu! If you made it so far it's easy! Just repeat Step 1 with bb_admin.php, rename it to something like bbwp_admin.php and make a new bb_admin.php with the following code:

<?php
ob_start();
include ('./bbwp_admin.php');
$flushed=ob_get_contents();
ob_end_clean();
/* Output your header here */
include ('../miniheader.php');
echo $flushed;
/* Output your footer here */
include ('../minifooter.php');
?>

That way you 'll have the miniBB administration panel in the same page and that's all!

But is that all?

Basically YES. But there are lots of things you must find for yourself like playing with miniBB CSS style (which now resides at the bottom of your WP theme style) changing colors, table widths, search pages and many things to make it match your theme but I cannot go more deep as it is something that you should do it for your self. Examples are my site http://deuced.net and my forums http://deuced.net/forums/ in which you 'll get the idea.

PROS: Updating WordPress is easy because no core files are touched so you ll never have a problem. Updating miniBB requires to read the files that have been changed and also you have to be carefull NOT to overwrite the template folder, the index.php and the bb_admin.php but even if you do it's easy to make just few changes again. MiniBB core files are also intact and you should also have ZERO problems. Most important is that now you can keep your sidebars with links (and ads) along with your forums! You also have ONE CSS file to play for your blog and forums.

CONS: Captcha won't work without Paul's magic fingers. Any addons may require things that I have not predicted. I only use color picker so don't hate me if something doesn't work. If you try it please write your impressions.

Conclusion: MiniBB is ultra fast and can be integrate it everywhere. I have tried to integrate many forums in the past but miniBB is the one that uses such a structure which made my life easier to achieve it. I also haven't noticed long delays in my forum page. In fact there are cases where a heavy loaded blog page could be slower than a long miniBB page in my forums. In anycase this solution is more suitable for those that runs small size support forums without "whistles and bells" and may want to let their dynamic sidebar exist.

Test it for yourself and let me know how it goes!

Author Paul
Lead Developer
#2 | Posted: 24 Jul 2008 04:06 | Edited by: Paul 
The thing I always recommend when integrating miniBB - don't spend much efforts in combining it with the existing templates and/or headers, footers etc. It's better to adjust miniBB's header and footer a bit to match your website, but DO NOT include it in the external file. Including and ob_start directives will make the things slower. Maybe they won't be notable slower, but they will.

And when you have layout adjusted, it's easy to combine miniBB's and WP's authorization with our official solution. That finishes everything, and that will let any of miniBB add-ons working with no problem...

Anyway your solution may be helpful for somebody else, so you are welcome to share it :-) Thank you.

Author deuced
Registered
#3 | Posted: 24 Jul 2008 04:56 
You are right but in small size forums speed isn't noticeable and i think that dynamic sidebar advantage will make a difference. In anycase reverting back is easy :)

Author harootun
Registered
#4 | Posted: 31 Mar 2015 03:47 | Edited by: harootun 
I just wanted to report that, close to 7 years later, this customization still works great and I appreciate deuced writing this amazing tutorial. Only change I would make is in the miniheader.php file. If you use

require('wp-blog-header.php');

it will give you 404 errors in Internet Explorer (and cause a few other problems).

But if you change that line to:

require('wp-load.php');

it works really, really well! :)

Author Paul
Lead Developer
#5 | Posted: 31 Mar 2015 23:18 
harootun
Thanks for this update!

Custom Tutorials and Modifications miniBB Support Forums / Custom Tutorials and Modifications / Integrating miniBB in a Wordpress theme Top

Your Reply Click this icon to move up to the quoted message

 Short link for this topic:

 ?
Only registered users are allowed to post here. Please, enter your username/password details upon posting a message, or register first.


Before posting, make sure your message is compliant with our forum posting rules. If not, it may be locked or deleted with no explanation.
 
miniBB Support Forums Powered by Forum Software miniBB ® Features  Requirements  Demo  Download  Showcase  Gallery of Arts
Compiler  Premium Extensions  Premium Support  License  Contacts
Install the Captcha add-on: protect your miniBB-forums from the automated spam and flood.
Captcha Addon for miniBB