I’d like to see some Wordpress plugins with template tags that enable components of bbPress to be easily displayed in the context of Wordpress pages, widgets or posts.

I’d also like to see a private messaging facility that wpmu, wordpress and bbPress can all benefit from.

What new features would you like to see? 

Ping! 1.0.1 - MacUpdate via kwout

You can save some time if you develop and test your themes directly on your own computer rather than a remote server. Many will find that the recipe for setting up an adequately configured HTTP server with PHP and MySQL involves a mixed bag of ingredients - including newt’s eyes!

Pre-configured Apache (HTTP) / MySQL (database)/ PHP stacks have been available for a long time on the Linux platform. These are also available on Windows and Mac OSX. My personal favourites are:

• Apache2Triad (Windows); and
• MAMP (Mac OSX).

These systems provide all you need to install development installations of bbPress on your own computer! Apache2triad has configuration pages that run through your browser. It also includes simple status bar tools for starting, stopping and restarting the apache server. MAMP includes a control panel application and a dashboard widget for managing your apache installation. Both systems include phpMyAdmin which makes setting up a MySQL database for you test site a breeze!

I have historically used a mix of Linux servers on my local network for development sites. I have recently started using the professional MAMP Pro on my MacBook for this purpose. This allows me to take my development projects on the road. MAMP Pro provides more advanced configuration than the standard MAMP package provides.

Before switching to the Mac I used to take development projects on the road using apache2triad. I once spent 12 hours developing a website using apache2triad whilst on a day ferry crossing to Tasmania.

Note:
I also recommend that you setup some form of mail server on your local network if this is not otherwise available. This is essential if you need to test the e-mail notifications used by bbPress. Setting up a mail server is not for the faint-hearted and is beyond the scope of this discussion.

bbPress themes are simple in structure and generally include a header, a footer, an area for tags and a main content area containing the body of the forum. These content areas are organised into a set of .php theme template files that contain snippets of html page structure interlaced with php code that populates the page.

The bbPress.org site contains instructions for theme installation that also identify the files the theme engine uses to build the page. The important thing to note from these instructions is that bbPress will load a template file from the default theme if the template is not contained in the current theme! This will make your job of creating a custom theme much easier if your are happy to use the default layout for the forms and other interactive elements of the bbPress forum software. You just need to worry about determining the layout and then you have significant scope for customising the overall look of the bbPresstheme with a careful sprinkling of CSS magic.

I have helped with the first part of this process by providing six raw bbPress forum themes to use as a starting point for developing your own theme. The following layouts are available:

• 1col_fixed: bbPress blank 1-column theme with fixed width
• 1col_fluid: bbPress blank 1-column theme with fluid width
• 2col_fixed_left: bbPress blank 2-column theme with left sidebar and fixed width
• 2col_fixed_right: bbPress blank 2-column theme with right sidebar and fixed width
• 2col_fluid_left: bbPress blank 2-column theme with left sidebar and fluid width
• 2col_fluid_right: bbPress blank 2-column theme with right sidebar and fluid width

The composition of the above themes is quite straight forward. For example the 1col_fixed theme includes only the following:

• footer.php
• front-page.php
• header.php
• images/ (empty directory)
• initial.css
• readme.txt
• screenshot.png
• style.css

Most of your efforts will be focused on customising the CSS rules in the style.css file. This may include placement of image files corresponding to particular CSS rules and php template content in the images directory.

You’ll need an understanding of HTML (or XHTML) and CSS in order to successfully develop your own theme. If you are unfamiliar with HTML I recommend the oh really O’Reilly book Head First HTML with CSS & XHTML:

You might be very comfortable with HTML but need to improve you CSS skills. I have found the following two books very useful:

• CSS Cookbook, 2nd Edition by Christopher Schmitt
• Cascading Style Sheets: The Definitive Guide, 2nd Edition by Eric A. Meyer.

Knowledge of the PHP programming is not essential however you can pick up lots of useful information from the documentation and user contributed notes on the php.net site.

Note:
For security, I recommend developing and testing bbPress themes using an offline installation of bbPress on your own computer or on a server on your local network. If you make errors in the coding of your theme template .php files you may expose directory paths on your server. This may be a security risk - particularly on a shared server hosting server. It is relatively easy to setup a basic development environment. I will discuss that in another post.

In the tutorial below, we will install one of the blank themes and then make some basic modifications to its stylesheet to create our own custom theme. We’ll apply a border to the theme and change the theme’s font.

Step 1: Determine the layout and download the corresponding blank theme

For this site I started by determining the layout that I wanted. My goal was to make my theme fit-in or integrate with the rest of my site so that the entire site presents a consistent look-and-feel. For example the bbPress forum installation on this site at bbpressraw.com/forums site is made to present a consistent look to the Wordpress-based blog portion of this site at bbpressraw.com. This was achieved by developing the Wordpress theme from one of the blank wordpress themes at tomorrows-laundry.com.

When you download one of the blank bbpress themes, unpack it and have a look at the readme.txt file. It contains information about theme compatibility. Make sure that the theme is compatible with the version of bbPress you are using.

Use this link to download the 1col_fixed theme which will present bbPress content in a single column and with a fixed width view.

The theme needs to be copied into the my-templates directory of your bbpress installation. You’ll need to create the my-templates directory in the root of your bbPress forum installation since it is not part of the standard bbPress install archive (same applies for my-plugins).

At this point you should be able see the theme via the admin backend of your bbPress installation. You will need to select the “Presentation” tab. You can activate the theme by clicking on it’s screenshot. Once you have done this the theme should be active on the homepage of your bbPress installation. It should look something like the screenshot below.

Since you will be renaming the theme in the next step, go back to your bbPress admin page and re-activate the default Kakumei theme via the “Presentation” tab.

Step 2: Name Your Theme

Let’s call our custom theme “borderline” since we will be applying a 3 pixel border to the theme. Navigate to the appropriate folder in your installation of bbPress and rename the folder 1col_fixed to borderline.

You need to edit some details in the theme stylesheet (the style.css file) so that it will appear with the correct theme name in the bbPress admin presentation tab.

Open the styles.css file and you should see a header that looks like this:


/*
Theme Name: 1col_fixed
Theme URI: http://bbpressraw.com/categories/themes/
Description: bbPress blank 1-column theme with fixed width.
Version: 1.1
Author: agentmaximus
Author URI: http://bbpressraw.com/
*/


Edit the “Theme Name” field of the header and replace 1col_fixed with borderline. You can also edit the other header fields if you wish at this point. It should now look like this:


/*
Theme Name: borderline
Theme URI: http://bbpressraw.com/categories/themes/
Description: bbPress blank 1-column theme with fixed width.
Version: 1.1
Author: agentmaximus
Author URI: http://bbpressraw.com/
*/


Save your changes.

When you return to the presentation tab of the bbPress admin you should now see a theme listed with the label borderline. You should be able to click on the theme to activate it.

Step 3: Apply Some Custom Changes to the theme stylesheet

Now you are going to make a number of changes to theme stylesheet:

1. Apply a font; and
2. Apply a border to the page.

Open your theme’s style.css file. Find the “Global Styles” section. It looks like this:


/* Global Styles
=================================== */

hr {
display: none;
}
Add the a rule for the body tag below the rules for the hr tag:


/* Global Styles
=================================== */

hr {
display: none;
}

body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

This applies a particular font family to the body of the page. Where font names are constructed of two or more words, the font name needs to be enclosed in quotes. If you are aiming to make your bbPress website appear similar on Windows and Mac, you should aim to select fonts that are similar on both platforms (this page is a useful reference).

Now we will add a 3-pixel border to the page. Open the layout.css file and modify this rule:


#page {
width: 750px;
margin: 0 auto;
}


Add a border rule that applies a 3-pixel wide grey border to the page:


#page {
width: 750px;
margin: 0 auto;
border: 3px solid #cccccc;
}


Alternatively, you could have added the following rule to the style.css file:


#page {
border: 3px solid #cccccc;
}


Save the CSS files and refresh your browser. Your bbPress home page should look something like the screenshot below.

If your theme looks like the screenshot then congratulations! You’ve successfully created and customised your first bbPress theme!

I ‘ll discuss tools that aid the theme development process in a future post.

I have created new versions of all of the blank bbPress forum themes to provide a slightly more tabular style. This will give you a starting point that seems more natural.

Other minor changes include:

• Layout-specific CSS rules into a separate CSS file called layout.css;
• Bug in 2-column themes has been fixed - this were not showing sticky topics correctly on the front page; and
• Some of the template files are using the template tags added by bbPress 0.8.3 that are prefixed with bb_.

The updates can be found on the bbpress theme downloads page.

Enjoy!

The themes have been tested with and are compatible with bbPress 0.8.3. Please post any issues in the forums.

Once I have finished testing the themes and created the download tarballs and zipballs they’ll be made available on the theme download page.