Codex Home → BuddyPress Theme Development → Updating Custom Themes For New Functionality → Template Updates 2.1

Template Updates 2.1

BuddyPress 2.1 introduced three new features that specifically require template updates in order that they function.

• @mentions Interface
• Password Strength Meter
• Activity Show Filters

@mentions Auto Suggest

@mentions introduces a drop down panel that will auto suggest user names to select from the characters you start typing. For this feature to work you will need to update your templates in two specific places or files

1. buddypress/activity/entry.php
2. buddypress/activity/post-form.php

In both of these files you need to locate the textarea elements and add the class ‘bp-suggestions’ respectively:

<textarea id="ac-input-<?php bp_activity_id(); ?>" class="ac-input bp-suggestions" name="ac_input_<?php bp_activity_id(); ?>"></textarea>

<textarea class="bp-suggestions" name="whats-new" id="whats-new" cols="50" rows="10"><?php if ( isset( $_GET['r'] ) ) : ?>@<?php echo esc_textarea( $_GET['r'] ); ?> <?php endif; ?></textarea>

@mentions also requires two new JS files and CSS styles to support the display of the dropdown, these files are loaded from the core directories so themes shouldn’t have to worry about including these.

Password Strength

Password Strength Meter This feature requires adjustments and new files as follows:

1. buddypress-functions.php
2. buddypress/members/register.php
3. buddypress/members/single/settings/general.php (user account password update screen)
4. css/buddypress.css
5. js/password-verify.js

The buddypress-functions.php adjustment most likely won’t be required but if it is you need to make these changes.

Just below the wp_enqueue_script(‘comment-reply’) at around line 257 add:

// Maybe enqueue password verify JS (register page or user settings page)
        if ( bp_is_register_page() || ( function_exists( 'bp_is_user_settings_general' ) && bp_is_user_settings_general() ) ) {
            $min      = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
            $filename = "password-verify{$min}.js";

            // Locate the Register Page JS file
            $asset = $this->locate_asset_in_stack( $filename, 'js' );

            // Enqueue script
            $dependencies = array_merge( bp_core_get_js_dependencies(), array(
                'password-strength-meter',
            ) );
            wp_enqueue_script( $asset['handle'] . '-password-verify', $asset['location'], $dependencies, $this->version);
        }

register.php requires the addition of a new element to hold the password strength display, and also note the additional classes on the existing input controls, as follows:

  <input type="password" name="signup_password" id="signup_password" value="" class="password-entry" />
  <div id="pass-strength-result"></div>

  <input type="password" name="signup_password_confirm" id="signup_password_confirm" value="" class="password-entry-confirm" />

general.php requires similar changes as register.php as follows:

<input type="password" name="pass1" id="pass1" size="16" value="" class="settings-input small password-entry" /> &nbsp;<?php _e( 'New Password', 'buddypress' ); ?><br /> 
<div id="pass-strength-result"></div> 
<input type="password" name="pass2" id="pass2" size="16" value="" class="settings-input small password-entry-confirm" /> &nbsp;<?php _e( 'Repeat New Password', 'buddypress' ); ?> 

Styles are required primarily to provide a background color separation between the various strength strings returned and those added to Buddypress are as follows – although you may want to modify these to suit your theme styling

#buddypress #pass-strength-result {
    background-color: #eee;
    border-color: #ddd;
    border-style: solid;
    border-width: 1px;
    display: none;
    margin: 5px 5px 5px 0;
    padding: 5px;
    text-align: center;
    width: 150px;
}
#buddypress .standard-form #basic-details-section #pass-strength-result {
    width: 35%;
}
#buddypress #pass-strength-result.error,
#buddypress #pass-strength-result.bad {
    background-color: #ffb78c;
    border-color: #ff853c !important;
    display: block;
}
#buddypress #pass-strength-result.good {
    background-color: #ffec8b;
    border-color: #fc0 !important;
    display: block;
}
#buddypress #pass-strength-result.short {
    background-color: #ffa0a0;
    border-color: #f04040 !important;
    display: block;
}
#buddypress #pass-strength-result.strong {
    background-color: #c3ff88;
    border-color: #8dff1c !important;
    display: block;
}

Lastly is the addition of a JS file ‘password-verify.js’ this can be copied over from the bp legacy js directory or simply left in place as themes should inherit it’s functionality.

Activity ‘Show’ filters

In 2.1 the activity filters were updated to dynamically generate the filter options, this allows for additional options to be passed in by plugins and CPT’s

Previously these filters were hardcoded select options in activity/index.php, groups/single/activity.php, and members/single/activity.php now those hardcoded options are replaced with a single function call:

bp_activity_show_filters()

It’s important to retain the first option though which resets the display to ‘Everything’. On the groups activity page we need to pass an additional parameter to tell the function it’s the groups component so we add:

bp_activity_show_filters('group')

A full and detailed explanation of these changes is available in this codex page:
Activity Dropdown Filters in Templates

---