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
buddypress/activity/entry.php
buddypress/activity/post-form.php
In both of these files you need to locate the textarea elements and add the class 『bp-suggestions』 respectively:
?1<textarea id="ac-input-" class="ac-input bp-suggestions" name="ac_input_">
?1
@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:
buddypress-functions.php
buddypress/members/register.php
buddypress/members/single/settings/general.php (user account password update screen)
css/buddypress.css
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:
?1234567891011121314// 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:
?12
?1
general.php requires similar changes as register.php as follows:
?123
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
?1234567891011121314151617181920212223242526272829303132333435#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:
?1bp_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:
?1bp_activity_show_filters('group')
A full and detailed explanation of these changes is available in this codex page:
Activity Dropdown Filters in Templates