Month: December 2006

Introduction

WordPress is the light (3.5 MB unzipped) blog and content management system application that powers this site and all my other sites. It makes adding and updating content very simple and allows others to add and/or update content easily also.

BBPress is the forum application that can either be used as a stand alone or in conjunction with WordPress.

What this guide is designed to do, is show how to integrate BBPress visually into a WordPress theme. I’ll be showing step by step how I did it.

Please Note: Recently updated for BBPress 0.8.1.

What You Need

• WordPress installed and functioning. Download the latest version of WordPress here.
• BBPress installed and functioning in the same database as WordPress. Download the latest version of BBPress here.
• BBPress Registration Synchronization with WordPress plugin.
• Moderator’s Display Name plugin (optional).

A Word of Warning

Depending on which theme you are using and who created it and your HTML skills, how easy or difficult it will be to integrate BBPress visually into WordPress is determined by how well written the WordPress theme your using is and/or your abilities to “fix” it or modify it to fit your needs.

In most cases, if the header.php file contains the usual head information and the navigation, you’ll probably be fine.

WordPress

1. Open your WordPress’s Theme’s header.php and locate where your stylesheet is called up. You have to place a link to your BBPress stylesheet. For example, I use the import stylesheet feature, so mine looks like this:

   <style type="text/css" media="screen">
   @import url(<php bloginfo('stylesheet_url'); ?>;
   @import url("http://www.my-website.com/bbpress/my-templates/style.css");
   </style>

   This was the method I use to use, but I’m not sure if this will create problems down the road, so I’m defaulting to a safer method. Please skip to BBPress section instead.

BBPress

1. Open the config.php file located inside the BBPress parent directory.
2. At the very beginning, before, where it says:

   <?php // ** MySQL settings ** //

3. You want to add this right above:

   <?php require_once('/absolute/path/to/WordPress Parent Directory/wp-blog-header.php') ?>

4. What this does is that it is telling BBPress to load all the WordPress functions so that you can use WordPress functions inside of BBPress which will make integrating the look and feel of your BBPress to WordPress very, very easy.
5. Upload the config.php file you just modified to your webserver and refresh the BBPress page, nothing should look different and you should not get any errors. If you get some kind of php error, look back in your code to make sure you didn’t mispell something.
6. Make a copy of the entire bb-templates folder inside of the BBPress parent directory and rename it to my-templates. You should now have a my-templates folder with the same contents as the bb-templates folder in the BBPress parent directory. Any edits we will make will only to be the contents inside of the my-templates. Note: This is deprecated in BBPress 0.8.1.
7. Create a new theme directory in bb-templates. Copy ALL the files in the kakumei theme in the newly created directory. The files copied in the new directory are the ones that you are to edit, not the files in the kakumei theme.
8. I usually find the easiest way to start the visual integrating process is to edit the front-page.php file first since that page is BBPress’s equivalent of an index.php file. Open up front-page.php in a text editor program (e.g. Notepad for Windows or TextWrangler for the Mac).
9. On the very first line, you will see:

   <?php bb_get_header(); ?>

10. Leave the bulk info in the <head></head> alone. What you want to do is add in

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

    above

    <link rel="stylesheet" href="<?php bb_stylesheet_uri(); ?>" type="text/css" />

    This will import the main look and feel of your WordPress theme into BBPress.

11. Scroll to the bottom and find:

    <?php bb_get_footer(); ?>

12. Change that to:

    <php get_footer(); ?>

13. Upload front-page.php to the my-templates folder and check your website, http://www.your-website.com/bbpress/ to see the results. It should start looking similar to your website now.
14. If you want the sidebar to appear in your forum also, you will have to place <div id=”discussions”> into your WordPress theme’s content container on the front-page.php file, of course how you do that is dependent upon what theme you are using. For example, since <div id=”content”> is my theme’s container, I would arrange it like so in my front-page.php file:

    <div id="content">
    <div id="discussions">

15. At the end, right before

    <php get_footer(); ?>

    add

    <php get_sidebar(); ?>

    and style it accordingly to your theme’s layout.

16. After you upload front-page.php to your web server, check the layout in multiple web browsers to ensure it loads correctly. By now it should really look like a part of your theme’s layout.
17. Make similar changes to: edit-post.php, favorites.php, forum.php, login.php, password-reset.php, profile.php, profile-base.php, profile-edit.php, register.php, register-success.php, search.php, tags.php, tag-single.php, topic.php, and view.php by replacing <php bb_get_header(); ?> to <php get_header(); ?> and <php bb_get_footer(); ?> to <php get_footer(); ?> and adding in <php get_sidebar(); ?> if you want a sidebar.
18. The rest of the stuff will just need to be styled via the style.css in the my-templates folder. Make sure to remove any conflicting ids or classes from the BBPress stylesheet so as to not get W3C validation errors.