how to add a new group tab to ultimate member groups

One of the primary extensions we made use of was the Groups extension to house conversations for different organizations. But our client had a last-minute addition to incorporate group-specific events.

This required adding a new tab under the group page. Unfortunately, there was no documentation on how to add a new group tab. After a couple of hours of researching and experimenting, we were able to decipher a solution.

Here is the full code if you want to skip the explanation:

class um_custom_group_tabs {

    public function __construct() {
        # Create Events tab
        # Filter creates the tab, action outputs the content
        add_filter( 'um_groups_tabs', array( $this, 'events_tab' ), 10, 5, 1 );
        add_action( 'um_groups_single_page_content__group_events', array( $this, 'groups_single_page_content__group_events' ) );
    }

    /**
     * Single Page Content - Group Events Tab
     *
     * @param $group_id
     */
    public function groups_single_page_content__group_events( $group_id ) {
      echo 'This is the events tab!';
    }

    /**
     * Add a tab to single group page
     *
     * @param $tabs
     * @param $group_id
     * @param $param_tab
     */
    public function events_tab( $tabs, $group_id, $param_tab ) {
      $tabs[ 'events' ] = array(
        'slug' => 'group_events',
        'name' => 'Events'
        );
      return $tabs;
    }

}

# Initiate the class!
$custom_group_tabs = new um_custom_group_tabs;

Disclaimer: All of our web development at Düable abides by Object Oriented Programming. That is why you will see functions, filters, and actions added within a class.

Don’t worry! You can still simply copy/paste it to the functions.php file of your theme.

Step 1:

Create a class to house the tabs you will create.

This will make your code cleaner, more organized, and easier to update in the future. You can name it whatever you want, but I went with um_custom_group_tabs because I’m a fan of being verbatim.

Add a function named __construct() which will house our triggers for actions and hooks.

class um_custom_group_tabs {

    public function __construct() {

    }

}

Step 2:

We’ll use the um_groups_tab filter to add a link to the groups page tabs list. First, let’s write the function that will add the new tab.

Replace events in $tabs[ ‘events’ ] with whatever word describes the tab you are creating. In the array that follows, replace group_events with what the URL of the tab should be. Make sure to user underscores instead of spaces or hyphens! And make the name whatever you want the link to show as.

class um_custom_group_tabs {

    public function __construct() {

    }

    /**
     * Add a tab to single group page
     *
     * @param $tabs
     * @param $group_id
     * @param $param_tab
     */
    public function events_tab( $tabs, $group_id, $param_tab ) {
      $tabs[ 'events' ] = array(
        'slug' => 'group_events',
        'name' => 'Events'
        );
      return $tabs;
    }

}

class um_custom_group_tabs {

    public function __construct() {
        # Create Events tab
        # Filter creates the tab, action outputs the content
        add_filter( 'um_groups_tabs', array( $this, 'events_tab' ), 10, 5, 1 );
    }

    /**
     * Add a tab to single group page
     *
     * @param $tabs
     * @param $group_id
     * @param $param_tab
     */
    public function events_tab( $tabs, $group_id, $param_tab ) {
      $tabs[ 'events' ] = array(
        'slug' => 'group_events',
        'name' => 'Events'
        );
      return $tabs;
    }

}
Now if you load a group page, you should see the added tab!

Step 3:

We’ve added the tab link, but it will lead to a blank page.

To add content, we’ll be making use of the um_groups_single_page_content__ action. This is a dynamic action that accepts the slug of your tab.

So in our case, it will be:

um_groups_single_page_content__group_events

Make sure you use the slug you set for the tab in the last step instead of group_events!

Again, let’s start with the function that will output the content.

class um_custom_group_tabs {

    public function __construct() {
        # Create Events tab
        # Filter creates the tab, action outputs the content
        add_filter( 'um_groups_tabs', array( $this, 'events_tab' ), 10, 5, 1 );
    }

    /**
     * Single Page Content - Group Events Tab
     *
     * @param $group_id
     */
    public function groups_single_page_content__group_events( $group_id ) {
      echo 'This is the events tab!';
    }

    /**
     * Add a tab to single group page
     *
     * @param $tabs
     * @param $group_id
     * @param $param_tab
     */
    public function events_tab( $tabs, $group_id, $param_tab ) {
      $tabs[ 'events' ] = array(
        'slug' => 'group_events',
        'name' => 'Events'
        );
      return $tabs;
    }

}

# Initiate the class!
$custom_group_tabs = new um_custom_group_tabs;

I’m not a “Hello World!” kind of guy, so I opted for “This is the events tab!” using a simple echo command. Feel free to add in whatever content and functionality you would like to see on the page within this function. I’ve named it groups_single_page_content__group_events in this case.

And the final step is adding the action to output this content on the created tab.

class um_custom_group_tabs {

    public function __construct() {
        # Create Events tab
        # Filter creates the tab, action outputs the content
        add_filter( 'um_groups_tabs', array( $this, 'events_tab' ), 10, 5, 1 );
        add_action( 'um_groups_single_page_content__group_events', array( $this, 'groups_single_page_content__group_events' ) );
    }

    /**
     * Single Page Content - Group Events Tab
     *
     * @param $group_id
     */
    public function groups_single_page_content__group_events( $group_id ) {
      echo 'This is the events tab!';
    }

    /**
     * Add a tab to single group page
     *
     * @param $tabs
     * @param $group_id
     * @param $param_tab
     */
    public function events_tab( $tabs, $group_id, $param_tab ) {
      $tabs[ 'events' ] = array(
        'slug' => 'group_events',
        'name' => 'Events'
        );
      return $tabs;
    }

}

# Initiate the class!
$custom_group_tabs = new um_custom_group_tabs;

how to add a new group tab to ultimate member groups

1 thought on “how to add a new group tab to ultimate member groups”

Leave a Reply Cancel reply