How to Modify bbPress Theme Templates and Add Custom Features

bbPress 2.x includes built-in theme support. All of the elements the plugin needs, including the front-end editor, are already included inside bbPress itself, so you do not need to install a separate bbPress theme. Even if the active WordPress theme does not explicitly support bbPress, bbPress can still run normally.

Of course, that only means bbPress can run. For most bbPress users, real customization still requires a bbPress theme, and personalizing the bbPress styling is an essential step. Fortunately, the default bbPress theme can be overridden through the WordPress theme.

Customize the bbPress theme

The bbPress plugin directory wp-content/plugins/bbpress/templates/default/ contains the directories bbpress, css, extras, and js, along with the bbPress function file bbpress-functions.php.

The bbpress directory contains the template files. If you copy the files from that directory into a bbpress folder inside your WordPress theme, bbPress will load the theme’s versions first, for example: /wp-content/themes/%your-theme%/bbpress/
The extras directory contains bbPress page template files. These are similar to WordPress page templates. When modifying a bbPress page template, you only need to copy the corresponding file into the root directory of your WordPress theme. For example, if you want to modify the bbPress login page, just copy page-user-login.php from the extras directory to /wp-content/themes/%your-theme%/page-user-login.php, and then edit that file in the theme.
The css directory contains the CSS files for the default bbPress theme. Before modifying the CSS, simply copy all the files from the css directory into your WordPress theme’s CSS directory, for example: /wp-content/themes/%your-theme%/css/
In most cases, we need to copy the entire bbpress and css directories into the WordPress theme that is currently in use. Once this is done, bbPress will automatically apply the corresponding files from the theme. It is that simple.

Enable the visual editor for bbPress

By default, bbPress uses a plain text editor. To support richer reply formatting, we can enable the visual editor for bbPress with the following code.

add_filter('bbp_after_get_the_content_parse_args', function ($args = [])
{
    $args[ 'tinymce' ] = true;

    return $args;
});

Enable the media upload button for bbPress

If users are allowed to post only plain text, forum content can feel very dull. We can enable the media upload button in bbPress so users can upload images. The following code does exactly that.

add_filter('bbp_after_get_the_content_parse_args', function ($args)
{
    $args[ 'media_buttons' ] = true;

    return $args;
});

Reward users with points when they create topics or replies

To increase user engagement, we can reward users with points when they create topics or post replies. bbPress provides the relevant action hooks to help implement this requirement.

Reward points when a user replies to a topic

add_action('bbp_new_reply', function ()
{

    Coin::query()->create([
        'user_id' => get_current_user_id(),
        'title' => 'Reply Topic in the forum',
        'point' => 1,
        'type' => 1,
    ]);

}, 10, 7);

Reward points when a user creates a topic

add_action('bbp_new_topic', function ()
{
    Coin::query()->create([
        'user_id' => get_current_user_id(),
        'title' => 'Create new topic in the forum',
        'point' => 3,
        'type' => 1,
    ]);

}, 10, 7);

The points-reward logic in the code above is a custom feature from our own theme. When using it, replace it with the corresponding custom functionality from your own theme or plugin.

With the methods above, we can customize the bbPress theme without modifying any files inside the bbPress plugin itself. A customized theme created this way will not be affected by bbPress plugin upgrades. If you have a better way to modify bbPress themes, feel free to share it in the comments.