How to customize the BuddyPress profile page

Creating user profiles in BuddyPress is easy. But when it comes to BuddyPress and custom profile fields our choices may be limited. Therefore, today we’ll look into different ways to load custom profile fields on your BuddyPress profiles. Additionally, our goal is to understand how to edit and customize your fields display.

The BuddyPress xProfile fields are great for storing custom user fields. It’s a simple and effective way to create powerful user profiles. The problem comes when you want to customize it.

Chances are you already know how the default BuddyPress profile pages look like. But often this default look won’t match your needs. You may want additional profile fields or tabs. Additionally, you may want different design options for your fields. And depending on your site you may even want different designs for each profile type.

buddypress custom profile

If you are facing any of the issues above this tutorial is for you. Our goal today is to explore different options for better user profiles. We’ll also see other coding paths you can follow for custom shortcodes and custom templates.

Then let’s get started!

BuddyPress: Custom profile fields with a custom design

Before diving into our code, let’s see a glimpse of the final result.

BuddyPress customize user profile

As you may imagine, this is just one of the many options for profile customization. Using the snippets and ideas here you’ll be able to do this for the default profile. Additionally, you’ll be able to do this for custom pages and add profiles via shortcodes.

Setting up your BuddyPress Custom Profile fields

Since our guide revolves around customizing custom fields, we need some data to work with. In our example, we create the following fields:

  • Date of Birth – Date
  • Job Title – Dropdown
  • Coding skills – Radio buttons

Once you have BuddyPress active you can edit your profile fields under WordPress Dashboard > Users > Profile Fields. Then we add our sample fields there so we can have our demo data.

BuddyPress custom profile fields setup

Next, we add some demo data into these fields. Here is the default profile with our demo data:

BuddyPress profile fields

Now it’s time to start coding our custom display for these fields.

How to edit the BuddyPress profile page

There are many routes we could go by in terms of customizing the BuddyPress profile. Your first option is just creating a new template for your profile. This is a great option, but it can be quite scary if you just want a simple edit.

Another idea is using hooks. That’s the route we go for. That’s because it allows us to create our desired effect and still be open to new options. For example, if you want to use our custom functions in a shortcode, that’s fine. If you want to add them into a template file, that’s good as well. You can even add them into a custom tab with some additional coding.

Since we want to use hooks for a custom BuddyPress profile page, we need to find the right one. There are many options such as:

  • bp_before_profile_content  – adds our content into the “Profile” tab, which is the same tab BuddyPress uses for custom fields
  • bp_before_member_activity_content – this one adds our content inside of the “Activity” tab, which is the first one visible
  • bp_profile_header_meta – As for this one, it adds our content in our header, and it’s visible no matter which tab the visitor is on

Since we want something different, let’s go for the  bp_profile_header_meta hook.

Now we need a function to gather our custom fields for the current user. BuddyPress has the bp_get_profile_field_data  function, which is a great way to load data. Since this function accepts arguments as an array, we wrote a simple function to make our code easier to read. Here is our base code:

Now it’s time to create our functions to customize our data. But first, have a look at what we are going to do with our data points:

  • Just display the Date of Birth (no modifications)
  • Display the Age, based on Date of Birth
  • Display the Job Title along with an icon
  • Show skills as a progress bar

If we just want to display our custom fields, it’s as simple as using our helper function. Thus, in order to display the Date of Birth you can use this code:

This could be just a one-line function. But to make things nicer we add a simple check if the current user has a DoB stored. Otherwise, if the DoB is empty that line won’t show up.

When it comes to dealing with an “age”, things can get confusing. That’s because this field changes from time to time. Therefore, if we actually store the age as a number this would be outdated quite fast. Hence, we use the DoB as a starting point to calculate the Age. This is how we do it:

Next, our mission is displaying icons along with our options. There are many ways to do it, depending on the number of options and icons you’ve got. But usually a switch is a good way to solve this:

For simplicity, we have only set the name of the image (such as phpdev.png), however you’ll need to place the full image URL instead in your code.

Now we are one step closer to our customized BuddyPress Profile! This code just checks our current value (job title) against many options. If it finds a match we run the code for that case.

Our last task for today is replacing a number with a design element. Therefore, for the coding skills, we won’t even display the actual number, but rather a progress bar. This is the code to do it:

Here we’re using the BootStrap CSS library for styling. This way we can just add a few lines of code and have a nice progress bar. The main issue there is converting our 0-5 scale into a 0-100 scale.

Below is the full BuddyPress custom profile fields code in case you just want to copy& paste:

 

Conclusion

Today we saw some coding examples that you can use to customize your BuddyPress profile fields. We walked through several options and snippets that you can use in your site. These snippets can be used to replace fields, extend their functions, and customize your display.

In addition, you can use some extra code for other functions. Here are some ideas:

  • Show the total post count by users
  • Use font icons for easier implementation (rather than images)
  • Use animations and animation libraries
  • Include badges and other rewards for users, depending on their loyalty or achievements
  • Replace simple fields with icons, such as tracks run, goals scored, events attended
  • Load and interact with data from other plugins, such as WooCommerce, LearnDash, bbPress
  • Add design customizations depending on certain fields, creating different profile page designs for each user types

That’s it! We hope you enjoyed and see you again next time!