Layout and functionality – Examples you can use

Codex Home → Layout and functionality – Examples you can use

This is a list of things you can do to change how bbPress looks, and to add (and in some cases take away) functionality.
The following is in no particular order.
You can normally achieve anything in wordpress/bbPress a number of ways, and the examples listed below can probably be achieved by other means, and indeed the suggestions may not be the “best way” (whatever that is !).

They are deemed to work by the original authors, but that doesn’t guarantee they will now.

For help on how to implement these - see the Step by step guides on the main codex page

You find that an example doesn’t work
You can suggest a “better”/easier/different way to do it
You have suggestions for other useful examples others can use

Then go into the support forum and post it in requests and feedback, and I’ll try my best to change or add to the list So onwards !

1. Change how the forum list displays

The default looks like : Change to :

This element is styled in the original bbPress.css file as follows #bbpress-forums .bbp-forums-list li { display: inline ; font-size: 11px; } Changing the ‘display:inline’ to ‘display:list-item’ will achieve this.

Alternately, put the following into your functions file

//create vertical list
function custom_bbp_sub_forum_list() {
  $args['separator'] = '<br>';
  return $args;
}
 add_filter('bbp_before_list_forums_parse_args', 'custom_bbp_sub_forum_list' );

2. Remove the topics/replies from the forum list

Default :

Change to :

Change loop-single-forum.php

Put the following into your functions file

function remove_counts() {
$args['show_topic_count'] = false;
$args['show_reply_count'] = false;
$args['count_sep'] = '';
 return $args;
}
add_filter('bbp_before_list_forums_parse_args', 'remove_counts' );

Whilst clicking the avatar or name on the login widget will take you to your profile, this is not obvious for many users

adding a line as follows makes this clearer

Several ways to achieve this

Solution a

One solution and the one I use is adding this as a line in the login widget, so that it appears under the “account” in your sidebar

I use the (bbpress) Login widget for the sidebar. This widget is set up in
wp-content/plugins/bbpress/includes/common/widgets.php

I added this line after line 145

line 145 reads

1	`<?php bbp_logout_link(); ?>`

and I add a new line 146 saying

<p><a href="<?php bbp_user_profile_url( bbp_get_current_user_id() ); ?>edit" >Amend Profile/Change password</a></p>

This then comes up when someone is logged in

The downside of this is that the code is overwritten on a bbpress upgrade, so you’ll need to add it back to any new version that come out. Better still if you know how is to copy that part of the widget code into a plugin or your functions file and rename it to make unique.

Solution b

If you’re not keen to change code, the download the enhanced text widget

http://wordpress.org/plugins/enhanced-text-widget/

Then in your sidebar add the enhanced text widget, and put this code in content, check the “don’t display header” and click save

<a href=”edit” >Amend Profile/Change password

Much easier to do, but displays whether someone is logged on or not.

A third method is discussed in

http://bbpress.org/forums/topic/menu-link-to-profile/#post-139513

4. Turning off or changing breadcrumbs

You can turn breadcumbs ( the Home >Forums > etc. bit ) off using

function bm_bbp_no_breadcrumb ($param) { return true;
 
}
 
add_filter ('bbp_no_breadcrumb', 'bm_bbp_no_breadcrumb');

add this to your functions file in your theme/childtheme

and you can change how they look using

function mycustom_breadcrumb_options() {
    // Home - default = true
    $args['include_home']    = false;
    // Forum root - default = true
    $args['include_root']    = false;
    // Current - default = true
    $args['include_current'] = true;
 
    return $args;
}
 
add_filter('bbp_before_get_breadcrumb_parse_args', 'mycustom_breadcrumb_options');

5. Remove search function from forums

If you want to remove the search bar (some people like to either exclude it, or put it in a sidebar)

To change :

To:

Then simply change the settings in dashboard>settings>forum features and untick
Search allow forum wide search

Or the complicated way !

.bbp-search-form {
display:none !important;
}

6. Load the style sheet after bbpress

Submitted by and thanks to Markic

Intro: When WordPress is loading stylesheets, they’ll load all the theme .css files first and then they’ll load plugin css. That way plugin css has higher priority than your css and only way you can override it is with !important. As we all know, that is a bad practice.

Also, you can create your own bbpress.css in your theme but that means more files to keep up with (although, that’s the cleanest solution). Here’s another way to do this:

paste this code into functions.php…

if (class_exists('bbPress')) {
 add_action( 'wp_print_styles', 'deregister_bbpress_styles', 15 );
 function deregister_bbpress_styles() {
 wp_deregister_style( 'bbp-default' );
 }
 wp_enqueue_style( 'bbpress_css', plugins_url().'/bbpress/templates/default/css/bbpress.min.css');
 }

So, let’s get into details:
- first, if you have active plugin ‘bbPress’ it will exicute the following code which removes all the .css files from it
- second, it loads bbpress.min.css again, but this time where you want it…
- be sure that you enqeue your stylesheet after this code

Note: there are two problems that might arise from this techique
-if bbPress developers decide to rename, remove or split bbpress.min.css, you’ll have to change the code again
-there’s other .css file named “bbpress-rtl(.min).css”. Well, some cultures (Arabic), read and write from right to left. And what this file aligns everything to the right. bbPress has some system of deciding whether it should load this file or not, but by doing this technique, you’re disabling that system.

7. How can I remove all the breadcrumbs from the templates and set them at the top of the page?

Submitted by and thanks to Markic

Intro: Many of us are creating our own themes with existing breadcrumbs systems which are in the header. But bbPress has it’s own idea where to display breadcrumbs, and sometimes that’s at the top of the page, sometimes that’s below search form and sometimes it’s below title. Here’s how you can change that quickly.

1. If you haven’t, create “bbpress.php” in the root folder of your theme. (You can copy-paste page.php)
2. Add

1	`<div` `class="truebreadcrumbs"><?php bbp_breadcrumb(); ?></div>`

where you wan’t to show your breadcrumbs

3. Add this CSS:

div.bbp-breadcrumb {
 display: none; /*this will hide all breadcrumbs*/
 }
 
.truebreadcrumbs div.bbp-breadcrumb {
 display: block; /*this will display breadcrumbs you've created*/
 }

Sure, HTML will still generate all the breadcrumbs and css will hide the unwanted ones, but this is the easiest way to do this without going into templates…

Most bbPress users have sidebars, and use widgets to control login and profile changes. Others rely on users knowing that if the click their avatar or username, then they can edit their profile.

This solution lets you add an “edit profile” to your wordpress menu – this only appears as a menu item if the user is logged in.

Add the following to your functions file

// Filter wp_nav_menu() to add profile link
add_filter( 'wp_nav_menu_items', 'my_nav_menu_profile_link' );
function my_nav_menu_profile_link($menu) {  
    if (!is_user_logged_in())
        return $menu;
    else
        $current_user = wp_get_current_user();
        $user=$current_user->user_login ;
        $profilelink = '<li><a href="/forums/users/' . $user . '/edit">Edit Profile</a></li>';
        $menu = $menu . $profilelink;
        return $menu;
     
}

Thanks to nicmare for this handy tip.

You can add and remove social media contacts by adding these to the contactmethods.

The following example function adds twitter, facebook, google+ and youtube, but removes
aim, yabber and yim.

function add_extra_contactmethod( $contactmethods ) {
// Add new ones
$contactmethods['twitter'] = 'Twitter';
$contactmethods['facebook'] = 'Facebook';
$contactmethods['googleplus'] = 'Google Plus';
$contactmethods['youtube'] = 'Youtube Kanal';
 
// remove unwanted
unset($contactmethods['aim']);
unset($contactmethods['jabber']);
unset($contactmethods['yim']);
 
return $contactmethods;
}
add_filter('user_contactmethods', 'add_extra_contactmethod');

10. Shorten freshness wording

This code shortens the freshess to take out minutes

Just drop this into your functions file

//function to shorten freshness display from say '1 month, 2 weeks' to '1 month'
function short_freshness_time( $output) {
$output = preg_replace( '/, .*[^ago]/', ' ', $output );
return $output;
}
add_filter( 'bbp_get_time_since', 'short_freshness_time' );
add_filter('bp_core_time_since', 'short_freshness_time');

Adding a Login/Logout to the menu can be useful if you are not using a sidebar login widget, or if you want the ability to login on any page. You can then hide the toolbar for your users, so that they have a clean experience.

This solution adds “Login” or “logout” at the end of the menu, the words change as the user logs in or out.

Firstly, create a page called Login (or whatever) and add the following to the page content
[bbp-login]
You can add text above/below this if you like - maybe to say how to register (or adding a register shortcode).

Save this, and then make a note of the permalink (the url beyond the ‘www.mysite.com/’) for the login page.

Then paste the following code into your functions file

//filter to add login/logout to menu
add_filter( 'wp_nav_menu_items', 'my_nav_menu_login_link' );
function my_nav_menu_login_link($menu) {
    //uncomment the next line if you only want login on bbpress pages
    //if(is_bbpress()) {
    if (is_user_logged_in()) {
        //set the $url on the next line to the page you want users to go back to when they logout
        $url = 'http://www.mysite.com/forums' ;
        $url2=wp_logout_url($url) ;
        $loginlink = '</pre><ul><li><a title='Logout' href="'.$url2.'">Logout</a></li></ul><pre>';
        }
    else {
        $current_user = wp_get_current_user();
        $user=$current_user-&gt;user_login ;
        //set $page on the next line = the permalink for your login page
        $page=&quot;login&quot; ;
        $loginlink = '</pre><ul><li><a href="/'.$page.'/">Login</a></li></ul><pre>';
                }
    //uncomment out the next lines if you only want login on bbpress pages
    //      }
    //  else {
    //  $loginlink="" ;
    //      }
        $menu = $menu . $loginlink;
        return $menu;
}

You’ll see that you need to set :
the url of the page you want users to come back to after they log out
The page for login (the permalink you noted earlier)

If you only want the login/logout to appear on the forums, you’ll see that there are lines you can uncomment to activate this.

This is quiteneat, and instructions add it to the menu, with Login/logout as appropriate.

The login looks like this

Different styles are available, and you can style your own.

The instructions can be found here

13. Preventing closed topics from going grey

By default topics closed to replies are “greyed out”. But often you simply want to stop posting, most often for sticky topics at the top of a forum.

Add this code to your css in your theme or amend the bbpress.css in your theme’s css folder .

#bbpress-forums .status-closed, #bbpress-forums .status-closed a {color: #000 !important;}

14. Adding new bbpress roles

You can add new bbpress roles and even change their capabilities.

At the simplest levels, you can add a new role name and give it existing capabilities

This can be useful just for your own admin purposes, but also if like me you hate the “keymaster” role name, just create a new role and give it keymaster capabilities.

The following code creates three new roles with names ‘name 1′,’name 2′ and ‘name 3′ the first role has participant, the second moderator and the third keymaster.

Simply amend the code to create as many roles with whatever capabilities you need

function add_custom_role( $bbp_roles ) {
 
$bbp_roles['my_custom_role1'] = array(
'name' => 'name 1',
'capabilities' => bbp_get_caps_for_role( bbp_get_participant_role() ) // the same capabilities as participants
);
$bbp_roles['my_custom_role2'] = array(
'name' => 'name 2',
'capabilities' => bbp_get_caps_for_role( bbp_get_participant_role() ) // the same capabilities as participants
);
$bbp_roles['my_custom_role3'] = array(
'name' => 'name 3',
'capabilities' => bbp_get_caps_for_role( bbp_get_keymaster_role() ) // the same capabilities as keymaster
);
return $bbp_roles;
}
add_filter( 'bbp_get_dynamic_roles', 'add_custom_role', 1 );

15. Adding custom capabilities within bbpress roles

Adding Custom Capabilities

16. Adding description to forum pages

If you create a forum with a description, this only shows on the main index page, not on category pages or indeed forum pages

to go from :

to :

add the following to your functions file:

/** filter to add description after forums titles on forum index */
function add_bbp_display_forum_description() {
    echo '<div class="bbp-forum-content">' ;
    bbp_forum_content() ;
    echo '</div>';
    }
add_action( 'bbp_template_before_single_forum' , 'add_bbp_display_forum_description' );

I also added

/*Styling for forum description */
#bbpress-forums div.bbp-forum-content {
clear:both !important;
margin-left: 0px !important;
padding: 0 0 0 0 !important;
    }

to my theme’s style.css to get it under the breadcrumb.

Change

to:

Put the following into your style.css

/*styling to move 'Subscribe' to right hand side */
.subscription-toggle  {
    float:right !important ;
        }

If you just want to move it slightly to the right, you can use

/*styling to move 'Subscribe' to right hand side */
.subscription-toggle  {
    padding:0 0 0 25px; !important ;
        }

and adjust the 25px to put it as you wish

18. Prevent users changing their display-name

Users can change their display name within the bbpress profile page. Some forums wish to prevent this to stop users hiding their identity.

To turn this off, you’ll need to edit one of the default files and save it to your theme.

In your theme create a bbpress folder.

wp-content/themes/%yourtheme%/bbpress

where %yourtheme% is the name of your theme

then navigate to

wp-content/plugins/bbpress/templates/default/bbpress/form-user-edit.php

and copy this file to the bbpress folder you created above

bbpress will now use this one instead of the default.

edit this new file and take out lines 33 to 45

ie take out the following

<div>
            <label for="nickname"><?php _e( 'Nickname', 'bbpress' ); ?></label>
            <input type="text" name="nickname" id="nickname" value="<?php bbp_displayed_user_field( 'nickname', 'edit' ); ?>" class="regular-text" tabindex="<?php bbp_tab_index(); ?>" />
        </div>
        <div>
            <label for="display_name"><?php _e( 'Display Name', 'bbpress' ) ?></label>
            <?php bbp_edit_user_display_name(); ?>
        </div>
        <?php do_action( 'bbp_user_edit_after_name' ); ?>

This will remove the ability to set a nickname and to change the display name.

Jun	AUG	Oct
	09
2013	2014	2015

bbPress Codex