Seamless WordPress bbPress Integration
If you’ve ever installed bbPress you know that it supports several different levels of integration with an existing WordPress blog. By default you can integrate cookies, users, and even have access to WordPress functions. After all of this, however, the user will still experience two independent applications. Most likely the themes you are using were not made with each other in mind. This doesn’t have to be the case, and if you’re willing to get your hands dirty you can get your bbPress installation to look and feel as if it is entirely a part of WordPress. Here is an example of what this looks like: Example.
To begin, you will need to install (or modify) bbPress with full WordPress integration. This means cookie, database, and functional integration (add require_once(‘path/to/wp-blog-header.php’); to your bb-config.php for functional integration). I did this with WordPress 2.7.1 and bbPress 1.0 alpha, however, if you prefer to use the stable version of bbPress, you can find information on how to do this Here.
Once everything is installed its time to get your hands dirty. To go further we’re going to have to make a few changes to the code. Locate your theme directory. I used the default Kakumei theme. Keep in mind that a large portion of your bbPress theme is going to be stripped out (header, footer, sidebar) so don’t spend to much time selecting a theme. After you locate the directory of your current theme, you’ll need to do a search and replace through every .php file in your theme. There are several files so I suggest you use a program to do this for you; Notepad++ allows you to search and replace across multiple files.
You’ll need to do two searches:
Find:
bb_get_header();
Replace with:
global $is_bb; $is_bb = true; get_header();
get_header(); will cause bbPress to use WordPress’ header as opposed to its own. I added the additional code global $is_bb; $is_bb = true; you’ll see why later. You’ll need to do the same thing for the footer as well.
Find:
bb_get_footer();
Replace with:
get_footer();
Now that that’s done, upload the files and take a look at your forum. You should see the body of your forum embedded inside your wordpress theme. You should also notice that your forum looks pretty terrible. Don’t worry we’ll fix this in the next step.
What we need to do next is tell your wordpress theme to use your bbPress stylesheet if we are viewing the forum. This is where that additional code I added comes in. In your WordPress theme’s header file add the following lines before the first stylesheet is linked (ie before the first <link rel=”stylesheet”…):
<?php global $is_bb; if($is_bb) : ?> <link rel="stylesheet" href="[path to bbPress theme stylesheet]" type="text/css" media="screen" /> //add additional stylesheets if needed <?php endif; ?>
Make sure to replace [path to bbPress theme stylesheet] with the path to your current bbPress theme’s stylesheet.
If you look at your forum now, you’ll probably see a terrible mess. This is because your WordPress style sheets and your bbPress style sheets conflict. If you didn’t use the default theme you’re on your own for altering your bbPress stylesheet. Make sure you remove any elements that are directly conflicting with those in your WordPress theme (ie header, sidebar, footer elements). You’ll also want to look out for any position, and float attributes. You may also need to remove the width attribute for your forum body.
If you did use the default theme or the blue version of the default theme, you can use the stylesheets that I’ve already altered. I don’t promise that they are bug free, but they’re working well for me so far.
Make sure to rename them to style.css.
Now that you’ve altered your stylesheet, everything should look good. You arn’t done yet, however. Most likely all of your bbPress navigation (ie login, admin panel, logout) buttons are gone. If you correctly integrated WordPress cookies login and logout shouldn’t be a problem. To replace any links that were lost, code them directly into your WordPress theme, using the $is_bb variable to only display them on the forum.
Good Luck!
Fatal error: Call to undefined function get_header() in D:\xampp\htdocs\blog\bbpress\bb-templates\kakumei\front-page.php on line 1
how to fix it?
I’m using localhost
blog address
http://localhost/blog/
bbpress address
http://localhost/blog/bbpress/
thanks
Did you include wp-blog-header.php in your bbpress config file?
yp I’ve inculde it like require_once(‘wp-blog-header.php’); but its not working. what can i do? remember i’m working on localhost not live!!!
Assuming everything is installed and configured correctly it shouldn’t matter whether it is live or local (of course that is a big assumption). Really I can’t say for sure what is happening here other than that for whatever reason the get_header() function is not being found. Normally this would me that the necessary file (wp-blog_header) is not being included.
i did but now all the background are white. different like the main blog.
the login/register button also gone. Can u make another tutorial about this. thanks
The background is gone because you have conflicting style sheets. From the tutorial:
“If you look at your forum now, you’ll probably see a terrible mess. This is because your WordPress style sheets and your bbPress style sheets conflict. Make sure you remove any elements that are directly conflicting with those in your WordPress theme (ie header, sidebar, footer elements).”
The login/register button is missing it was a component of your bbpress header. Also from the tutorial:
“Most likely all of your bbPress navigation (ie login, admin panel, logout) buttons are gone. If you correctly integrated WordPress cookies login and logout shouldn’t be a problem. To replace any links that were lost, code them directly into your WordPress theme, using the $is_bb variable to only display them on the forum.”
In other words, you’ll have to hard code new login/register links into bbpress like so:
Thanks. Now it works. But the background is disappear. Any suggestion? thanks
http://www.justinbieberzone.com/forums
forgot.. i dont understand this
[path to bbPress theme stylesheet]
I put [/home/metroadv/public_html/justinbieberzone/forums/bb-templates/kakumei/style.css], and the background is empty, i want white like bbpress. thanks
The brackets [] just indicate that it is a place holder. Remove them.
Unfortunatelly, this solution does not seem to work with WP 2.9.1 and BBP 1.0.
It appears to be working just fine on my test site. What exactly isn’t working? Could it be your wordpress or bbpress theme that is causing an issue?
i cant seem to get the stylesheet working. is this the right code:
//add additional stylesheets if needed
tthanks!
That’s not code at all, its a comment (sort of, a comment is technically code, but it has no expressive power). Your are meant to replace the [path to bbPress theme stylesheet] part with the actualy path (url) to your stylesheet.
Indeed, seeing the same results as Ced, using this technique.
It’s maddening, as I would really like to have bb integrated into my wp.
Good article, just the same!
My example implementation does not seem to have this issue (ex http://everythingdev.com/forum/tags.php?tag=about ). Since this appears to be a recurring issue I’d be happy to look further into it. However, I would need to know the conditions under which this problem occurs: wordpress version, bbpress version, and which themes are in use for each. If the themes are not available for free I’d need a copy of each (for the purposes of this test only of course).
Just solved this issue actually
Had to change the WP header.php to use the BB title statement if BB page is active.
`
<link rel="stylesheet" href="/style-bbp.css” type=”text/css” media=”screen” />
» Blog Archive
`
Yikes, looks like the code formatting got munged… here is a pastebin link:
http://pastebin.org/67229
(feel free to update this comment with the pastebin code contents + correct code formatting. Tried using backtick but it didn’t encapsulate everything)
Here you go:
<?php global $is_bb; if($is_bb) : ?> <title><?php bb_title() ?></title> <!-- BEGIN bbpress CSS integration --> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style-bbp.css" type="text/css" media="screen" /> <!-- END bbcode buttons integration --> <?php else : ?> <!-- below line was moved from above in the wp header down to here --> <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title> <?php endif; ?>Thanks for this, you have been a great help. Also with posting the style sheets
.
Regards,
Martijn
I was wondering if you could explain how/where to edit for the user menu? I do not know any PHP, so I am at a loss =)
I’m not exactly sure what you mean by “user menu”, can you clarify? Also, though most of the necessary changes are simple, they do require some basic programming knowledge. I’ll do my best to explain, but ultimately this is a job for someone with coding experience.
I’m thinking this person might mean for the wp-admin screens. I just stumbled upon your site after using some other tutorials to do a wp/bbpress integration, and all is going well EXCEPT the WP admin screen (dashboard) has completely lost some (though not all!) aspects of its CSS formatting, whereas the BBPress admin screen appears completely fine. Have you run into this before and how would you recommend troubleshooting? I have some programming experience but am by no means a PHP expert… what I’ve learned, I’ve learned through working with Wordpress for the past year or two. The BBPress admin pages seem to point directly to the BBPress CSS files, whereas the WP ones use PHP tags instead of direct links, so I’m wondering if for whatever reason the code is getting confused somewhere.
Been struggling with this on and off for several hours today so of course it’s time to put it away and revisit tomorrow, but anyway, figured I’d run this past you to see if you had any ideas…
The integration should not have an effect on either the wordpress or bbpress dashboards; they should remain distinct after the integration. Have you modified files in the wp-admin or bb-admin directories? The only files you should need to modify are in the theme directories (both bbpress and wordpress).
I really liked the article and am grateful as I have already begun doing exactly what you have explained. Would anybody know how to display parts of bbpress in wordpress? My wordpress category pages are the same as the bbpress forums. Would it be possible to “bbpress- include latest 10 posts from forum ‘apple ipod’ ” on apple ipod category page in wordpress?
The simplest way would most likely to be to manually pull the posts out of the bbpress database. If you used the same method used for merging bbpress into wordpress there could be a problem with circular dependencies, unwanted output, and unnecessary overhead.
Great article, thanks a lot! Works (almost) perfect using Atahualpa 3.3.3 and Kakumei… only a few tweaks needed now.
One problem I had was that I couldn’t get the path to wp-blog-header.php right, so I used the following line instead:
require_once($_SERVER['DOCUMENT_ROOT'].’/wp-blog-header.php’);
This allows you to specify the path as you would see on the web (i.e. above would be http://www.example.com/wp-blog-header.php). Definitely useful for us with dangerous half knowledge
Nice tutorial. I have a little problem, if I use the WordPress header with get_header(), all tags from the forum pages are “Page not found”. But however the pages are correctly displayed, it’s only a title problem. Strange.
I’m not sure what the cause of that problem is; in my installation tags work just fine. Make sure you use get_footer in place of bb_get_footer as well. If you can provide me with a link to the forum in question I will take a look at it, but off the top of my head I don’t know what is causing this problem.
Oops, WordPress remove html in my comment. I wanted to say : all tags from the forum pages are “Page not found”.