How to Create A Custom BuddyPress Members Directory

How to Create A Custom BuddyPress Members Directory

One of main reasons that BuddyPress communities fail is because members don’t connect and interact with each other. One way to improve that is through design that keeps members interested.

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:

Customized BuddyPress Member Directory

Here’s a quick overview of the 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:

Default member directory

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.

Create a BuddyPress directory within your 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:

<?php bp_member_last_active(); ?>

 

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

<?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:

<?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:

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

Change those lines to match this:

<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 that 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.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

Step 5: Make the avatars circular

Circle avatars

After customizing the member loop, we’re now moving on to the style changes. You can make the avatars circular with a few CSS tweaks. This effect adds some fun to the directory. For some quick simple changes like this, you can add the changes to your theme’s stylesheet.

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

#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.

Greyscale avatar on mouseover

Add this to your stylesheet:

#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:

#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:

#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:

#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:

Customized BuddyPress Member Directory

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.