How to add custom fields to the BuddyPress activity form

Hi again, long time no see! After having a small writer’s block, I decided to come back with a new post about BuddyPress development. In today’s post, we’ll see how to add custom fields to the BuddyPress activity form.

As I have previously said, by default, BuddyPress has only the very basic features. So the default new activity form has only one textarea field. It’s enough to communicate, to deliver an idea but sometimes you want to have something more complex. Maybe you want to allow your users to share their geolocation. Or maybe your users want to better structure the information they share.

No matter what exactly brought you here, you probably already know why you need to add custom fields to the BuddyPress activity form. So let’s get started!

Introduction

If you’ve read any of my previous posts, you already know that I like to use realistic examples when I write tutorials. This time is no exception.

Let’s imagine that at some point our BuddyPress group became something more than just a way for members to chat. They became a better organized structure and now they want to gather together sometimes.

And let’s imagine that our group is very active. The activity feed is constantly updated with new posts and comments. So we better have a way to mark, to highlight new gathering announcements.

Let’s add a checkbox under the default textarea field. This checkbox will be visible only to the group administrators. And if the activity was marked as an announcement, we’re going to highlight it somehow with some additional CSS rules to make it more visible in the feed.

How to add custom fields to the activity form?

Sometimes, extending the default BuddyPress features is a real headache. Luckily, not this time.

First of all, you can edit the template of the activity post form. In this case, everything will depend on what version of BuddyPress you use and what theme you use on your website. In most cases, the main thing is that your custom field should be somewhere inside the whats-new-form form.

The alternative way I prefer is to use one of the BuddyPress (or your theme) hooks. Most of them support the bp_activity_post_form_options action hook that fires right under the activity text field.

<?php

add_action( 'bp_activity_post_form_options', 'render_custom_activity_fields' );
function render_custom_activity_fields() {
	if ( ! bp_is_groups_component() ) {
		return;
	}
	
	if ( ! groups_is_user_admin( get_current_user_id(), bp_get_current_group_id() ) ) {
		return;
	}
    ?>

    <input type="checkbox" name="is_announcement" id="is_announcement" value="1" />
    <label for="is_announcement">Is announcement?</label>

    <?php
}

Now, if I go to the group page and click on the activity textarea field, I see my custom checkbox:

I’ve added a small margin between the checkbox and its label, but you should see almost the same result.

How to save the custom activity data

But for now, our custom checkbox is just a few additional HTML tags for BuddyPress. It doesn’t affect the backend logic of an activity. We need to save the checkbox value.

To achieve this, we need to use the bp_activity_after_save action hook that fires after a new activity was inserted into the database. This action handlers accept one argument and this is the instance of the current activity (passed by reference).

BuddyPress activities, just as WordPress posts, can have meta fields and BuddyPress comes with some in-built functions to work with the activity meta data.

For example, to save or update a meta field, we can use the bp_activity_update_meta() function:

add_action( 'bp_activity_after_save', 'save_custom_activity_fields', 10, 1 );
function save_custom_activity_fields( $activity ) {
    if ( isset( $_POST['is_announcement'] ) ) {
        bp_activity_update_meta( $activity->id, 'is_announcement', sanitize_text_field( $_POST['is_announcement'] ) );
    }
}

Now, let’s test everything out and create a new activity and mark it as an announcement. This is the first post I write after ChatGPT was publicly released, so I asked it to write an announcement about an imaginary gathering of WordPress developers in Kyiv, the city I live in, on August 24, the Independence Day of Ukraine.

Now, if I click on the submit button, my new activity will appear but I won’t see the difference. Let’s check if the data was really saved and highlight our new announcement as well as all future ones.

To do this, I’m going to add a new CSS class to every activity that has the is_announcement meta field.

This time, I’m going to use another filter hook that many BuddyPress themes have —bp_get_activity_css_class. This hook allows you to customize the class list of an activity. Pay attention: your filter handler will get the class list as a string, not an array.

add_filter( 'bp_get_activity_css_class', 'add_custom_class_to_announcement_activities', 99, 1 );
function add_custom_class_to_announcement_activities( $activity_class ) {
	// This is a global variable that can give you access to the current activity in the loop
	global $activities_template;
	
	$activity_id = $activities_template->activity->id;
	$is_announcement = bp_activity_get_meta( $activity_id, 'is_announcement', true );
	
	if ( $is_announcement ) {
		$activity_class .= " announcement";
	}
	
	return $activity_class;
}

I’m not the greatest designer so I’ll just add a red border to all activities that have the announcement CSS class.

.groups.activity_update.announcement {
	border: 3px solid red;
}

Now, after we added both code snippets, let’s update the page and see if anything has changed:

Great! The activity that I marked as an announcement has a red border while the regular activity post right after doesn’t have it. Everything works just as we expect.

Summary

Custom activity fields in BuddyPress offer endless possibilities for enhancing engagement and personalization. You can extend the BuddyPress activity form with event details, tags, media attachments, and so on, creating a dynamic and interactive experience for your users.

I hope you found this post helpful.

If you have any questions or issues, feel free to write about them in the comments section under this post or even contact me directly.

Don’t forget to subscribe to my Twitter account or follow me on LinkedIn if you don’t want to miss new posts on my blog.

Thank you for your attention; see you in the next one!