Editing Profile Templates on BuddyPress

Here’s a peek at the directory options we have inside the “buddypress” plugin directory.

There are two directories that look like they would be a good candidate for customizing the profile fields. “bp-members” and “bp-xprofile.” Let’s take a peek at the Buddy Press Codex to find some clues. The codex gives us detailed information on the purpose of each of those directories and their file therewithin.

Let’s try “Members” first:

If we scroll down we find a guide called “Displaying Extended Profile Fields on Member Profiles” that gives detailed instructions on how to use action hooks to customize profiles. I think we can incorporate this into our solution. What’s cool about BuddyPress (and WordPress in general), is that we can avoid having to edit core files by simply creating plugins or just adding action hooks into our functions.php file. But we still need to take a peek at the template pages to figure out which action hooks we need to employ. The guide says the member-header.php file we need is located here:

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

But once we are inside that directory we only see:

This seems like a frustrating dead-end but that is just the way it works when you are dealing with opensource software. Not only is BuddyPress a living, breathing, and growing project, it’s documentation is too! It looks like we stumbled upon an out-of-date guide, so we’ll keep digging to find the correct directory path and then submit a correction.

So let’s keep digging. The member-header.php file is actually located at:
/wp-content/plugins/buddypress/bp-templates/bp-legacy/buddypress/members/single

Way deep in there! The profile.php file is also located in here so let’s take a peek at them both:

BuddyPress is annotated amazingly well. Scroll through the file and look for the comment that matches up with where you want your customization to appear in the template.

/**
* Fires before the display of the member's header meta.
*
* @since BuddyPress (1.2.0)
*/

Want to run some code before the header? After the header? With the header? The action hooks are all there for the taking. So let’s try one. How about we try to make something appear in the header? I am using Chrome’s “inspect element” feature to show where exactly the header section is in the BuddyPress profile.

Where exactly in the header do we want to add our customization? Dig a bit deeper and open up some of those drop down items to figure out the name of the section you want to tweak.

Okay, so that section is inside a div that is called “item-meta.” Let’s look back at the member-header.php file to see which action hooks are located inside that div.

So what are we looking at here? Start at line 46. You can see the opening tag for the div “item-meta” which we know is that large white area just to the right of the avatar. Right now the only thing displaying in that area is the latest activity note, which we see clearly marked starting at line 50. We want to customize something just below that. Now we could right now hardcode something into this template file, but our customizations would get wiped out with the next BuddyPress update. We have three options here:

1) Re-create this file in our child theme
2) Use action hooks in our functions.php file
3) Create a whole new plugin

This file is embedded so deeply, the thought of recreating all those directories makes me sleepy. I’m going to opt for option #2, Use action hooks in our functions.php file.

First, locate your functions.php file. You are using a child theme (or at least you better be), so your functions.php file is likely pretty empty. It is located here:

/wp-content/themes/yourchildtheme/functions.php

Open it up and let’s add a very simple action hook:

The code you see at the top is the basic commands needed to properly execute a child theme. The bottom section, however, is our new code. We are telling WordPress to add a new action to deploy with bp_profile_header_meta. We can create any name we wish for this new action. I chose “display_user_hello_world.” In the next line we define what this action should actually do. In this case, I kept it very very very simple: I just want it to print “Hello World.”

And just like that we have:

So you can see, the customization possibilities here are massive. I’m going to keep playing around with this and see what else I can make happen.

Happy coding!