An ounce of html, a dash of php and a sprinkling of CSS … developing a theme for bbPress can be fiddly. This post provides you with some ingredients and a recipe to make the process easier.

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.

This entry was posted on Monday, October 15th, 2007 at 11:40 pm and is filed under bbPress Blank Themes. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.