Here’s a little bit of what you can expect from BuddyPress 1.8:

BP_Group_Extension Rewritten

Many BuddyPress plugins interface with the groups component. The BP_Group_Extension has been rewritten to make it faster for plugins that depend on it. The new changes will make writing group extension plugins much easier than before.

Improvements to Group Administration Panels

BuddyPress 1.8 adds pagination support to “Manage Members” panel in the dashboard.

Template Hierarchy

BuddyPress 1.8 introduces a new template hierarchy layer for top-level templates. This hierarchy more closely matches WordPress’s template hierarchy. Theming BuddyPress will now be more natural for those who are already familiar with theming WordPress.

Ability to Disable @mentions

This release includes a filter that will let you easily disable @mentions. Just add this line to your bp-custom.php file:

1

add_filter( 'bp_activity_do_mentions', '__return_false' );

RSS feeds for activity streams

RSS feeds have been revamped to better follow best practices for feed construction.

Want to help test BuddyPress 1.8-beta1? It’s not ready to be used in a production environment yet, but your testing can help to get it there sooner. Download the zip file from WordPress.org and take it for a spin.

Related posts:

1. Create, Edit, and Delete BuddyPress Groups with Drag and Drop BP Group Organizer is a new plugin that lets you...
2. Expand BuddyPress RSS Feeds to Increase Collaboration and Participation within Your Community A new BuddyPress plugin is available that greatly expands the...
3. Learn How to Customize Your WordPress Theme for BuddyPress with the BP Template Pack Plugin If you’re looking for some BuddyPress documentation on customizing your...

Once installed and activated, BuddyPress Activity Privacy adds the following privacy controls to the post update box for members:

• Anyone
• Logged In Users
• My Friends
• Admin Only
• Only Me

Why anyone would select the “only me” option, I can only guess. Perhaps it’s a decent alternative for those who like to vent on social networks. “My Friends” privacy option puts the BuddyPress core friends component to good use, making it worthwhile for users to send and accept friend requests.

Certain privacy controls are component-dependent. For example, the “Friends Only” privacy option in the dropdown will not show up unless you have the Friends component activated in the BuddyPress settings panel.

When posting within a group the group-specific privacy options will be added to the dropdown, inlcluding:

• My Friends in a Group
• Group Members
• Group Moderators
• Group Admins

In the past, the lack of privacy controls has turned many people off to using BuddyPress. This new plugin should help to alleviate some of those concerns, since most of the content flows through the activity stream and group components. I’ve tested the various privacy controls and they all seem to work just as advertised. The BuddyPress Activity Privacy plugin is one I would recommend for any BuddyPress site. It gives each member multiple privacy options on activity posts and should encourage more confident participation on your social network.

Related posts:

1. A Look at the Present and Future of the BuddyPress Privacy Component Jeff Sayre announced today that BP Privacy v1.0-RC1 is now...
2. Download the New BuddyPress Profile Privacy Plugin Need basic profile privacy for BuddyPress? This free plugin has...
3. Does the BuddyPress Community Care About User Privacy? Yesterday Jeff Sayre, the developer of the BuddyPress Privacy Component,...

Well, you’ve come to the right place.

In this guide I’ll go through the ins and outs of BuddyPress, or as everyone and their dog likes to call it, social networking in a box.

I’ll cover:

• What is BuddyPress?
• Features
• Why you should use it
• Installation
• bbPress forums
• Plugins
• Themes
• Who uses it
• Support
• The future of BuddyPress

Okay, So What Is BuddyPress?

Chances are you’ve stumbled across a website using BuddyPress without even knowing it. Ever visited Kobe Bryant’s official website? It uses BuddyPress. What about the Daily Telegraph’s community website? It also uses BuddyPress.

The University of British Colombia uses BuddyPress to power its teaching and learning site. If you’ve ever felt the urge to pick up a pair of knitting needles and yarn then you might want to check out Feel The Yarn - it, too, is powered by BuddyPress.

BuddyPress is really just a plugin for WordPress sites but, as they say, good things come in small packages, or in this case, boxes.

When installed on your site, BuddyPress turns it into a social media wonderland where members can make new friends and socialise – kind of like Facebook, but for niche communities.

BuddyPress allows users to create profiles, post messages, make connections with other people and create and interact in groups and forums.

If you’re interested in its history, Automattic bought out BuddyPress and hired its developer Andy Pealting in March 2008 to add social networking features to WordPress multisites. The first stable release hit the shelves in May 2009 and since then a small core team led by John James Jacoby has continued what Pealting started. The latest version, BuddyPress 1.7.1, was released in April.

In early 2010, Lisa Sabin-Wilson released the first edition of BuddyPress for Dummies.

Let’s Break It Down

BuddyPress is made up of a series of features, which you can pick and choose for your site, simply by ticking boxes:

• Extended Profiles: Your site’s members can use fully editable profile fields to describe themselves.
• Account Settings: Allow your users to modify their account and notification settings directly from within their profiles.
• Friends Connection: Members can use this to create a friends list like they do on sites like Facebook and Ning.
• Private Messaging: Allows members to contact each other directly.
• Activity Streams: Global, personal, and group activity streams with threaded commenting, direct posting, favoriting and @mentions
• User Groups: Allows members to create groups where they can share info on topic areas that interest them.
• Site Tracking: Record activity for new posts and comments from your site.

For a peek at the City University of New York’s Academic Common’s brilliant integration of BuddyPress into its site, check out this fantastic video tour:

Why Should I Use BuddyPress?

1. BuddyPress has been designed to bring people together and is just the thing for:

• Universities looking to create a social network for students.
• Companies that want to provide their employees as internal communication tool.
• Sports teams that want to create a place where players can catch up online after a game.
• Niche clubs seeking a place where like-minded people can chat about a brand or hobby.

2. It is only going to get bigger and better. There have been vast improvements since version 1.0 and the core team along with hundreds of developers, designers and community volunteers put thousands of hours into the latest version of BuddyPress. Now that’s dedication.

Imagine what the next version of BuddyPress is going to be like? And the version after that? For a round-up of version 1.7’s features, check out Sarah’s Goodings’ write-up on the latest release.

3. It is customizable. The latest version is fully compatible with any WordPress theme so you can easily throw it on your site straight out of the proverbial box. It also makes it easier to pick and choose what social features you want on your site.

The new automated setup makes everything super easy and once you activate it you can start small and grow your community features a little bit at a time or, if you’re the adventurous type, turn on all the features and start out big and fancy. It’s up to you how you want to cater to the members of your site.

If you want to wander beyond the packaged features, you can add plugins to further tweak your social network. I’ll go into this a bit more later in this post.

Setting Up BuddyPress

Setting up BuddyPress is as simple as installing and activating a plugin. Before you get started, it’s a good idea to ensure you meet the minimum requirements. You will need:

• A working installation of WordPress
• PHP version 5.2.4 or greater.
• MySQL 5.0 or greater.
• The mod_rewrite Apache module enabled
• WordPress should be installed manually i.e. via s/FTP, file manager, etc and not via webhost scripts (fantastico, softalicious, etc.), which have caused issues when BuddyPress is activated.
• BuddyPress does not work on installations where you give WordPress its own directory.

Installation has changed with version 1.7. After installing the previous version of BuddyPress you had to walk through an installation wizard and tick this and that. Now it’s all done for you.

1. Login to your WordPress site and go to Plugins > Add New. Search the plugins library for BuddyPress. Find the BuddyPress plugin that has been developed by The BuddyPress Community and click Install Now.
2. It will take a minute to install. When it’s done click Activate Plugin.

And that’s it. You’re done!

Okay, you’re not really done. Once activated, you will have the default setup, which comes activated with two of the most commonly used features: Extended Profiles and Activity Streams.

Scroll down to the bottom of the Getting Started page and click Go to the BuddyPress Settings page to start customising your social network.

Go to Settings > BuddyPress > Pages to create pages where new users to your site can register and activate their accounts.

Don’t forget to go to Settings > General and click Anyone can register to allow people to register on your site.

Users will need to login to your site using the WordPress login screen by adding wp-login.php to the end of the website’s address, i.e. www.yourwebsite.com/wp-login.php

It’s easy to turn on the options you want and the best thing is that they just work. It’s magic!

Once logged in, and if all the features are turned on, members can customize their profiles with avatars and information about themselves, modify their account, check out other people’s profiles, send private messages to other members of your site and create groups that others can join.

If you really want to get stuck into the nitty gritty of BuddyPress, then you might want to head over to the BuddyPress Codex. The codex is the online manual for BuddyPress and contains up-to-date information and documentation going back to version 1.0.

When you’ve wrapped your head around what it can do and if feel like you’ve got something to add, you might want to roll up your sleeves and have a go yourself at contributing to the codex.

Forums

BuddyPress uses a separate plugin called bbPress for forums.

Just like when you installed BuddyPress:

1. Search the plugins library for bbPress.
2. Find the bbPress plugin that has been developed by The BuddyPress Community and click Install Now.
3. It will take a minute to install. When it’s done click Activate Plugin.

The welcome screen will pop up. Scroll down to the bottom and click Go to Forum Settings. There are all kinds of settings you can tick or untick for your forums.

And you’re done!

Plugins

There are hundreds of plugins available to help you make the most of your BuddyPress installation – and make your site a cool place for your members to hang out. There are plugins for all kinds of things, like creating wikis, managing group events, organising your members, group email, live chats, even teleport your members to a wild party in Ibiza! Okay, maybe not that last one.

A good place to get started is the plugins directory at buddypress.org and don’t forget to check out WMPU DEV’s BuddyPress plugins.

Unfortunately, spam is a huge problem for BuddyPress sites. It’s a good idea to install a spam plugin before you do anything else. Lucky for you, Sarah Gooding recently put together a brilliant post on 10 Proven Ways to Stop BuddyPress Spam.

Themes for BuddyPress

Theming was a massive problem for BuddyPress until 1.7 came along. In the past, you had to install a BuddyPress-specific theme and then fork out cash to get WordPress theme compatibility.

Those days are long gone because BuddyPress now works with any WordPress theme. Hooray!

It’s good to keep in mind that the latest version of BuddyPress doesn’t totally invalidate BuddyPress themes, which have BuddyPress-specific functionality and styles for its features.

For a hand finding your perfect theme, check out 10 Places to Find BuddyPress Themes and 10 Free BuddyPress Themes Compatible with BuddyPress 1.5. And of course, have a look at WPMU DEV’s BuddyPress themes.

Who Uses BuddyPress?

Kobe Bryant official website
The NBA basketball player’s site allows users to login to his Kobe Academy so they too can achieve success at success at success.

Hello Eco Living
Green thumbs can share information on healthy living and swap ideas about the environment, wellbeing, gardening and cooking.

Michigan State University School of Journalism
Budding reporters can get the latest scoop and catch up with fellow students in the website’s J-School Community Directory.

Ride Oregon
Cyclists can find out more about trails, road routes and events at Ride Oregon, an official site of Oregon’s Tourism Commission.

hMAG
There are almost 5500 members on the high-end luxury lifestyle magazine’s website servicing the Hoboken market in New Jersey in the US.

Support

If you get stuck at all using BuddyPress, the forums at buddypress.org are a fantastic resource for all your niggling questions.

As I’ve already mentioned, the BuddyPress Codex is a brilliant resource for finding answers to your questions, as is the WPMU BuddyPress Manual.

Since the latest version’s release, the core developer team and volunteers are still catching up on documentation so if you have any issues with your installation it’s best to hit up the buddypress.org forums, or ask in the comments below.

If you prefer something a little more face-to-face, the very first BuddyCamp was held in Vancouver, Canada, last October, with more BuddyCamps planned for this year.

What’s In Store For BuddyPress?

At last count there were 1,476,531 installations of BuddyPress in the world and no doubt that figure is going to rise quickly thanks to the changes – read, theming – introduced in version 1.7.

During an online BuddyPress Q&A for WordSesh last month, the core developer team was asked what we could expect to see in versions 1.8 and 1.9. While  Paul Gibbs said he would love people to tell the team what they wanted, Boone Gorges said he was interested in developing an API so BuddyPress content could be used on different platforms, like cell phones and tablets.

In his end of year post for 2012, lead developer John James Jacoby said he hoped to see more BuddyCamps as well as another prolific core committer after welcoming Raymond Hoh to the team last year.

What do you want to see in the next version of BuddyPress? Tell us below.

Image credits:
cogdogblog, Wikimedia Commons, kalyan02, mom2sofia, functoruser, Fillmore Photography.

Related posts:

1. BuddyPress For Beginners: The Ultimate Starting Resource If you’re just getting started with BuddyPress, you probably have...
2. The Illustrated Guide to Installing and Setting Up BuddyPress 1.5+ Are you new to BuddyPress? Check out our comprehensive installation...
3. Guide to BuddyPress Forums: How to Set Up Group or Sitewide Forums What's the difference between Group vs. Sitewide Forums in BuddyPress?...

Displaying BuddyPress profile data outside of the main BuddyPress components is a little trickier than you might imagine. However, this is a common request, especially since many of our readers manage multisite networks. So for this quick tip we’re going to examine a few examples of displaying BuddyPress profile data on multisite blogs.

Basic Example of Displaying BP Profile Info on a Multisite Blog

A very common scenario is where you want to display an author’s bio on his multisite blog, pulling the content from a BuddyPress profile field. The code below gets the blog admin’s user ID and displays the profile field that you specify. You only need to replace the ‘Bio’ with the name of the field you’re trying to display:

1
2
3
4
5
6
7

<?php 
global $bp;
$thisblog = $current_blog->blog_id;
$user_id_from_email = get_user_id_from_string( get_blog_option($thisblog, 'admin_email'));
$myfield = xprofile_get_field_data( 'Bio', $user_id_from_email );
echo $myfield;
?>

This works for any kind of basic text field and can be added anywhere within the blog’s theme templates.

Display Data From a Checkbox Profile Field on Multisite Blogs

I took a hint from a WordPress StackExchange post for displaying unserialized profile fields. The key is to use $multi_format = ‘comma’ to output your chexboxes or dropdowns.

In this example we’ll display a ‘Counties Served’ checkbox field with each county separated by a comma, using the following code on a multisite blog:

1
2
3
4
5
6
7
8

<?php 
global $bp;
$thisblog = $current_blog->blog_id;
$user_id_from_email = get_user_id_from_string( get_blog_option($thisblog, 'admin_email'));
$myfield = xprofile_get_field_data( 'Counties Served', $user_id_from_email, $multi_format = 'comma' );
$data = xprofile_format_profile_field('checkbox', $myfield);
echo $data;
?>

Here you’ll want to replace the ‘Counties Served’ with the name of the profile field you are wanting to display. Pretty simple, right?

There is an old plugin that does this and quite a bit more with easy-to-use widgets, but in this case I wanted something simpler. If any of you know a better way to show BP profile fields in mulitsite, please let us know in the comments.

Related posts:

1. How to Display Random BuddyPress Profile Data (or anything else) with Pretty jQuery Tooltips It’s cuter and easier than it sounds! :) This is...
2. How to Move a BuddyPress Profile Field to a New Group Adding and moving BuddyPress fields was made to be intuitive....
3. Coming Soon in BuddyPress 1.6: Profile Field Privacy Options Basic profile privacy is coming to BuddyPress. Find out more...

The BuddyPress Follow plugin is what you’re looking for. It allows members to follow other members activity and has just been updated to be compatible with BuddyPress 1.7. The plugin adds a new activity stream tab, follow/unfollow buttons to member profiles and a new tab to display the users following/followers in the members page along with total counts.

What are the differences between Friends and Followers?

Please note that it is not recommended to have the native friends component turned on when using the followers plugin. This would probably cause confusion to users who may not know the difference. If you want to change your BuddyPress site to use followers instead of friends, install the BuddyPress Follow plugin, available for free in plugin repository.

Related posts:

1. BuddyPress Followers Plugin: A Different Way For Users to Make Friends The new BuddyPress Followers plugin is now available. It has...
2. BuddyPress Private Messages for Followers Only Now Available Cut down on annoying private messaging spam with this new...
3. Assign Automatic Friends to New Users on Your BuddyPress Site Nobody likes to sign up to a new social network...

The exciting new world of Theme Compatibility

In the past you may have paid a pretty penny to get your WordPress theme compatible with BuddyPress. Even with the help of the BP Template Pack, you had to be able to manipulate the markup and CSS of your theme to make it look right. Those days are over, friends. BuddyPress now fits seamlessly into any WordPress theme.

BuddyPress 1.7 comes packed full of new features, improvements and hundreds of bug fixes. Take a closer look at the 7 most exciting new features of BuddyPress 1.7 for a quick overview of everything that’s new. The BuddyPress codex also has a 1.7 release notes page listing all of the changes in this release.

Goodbye, Installation Wizard

With brand new BuddyPress installations you’ll notice that that the setup process is now totally automated and the installation wizard has been removed. Now all you have to do is activate the plugin and you’re ready to roll. You’ll also notice the new About and Credits pages that help you to stay on top of what’s new and who to thank for it.

How To Update to BuddyPress 1.7

The BuddyPress development team has made it so that you can easily update your site even if you’re running ancient old BuddyPress 1.5. If you have previously been using the BP Template Pack for making your theme compatible with BuddyPress, you’ll be happy to know that this plugin is no longer necessary. The BP Codex has a specific process for you to follow for upgrading “Template Packed” themes. Before upgrading it would be a good idea to review the BuddyPress 1.7 theme compatibility information to get a solid understanding of the new approach to templating.

Enjoy this new release, fresh from the oven. You can download it today from wordpress.org or via your site’s dashboard. Many thanks to the BuddyPress development team and all of the contributors for their tireless work on this awesome new release.

Related posts:

1. BuddyPress 1.1.1 Compatible themes We’ve just released entirely bug fixed, tweaked, BuddyPress 1.1 (with...
2. Make Your WordPress Theme Compatible with BuddyPress Using the Updated BP Template Pack The BuddyPress Template Pack plugin has been downloaded over 85,000...
3. BuddyPress 1.6 RC1 Released: Start Testing Now! For those of you who have been waiting on the...

Before you throw your keyboard and delete your whole BuddyPress site, you should know that there are proven ways to reduce, if not eliminate, BuddyPress spam.

How Spam Usually Shows Up On BuddyPress Sites

There are three places where you’ll notice BuddyPress spammers:

• BuddyPress Members Directory or Dashboard Users Page
• Activity Stream
• Private Messages

The first place you’re likely to notice BuddyPress spam is in the activity stream. If spambots get past your registration form, they will usually post paragraph-length activity updates for embarrassing products that you probably don’t want advertised to your members.

Besides spamming the activity feed, the bots also like to get into your forums and private messaging inboxes. A spam message from a bot gives your members a bad impression of your community and can even cause members to delete their accounts.

10 Spam Killing Solutions for BuddyPress

Take heart! You’re not helpless against the spam bots. There are a number of ways that you can stop these spammers in their tracks. BuddyPress spam solutions can be divided into two main categories:

• Registration Plugins – Solutions that help keep spammers from registering
• Spam Management – Plugins for helping after spammers have already registered

By far, the best way to keep spam at bay is to stop the spammers at the door. That’s why many plugin developers have focused their efforts on creating plugins that stop spam at registration. We’re going to examine the pros and cons of each.

1. BuddyPress Security Check

Pros:
A math question is quick and easy. It’s also not nearly as annoying and frustrating as a CAPTCHA. Installation is easy and there are no options to configure. The plugin also does not store any values in the database.

Cons:
It slows down the registration process, though only by a few seconds.

2. Spam Destroyer

Spam Destroyer is an experimental plugin by Ryan Hellyer for blocking spammers from bbPress, BuddyPress and multisite registrations. The unique thing about this plugin is that it’s totally unobtrusive. It doesn’t add anything to your signup form. It checks for registration evilness in the background so as not to disturb your visitors.

Pros: No settings to mess with – install, activate and you’ll be blocking spam. No extra fields are added to the registration form. It has added protection against comment spam.

Cons: This plugin is not compatible with Jetpack, so if you’re using Jetpack for comments you’ll need to find a different spam plugin.

3. BuddyPress reCAPTCHA

Pros: CAPTCHAs are fairly difficult for bots to hijack and are effective at preventing spam.

Cons: A CAPTCHA is a cumbersome addition to the registration form and can be frustrating to some users. Setup and configuration requires editing the ‘bp-recaptcha.php’ file. It’s not user-friendly for those who are not familiar with FTP.

4. WangGuard

Despite its unfortunate name, WangGuard is a powerful and highly-rated plugin for stopping registration spam. It has a number of built-in measures to combat BuddyPress spam. This plugin is associated with a web service that helps to protect your site from sploggers, spam users, unwanted users and Black Hat SEO.

Here’s an example of WangGuard blocking blots on attempting to register:

It also includes the ability for users to report one another’s posts in the activity stream. This helps admins stay on top of spam and objectionable content in the activity stream in case a spammer has managed to get past registration.

Pros: WangGuard provides extra features for managing spammers if they’ve already gotten through. It provides statistics for tracking how many spammers have been blocked. You can easily customize the plugin’s settings from the control panel.

Cons: It requires API Keys to set up and configure. The service is only free if you have 500 or fewer registrations per day. WangGuard may provide more features than many small BuddyPress sites require.

5. Anti-Splog

• Limiting the number of signups per IP per 24 hours
• Human tests – answering random user defined questions, picking the cat pics, or reCAPTCHA.
• Pattern Matching – Checking site domains, titles, or usernames against your defined set of regular expressions.

Pros: Provides multiple options to choose from for signup form protection.

Cons: Anti-Splog does not work unless you’re running multisite. It also does not yet protect against spam entries in status updates, forums, activity streams.

6. BuddyPress Honeypot

Pros: BuddyPress Honeypot is completely unobtrusive and doesn’t add anything extra to the registration form.

Cons: It’s not available in the WordPress repository so it may be difficult to get plugin updates.

7. Ban Hammer

Pros: Ban Hammer doesn’t add anything new to the registration form and doesn’t inconvenience your visitors.

Cons: The customizable error message doesn’t always work with BuddyPress, but the basic ban hammer functionality works just fine.

8. BP Invitation

Pros: No spammer bots can possibly get through unless they have a way of guessing the registration code.

Cons: This solution does not work for every BuddyPress community. Potential registrants must already have the code in order to get in, so it essentially closes off your registration to those who have just discovered your site.

9. Akismet

Akismet? A BuddyPress plugin? Yes, indeed. Akismet can be used to help keep BuddyPress activity spam under control. BuddyPress 1.6 introduced activity management with Akismet integration. When posts are marked as spam by Akismet, you’ll be able to see them when you filter for spam under the Activity menu in the dashboard.

Pros: If you’re already using Akismet to combat comment spam, you’ll get the same high level of protection in the activity stream.

Cons: It requires an API key and connection to WordPress.com. Usually this is free but there is a fee for commercial use.

10. Spam Link Plugin

• Adds the “Mark as spammer” link back to the admin bar
• Adds a “Spammer” button to the activity stream entry meta row

Pros: Saves you time from having to search for the user in the dashboard in order to mark as spam and delete.

Cons: The plugin isn’t in the repository, so it might be difficult to get updates.

The only sure-fire way to make sure you don’t get any BuddyPress spam is to close off your site’s registration completely, but that would be completely counterproductive for most BuddyPress social networks where the idea is to grow membership.

The important thing to remember is that there is no one catch-all solution for BuddyPress spam. You may even need to do a combination of these measures in order to achieve full control over the spambots. Every BuddyPress site attracts different kinds of spammers and what works on one site may not work on another. Give a few of these proven plugins a try and you’ll discover what works for you.

Know any other ways to stop BuddyPress spam? We’d love to hear them in the comments.

photo credit: Yet another bedroom B-side by coba, on Flickr
photo credit: Henghwee! :D cc
photo credit: Josh Kenzer cc

Related posts:

1. How to Tackle Spam With The BuddyPress Spam Link Plugin Are you getting overrun by BuddyPress spam? Here's a new...
2. Coming Soon: BuddyPress Activity Stream Spam Control with Akismet Use BP Labs to test Akismet integration for the BuddyPress...
3. Block Spam on WordPress, Multisite and BuddyPress Using Math Questions If your WordPress site doesn’t have protection from spam, then...

The BuddyPress member directory styles come out of the box looking like a flat list. It is functional but it isn’t terribly exciting or inspiring. Today we’re going do something fun with directories and explore a little bit of BuddyPress theming. In this tutorial we’ll do some cool things with CSS and BuddyPress template files in order to create a more interactive directory that will encourage users to get connected to each other, spend more time browsing, clicking on profiles and making new friends.

Follow along in the steps below as we take the BuddyPress default member directory and transform it to look like this:

Here’s a quick overview of changes we’ll be making:

1. Add a new /buddypress/ directory to your theme for custom templates
2. Remove unnecessary extras from the members loop
3. Add New Location Field to members loop
4. Increase avatar size within the member directory
5. Customize the member avatars to be circular
6. Change the layout of the directory
7. Add a Greyscale effect to avatars on mousover
8. Customize “Add Friend” and “Remove Friend” buttons

We’re going to use BuddyPress 1.7 for this tutorial, as it will soon be released. However, the basic idea is still the same, no matter where the templates are located.

To start out, the BuddyPress member directory looks similar to this with the default styles:

For this tutorial we’ll be working with the default Twenty Twelve WordPress theme.

Step 1: Add a /buddypress/ directory to your current active theme and add template files.

To start making customizations to BuddyPress, we’re going to create a /buddypress/ directory within your current active theme.

The codex has some short and simple instructions for Theme Compatibility in BuddyPress 1.7. Locate the legacy template files here:

wp-content/plugins/buddypress/bp-templates/bp-legacy/

Copy the files you want to modify. In this case you might as well grab the /members/ directory and paste it into your theme’s new BuddyPress directory.

Step 2: Cut all the extra stuff out of members-loop.php

For this tutorial we’re going to trim down some of the information that is displayed on the directory page and remove the following two items.

• Remove the last active time tag
• Remove the members’ latest activity update

Displaying the last active time really seems like clutter to me and I don’t see it having too much value for the average BuddyPress community. If you want to remove it, cut this out of the members-loop.php file:

1

<div class="item-meta"><span class="activity"><?php bp_member_last_active(); ?></span></div>

Removing the latest activity update is just as easy. Cut this out of members-loop.php:

1
2
3

<?php if ( bp_get_member_latest_update() ) : ?>
<span class="update"> <?php bp_member_latest_update(); ?></span>
<?php endif; ?>

Step 3: Add a Location field to the Members Loop

Now we’re going to add something new to the member loop. The template file actual hints at how to do this in the comments. The documentation states that it does add an extra query for each member in the loop, but it is only one, regardless of the number of fields you show.

First you need to make sure you create the field you want to show in the BuddyPress profiles. We’ll use location in this example. Go to: Dashboard >> Users >> Profile Fields. Add your new field in the dashboard and then you can add it to the loop. Paste this into members-loop.php directly under the comment about how to show member profile data:

1

<?php echo bp_member_profile_data('field=Location'); ?>

Keep in mind that the value of the field is case sensitive, so that’s something to check if it seems like it’s not working.

Step 4: Increase the size of the avatars displayed in the members loop

Locate the member avatar code at the top of the loop:

1
2
3

<div class="item-avatar">
<a href="<?php bp_member_permalink(); ?>"><?php bp_member_avatar(); ?></a>
</div>

Change those lines to match this:

1
2
3

<div class="item-avatar">
<a href="<?php bp_member_permalink(); ?>"><?php bp_member_avatar('type=full&width=180&height=180'); ?></a>
</div>

The reason you want to specify type=full here is because it makes BuddyPress use the best quality avatar and size it down to the height and width you set. Otherwise it has to size up and it makes the avatars fuzzy.

Step 5: Make the avatars circular

Here we are targeting only the avatars in the members directory. Add this:

1
2
3
4
5
6
7
8
9
10

#members-dir-list img.avatar {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
}

Step 6: Add black and white hover effect to the avatars

This is a fun little effect that may help to keep users browsing your directory a little longer. Of course it probably won’t work in IE, but that’s not really a big deal as it’s just a cosmetic effect.

Add this to your stylesheet:

1
2
3
4
5
6
7
8

#members-dir-list a:hover img.avatar {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: -webkit-filter 0.2s ease-in-out;
-moz-transition: -moz-filter 0.2s ease-in-out;
transition: filter 0.2s ease-in-out;
}

Step 7: Customize the layout of the members directory

Let’s make the member listings load in a grid with rows of 3:

1
2
3
4
5
6
7
8

#buddypress #members-list li {
overflow: auto;
list-style: none;
float: left;
width: 30%;
margin: 0 20px 28px 0;
border: 0;
}

We’ll also make some small tweaks to change text size and alignment:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#buddypress #members-dir-list ul.item-list li div.item-title, #buddypress #members-dir-list  ul.item-list li h4, #buddypress #members-dir-list ul.item-list li div.item-meta
 {
width: 100%;
text-align: center;
}

#buddypress #members-dir-list ul.item-list li div.item-title {
font-size: 110%;
}

#buddypress #members-dir-list ul.item-list li div.item-meta {
text-transform: uppercase;
font-size: 80%;
}

#buddypress #members-dir-list ul.item-list li img.avatar {
margin-bottom: 8px;
}

Of course some of these adjustments depend on what theme you’re starting with as your active theme. If you’re using these basic templates, then the CSS should be fairly similar to above.

Step 8: Customize the Add Friend and Remove Friend Button

If there’s any way to filter this button, I don’t know about it. In order to customize the button text you’ll have to create a custom language file for BuddyPress. This process is fairly easy if you have a program like PoEdit to help you. Follow the instructions in the codex to create your own custom language file. For this tutorial we’re changing the language strings for the friendship buttons:

• Add Friend >> Change to “+”
• Cancel Friendship >> Change to “-”

Please note that this is not for every community. It’s just an example of how you can customize those buttons. If you feel that you’re losing too much in removing the text from these buttons, by all means, don’t change them. Your UI choices will depend entirely on the demographics of your community. Here’s how you can customize the buttons to look like the example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

#buddypress #members-dir-list a.friendship-button.add {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 5px solid #89ac48;
font-size: 26px;
font-weight: bold;
background: #a5d156;
color: #ffffff;
line-height: 50px;
}

#buddypress #members-dir-list a.friendship-button.is_friend.remove {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 5px solid #CC0000;
font-size: 26px;
font-weight: bold;
background: #FF5050;
color: #ffffff;
line-height: 50px;

}

ul#members-list.item-list li div.action {
text-align: center;
overflow-y: hidden;
top: 18px;
right: 6px;
}

With these changes you’ll have a member directory that looks something like this:

If you feel that the “Remove Friend” button is too prominent in red, you can hide it entirely by adding “display: none;” to the .is_friend.remove class. Alternatively, you could select different colors or text for the action buttons. This is the last step in customizing your members directory to match the example above.

It’s pretty amazing how just a little bit of CSS can totally transform your directories to look nothing like the BuddyPress default. BuddyPress 1.7 theme compatibility will open up the platform to many more WordPress developers. The components will fit nicely into your theme, but it’s up to you to make them stand out. Grab a copy of the 1.7 trunk and start experimenting before the official release arrives. You’ll be pleasantly surprised how easy it is to customize BuddyPress directly within your WordPress theme.

Related posts:

1. How to Create a Gallery of Members’ Avatars in BuddyPress This is a quick tutorial to show you how to...
2. Allow Members to Create Portfolios in BuddyPress BuddyPress Portfolio is an exciting new plugin that allows members...
3. Show Your BuddyPress Members on a Google Map with Avatars BP Member Avatar Map is a brand new plugin that...

BuddyPress 1.7 is very soon on its way to a dashboard near you. Theme compatibility is one of the most exciting features of the upcoming 1.7 release. But how will this affect existing BuddyPress themes?

If you’re a BuddyPress theme author and your theme supplies its own BuddyPress templates, you will need to prevent BuddyPress from running its theme compatibility when your theme is active. Boone Gorges outlined how to do this in the latest post on the BuddyPress Development blog. You’ll want to add this line to your theme’s functions.php file:

1

add_theme_support( 'buddypress' );

Although BuddyPress knows not to load its theme compat when it finds your PHP templates, it needs to be told if you’re already using your own CSS and JS for your BuddyPress theme. You don’t want to cause any conflicts in styling or AJAX with BuddyPress trying to load scripts that your theme is already loading.

Please note that if you have created a child theme of the BuddyPress default theme, there is no need to manually register BuddyPress support.

Going forward, theme developers will need to use this function when building fully custom themes that load that load their own CSS/JS files. Read more about bit on BuddyPress trac ticket #4846

Related posts:

1. Themeforest Releases Huddle: A WordPress and BuddyPress Community Theme Huddle is a new and unique BuddyPress theme now available...
2. Coming in BuddyPress 1.7: Compatibility for ALL WordPress Themes BP 1.7 may be the most exciting BuddyPress release yet!...
3. Status: A New Responsive Child Theme for the BuddyPress Default Theme Status is a brand new free child theme for the...

Get A Curated List of The Best BuddyPress Plugins From WordPress.org

There’s a new tool that helps to answer the question “Which BudydPress plugins should I use?” BuddyPlug is a brand new plugin from @modemlooper that provides you with a curated list of BuddyPress plugins in the same menu where you add new WordPress plugins.

The list is curated by the community and there are currently 83 plugins that have been included.

This is not to say that you should never install a plugin that doesn’t appear in this curated list. I would recommend using this as a guide or to help you narrow down options when there are multiple plugins that do the same thing.

BuddyPlug is especially useful if you’re new to BuddyPress and have no idea which plugins are quality and which you may want to avoid. Please be advised that the plugin does not come with a guarantee of any kind and is not meant to replace your own testing and research.

Of course, if you want complete peace of mind, you’ll want to check out our BuddyPress plugins at WPMU DEV. All of our plugins are guaranteed to be updated for the latest version of WordPress and BuddyPress the very same day of any new release. Developing with BuddyPress in mind doesn’t happen as an afterthought. When you launch your BuddyPress site, make sure you’re locked in with quality plugins – whether they are from a commercial provider or the wordpress.org repository. Installing BuddyPlug is just one more way that you can help to make sure your site will be ready for future updates.

Related posts:

1. Full List of BuddyPress Template Tags Looking for a list of BuddyPress template tags? The BuddyPress...
2. Full List of BuddyPress Conditional Template Tags The BuddyPress codex is growing and changing. The list of...
3. Full List of Theme Changes from BuddyPress 1.2.5 to 1.2.6 Wondering what’s changed in the BuddyPress default theme from 1.2.5...