Integrating bbPress Forum with WordPress Theme

Problem

When I was preparing to roll out bbPress forum as a part of  WordPress site,  I discovered that process of bbPress user and login integration has a very good coverage on the Internet.

This article deals with integrating bbPress forum “look and feel” with WordPress. How to make bbPress forum look like your  regular WordPress page?  How to create a deep integration,  so users wouldn’t feel that they are leaving one site and now are in a completely different site.

You can judge, how well this advice works based on how close our Forum interface integrated with WordPress theme. One should be able to tell the difference between bbPress styles and WordPress styles by looking at the page code, and not by looking at the page visual appeareance.

Plan of Action

During the course of this article we will create a new custom bbPress template with header.php, footer.php and style.css.

We will copy code from our WordPress theme header and footer files. We will use default bbPress style file for our style.css. Most of the time we will be editing and modifying these 3 files.

To make WordPress to return to page that initiates login request, we will edit core WordPress wp-login.php file. All the user logins will happen in WordPress. For that reason, we also need to disable any calls to bbPress login screens. To do that we would need to make a one line modification in functions.bb-template.php file.

So all in all, this a very non-invasive procedure.

The the whole process was tested once with WordPress 3.1RC3 on Windows 7 and IIS 7.5 and second time with WordPress RC4 on Windows Server 2008 and IIS 7.

The underlying WordPress theme tested here was Magazine Basic 2.6.12 by c.bavota.

Preparations

After you are done with user login integration, you need to make sure you can call WordPress functions from bbPress PHP pages. To do that add this line to your bbPress bb-config.php page:

require_once(dirname(__FILE__) . '/../../wp-blog-header.php');

You have to experiment with number of slashes and dots to use. In the example above bbPress directory is buried 2-levels deep into WordPress directory structure.

Next, create your own bbPress template (called theme in WordPress). To do that:
(1) create a new sub-directory in bbpress\my-templates\YourTemplateName,
(2) copy style.css, header.php and footer.php from bbpress\bb-templates\kakumei and
(3) optionally, create 240×180 image file called screenshot.png in that directory.

Header.php is called from all other bbPress files. We will start making modification to this file and these changes will be immediately be visible as the header of all bbPress pages.

Note: when some files are missing from a template, bbPress uses files from a default kakumei template.

Do not forget to activate your bbPress template in bbPress -> Admin -> Appearance.

WordPress Header

Open your new header.php with your favorite code editing software. For this example I am using Visual Web Developed 2010 Express.

We need to load WordPress style-sheet from your WordPress theme. To do that add line that look similar to a line bellow:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Add this line right under similar line for bbPress style-sheet and visit your forum.

Remark out body and “a” elements

If you have a sidebar or any other elements that contain links, you might need to remark out bbPress styles for link element. I had to remark out this line from bbpress\my-templates\DWC\style.css:

a  { color: #2e6e15; text-decoration: none; }

Remark out #header and #main

Next we need to prevent style-sheet collisions for element #header in WordPress and bbPrees. Open your bbPress style.css and remark out a block of definitions for #header and all its structural elements. Use /* on the first line and */ on the last line of remarked code.

Restore bbPress Admin Link

Next, we need to restore and reposition Admin link to bbPress Control Panel (/bb-admin). It is gone along with bbPress header.

Here is an example of code that I’ve added to my header, right before other WordPress profile and admin links:

<?php if ( bb_current_user_can( 'moderate' ) ) { ?>
<li><? php bb_admin_link( 'text=bbPress Admin ' );?></li> <li class="dot">
<?php } ?>

In that case bbPress Admin link will only show up, if function bb_current_user_can( ‘moderate’ ) returns true. That is exactly, what I need. You do not need the “if” statement above, if there is no need to surround the link with HTML separators.

WordPress Footer

Copy footer.php from bbpress\bb-templates\kakumei to your new bbPRess template folder at bbpress\my-templates\YourTemplateName.

Replace content of your bbPress footer file with code from your WordPress theme footer. Carefully add back a link to bbPress:

<?php _e("Powered by", "magazine-basic"); ?>
 <a href="http://www.wordpress.org">WordPress</a> and
 <a href="http://bbpress.org">bbPress</a>.

When I added the WordPress footer, all of a sudden my WordPress theme sidebar also reappeared to the right of page content. It turn out that my theme smartly loads sidebar element only once, I would not have to go back and add this element to every bbPress page.

Remark out #footer element

Examine the footer appearance. In my case, to make it look right I had to remark out 2 #footer elements in bbpress\my-templates\YourTemplateName\style.css.

If you made aforementioned copyright message changes in WordPress footer, you actual bbPress footer can be just one line:

<?php get_footer(); ?>

It means you just loading WP footer, and that way you only need to maintain footer code on one place.

File “functions.php”

bbPress 1.0 and higher supports functions.php in a template. You need to create this file in your bbPress template folder, if you are planning to reproduce some of your WordPress theme code form functions.php.

I found this file is a good place to place code that allows to support various WordPress features. In the example bellow, I copied code to control page background color.

// This theme allows users to set a custom background
if(function_exists('add_custom_background')) add_custom_background();

I have big hopes for this file. If some theme functionality doesn’t work, I will look to transfer more code from my WordPress theme functions.php to bbPress custom template functions.php file.

Overlapping Titles

Some forum titles on front-page.php are overlapping with the lists of topics and forums.

This problems was easy to track and fix with Internet Explorer F12 Developer Tools. I open the page with overlapping titles, pressed F12 (only works in Internet Explorer), found offending text and noted the class name that title belonged to.

After that I just opened bbpress\my-templates\YourTemplateName\style.css and removed a minus sign for style margin-top for classes latest and forumlist :

#latest, #forumlist
{
    /* 2011-02-07 MO 23:36  Prevent overlapping
	margin-top: -0.9em;  */
	margin-top:  0.9em;
}

 

Proper Login Redirect

If visitors are not logged in, they will see “You must log in to post” with a link to bbPress login. Here we need to fix several issues:
-01- Fix “You must log in to post” link from bbPress login to a WordPress login (wp-login.php);
-02- After wp-login.php processing is complete redirect user back to bbPress page that made a login request;
-03- Fix Topics header “Add New »” link on front-page.php
All 3 problems can be solved very elegantly by making a small modification to bbpress\bb-includes\functions.bb-template.php file.

WordPress page wp-login.php understands query string parameter “redirect_to”. That allows us avoid making any changes to that file. Instead, we will redirect bbPress login request to wp-login.php and we will supply a return page URL as a query string.

Let’s open bbpress\bb-includes\functions.bb-template.php and go to line 309. We need to replace esc_attr of printf.

/* 2011-02-17 TH 01:37 Do not use bbPress login page. Use WordPress instead */
printf(
__(‘You must <a href=”%s”>log in</a> to post.’),
// esc_attr( bb_get_uri( ‘bb-login.php’, null, BB_URI_CONTEXT_A_HREF + BB_URI_CONTEXT_BB_USER_FORMS ) )
esc_attr( wp_login_url() . ‘?redirect_to=’ . $_SERVER[‘REQUEST_URI’] )
);

Very similar modification is needed around line 1595:

if ( !bb_is_user_logged_in() )
// 2011-03-02 WE 17:02 Redirect to wp-login.php and back to calling page
// $url = bb_get_uri(‘bb-login.php’, array(‘re’ => $url), BB_URI_CONTEXT_A_HREF + BB_URI_CONTEXT_BB_USER_FORMS);
$url = wp_login_url() . ‘?redirect_to=’ . $url;

Here we replacing bb-login.php with WordPress login page, and “re” query string parameter with “redirect_to”.

Remaining Problems

After I fixed bbPress header and footer, I feel I am 90% done. Now my bbPress forum pages are looking 90% like my WordPress pages Now it is time for “small” details. Here is a list of what remains to be fixed:

-01- Long User Names – Long User names from WordPress are not wrapping properly in Firefox and overlapping with post content. You can quickly solve this problem by adding word-wrap: break-word; attribute to threadauthor class element in your bbPress style.css file.

.threadauthor {
 float: left;
 padding: 1em 1em 0 1em;
 width: 120px;
/* 2011-02-08 TU 22:38  Wrap very long user names for Firefox */
 word-wrap: break-word;
}

-02- Topic Titles are too large. Solution: Size of topic titles are controlled with class element .topictitle in your bbPress style.css file.
-03- Menu Appearance – Fix WordPress menu drop-downs that are now missing tiny arrow down images, indicating sub-menus. Solution: This problem is linked with error message “jQuery is not defined“.

A quick solution to this problem is to add a hard-coded line that load jquery script. Open HTML sour code of your regular WordPress page, and copy a line similar to this one:

<script src="http://192.168.0.188/wp-includes/js/jquery/jquery.js?ver=1.4.4" type="text/javascript"></script>

Copy this line to the header.php file of your custom bbPress template. Adjust the address. Test your menus. Browser page errors should be gone, and your drop-down menus should look marvelous now.

I still would like to get to the bottom of the problem. Why script line is not loading through PHP, and why I have to use a hard-coding? [2011 Feb 08 – 23:48]

Unexpected Sidebar Effects

If you have a Search box in your sidebar, it might look different for your WordPress and for bbPress pages. So your Sidebar has to be smart enough to know which search box to display. I found that this conditional statement can be used to determine if this is a bbPress page:

<?php if ( !defined( 'BB_PATH' ) ) { ?>

If you use WordPress function get_date_from_gmt() in your Sidebar widgets, it behaves differently on bbPress. On bbPress this function returns GMT time instead of your Time Zone date and time. I am looking for a solution to this problem.

If your sidebar displays Tag cloud, you probably should hide it in bbPress pages, or replace it with bbPress Tag cloud formatted similarly.

Sources

Site	Article	Link
WP Mods	How to Integrate WordPress and bbPress	http://www.wpmods.com/integrate-wordpress-bbpress
WPWebHost	Make bbPress Theme Match with WordPress by Deep Integration	http://www.wpwebhost.com/make-bbpress-theme-match-with-wordpress-by-deep-integration/
bbPress	Here’s a trick to redirect user back to topic after login	http://bbpress.org/forums/topic/heres-a-trick-to-redirect-user-back-to-topic-after-login
WordPress	Any way to redirect to previous page after login	http://wordpress.org/support/topic/any-way-to-redirect-to-previous-page-after-login

 

No Content (only happened once)

This was a strange problem. I reactivated bbPress default template (theme), and still – no posts. So, this was a problem with installation. I discovered that for some reason my database was missing a bb_posts file. Here is a very long MySQL statement that created an empty bb_posts table, and that solved the problem:

CREATE TABLE bb_posts ( post_id bigint(20) NOT NULL auto_increment, forum_id int(10) NOT NULL default ‘1’, topic_id bigint(20) NOT NULL default ‘1’, poster_id int(10) NOT NULL default ‘0’, post_text text NOT NULL, post_time datetime NOT NULL default ‘0000-00-00 00:00:00’, poster_ip varchar(15) NOT NULL default ”, post_status tinyint(1) NOT NULL default ‘0’, post_position bigint(20) NOT NULL default ‘0’, PRIMARY KEY (post_id), KEY topic_id (topic_id), KEY poster_id (poster_id), KEY post_time (post_time), FULLTEXT KEY post_text (post_text) ) ENGINE = MYISAM;

If you have similar problem with your bbPress install you can adopt this command to your needs. Before using this command in MySQL Shell, you need to select your database:

used YourDatabaseName

 

Old / Unused Material – To Delete After Completion

[This is an old approach to login-redirect problem]

To solve first problem we need to replace one line in bbpress\bb-includes\functions.bb-template.php. Instead of fixing a login link on the page we will refer user to a login link in the header:

/* printf(
__('You must <a href="%s">log in</a> to post.'),
esc_attr( bb_get_uri( 'bb-login.php', null, BB_URI_CONTEXT_A_HREF + BB_URI_CONTEXT_BB_USER_FORMS ) )
);  */
printf('You must log in to post. &nbsp; Use a <b>Log In</b> link in a header.');

This action is happening after line 309.

[Instead of doing this next step here, we used query sting parameter "redirect_to"]

To solve second problem, you would need to edit core WordPress file wp-login.php located in the rood on WordPress site. For WordPress 3.1 I needed to make a replacement after line 559:

} else {
// $redirect_to = admin_url();
$redirect_to = $_SERVER[HTTP_REFERER];
}

As you can see, we are now redirecting to a previous page instead of Admin Control Panel.

One final detail. Do not forget to rename file bb-ligin.php and register.php to something random. You do not need any user maintenance through bbPress, and you do not want users to access these pages by typing in the address. More work is needed with profile.php file. If you simply rename it, you will have some broken links on your forum pages. Instead, you need to edit this file to hide password-changing-related fields.

Add new link points to bb-login.php. That link should be liked to wp-login.php page instead.