How to translate the group name and description on BuddyPress using ACF Pro and WPML

February 6, 2021

If you have been looking to translate the group name and description with WPML on BuddyPress and/or BuddyBoss platform and you found yourself on the WPML support forums with answers like "Unfortunately it is not possible to translate e group names and descriptions yet." or "Actually I am not sure if this is possible...".

Well, you're in luck!

Because I spent countless minutes (mostly because I forgot to turn on my time tracker) trying to figure out how to resolve this naggin' issue with the simplistic grace of translating using WPML.

Before diving deep into the code and breaking your frontal lobe on why it isn't working only to figure out you're missing an ; or forgetting to close something, let's all take a step back and return to elementary school with the good ol' paper and pencil.

But since the invention of the internet and the modern-day phone, we'll settle for notepad or a plain-text text editor.

What do I want to use?

WPML
BuddyPress/Boss
ACF Pro specifically the Options Page

What do I need to make this work?

There are always going to be things you are not going to think about before you achieve your end goal but knowing what your end goal is and planning steps on how you can get to that goal is half the battle. I find thinking (mostly drawing doodles) helps me a lot more than 10 thousand open tabs.

How do I determine the current language on WPML?

Having to work on past jobs and projects using WPML, I know exactly what to search for.

So with that, I'm one step closer to my master plan.. to resolve translating BuddyPress's group name and description.

Where can I find the template file for the BuddyPress Group Name and Description?

This step may be easy for me to figure out but you really need to know and learn about WordPress Child Themes, if you're not using Child Themes on your client's site you are in for a future headache, so save yourself some stress and some unread ATTN: important emails, and learn about child themes and templates.

If you know about child themes and overriding the parent theme template, my trick is copying and searching the class name in the template file to see if I'm on the right track. And if I do find the class name I simply add a class name of test afterward (with a space of course) and then saving the file, pressing F12, and right-clicking on the refresh button, and selecting Clear Cache and Hard Reload. Sometime's it takes a minute before it shows usually it is because of a caching plugin or because of server cache / CDN.

For the BuddyPress group name and description its in the cover-image-header.php file in /buddypress/members/single/ with the class name of .bb-bp-group-title for the name and .group-description for the description.

Now that we know where the name and description are pulling from and we also know that we can override the theme template file within our child theme, we're like 2 steps in achieving our end goal. *high-five*

Next step: Apply the WPML if statement and see if the name and description change when I click on the WPML language switcher. For this, you'll need to know the WPML language code for your 2nd language, for moi - it's french, for obvious reasons because I'm from Canada.

Inside the cover-image-header.php file on Line 95 you'll find the group title and on Line 104 you'll find the group description

The following echo statements show how the group's name and description are being called, so taking that we can add our WPML if language statement.

<?php echo esc_attr( bp_get_group_name() ); ?>

<?php echo bp_nouveau_group_meta()->description; ?>

Be sure to comment out the original code so there it doesn't show doubles and/or confuse you later on.

So, we end up with the following - it's static for now, nothing fancy we just want to make sure it works.

<?php
if(ICL_LANGUAGE_CODE=='fr') {
    echo 'Bonjour le monde!';
} else {
    echo esc_attr( bp_get_group_name() );
}
?>

Ok, now let's repeat that for the description also.

<?php
if(ICL_LANGUAGE_CODE=='fr') {
    echo 'Bonjour le monde!';
} else {
    echo bp_nouveau_group_meta()->description;
}
?>

How can I determine the BuddyPress group and sync it with ACF on the options page?

Step 3a - Get the Options Page (You'll need ACF Pro, worth every penny - save yourself trouble and buy back some time)

if( function_exists('acf_add_options_page') ) {
    acf_add_options_page();
}

Step 3b - Setup the Options Page Field Group

By default, ACF is not translatable in WPML; usually, you'll need to check the theme or plugin in the Theme and plugins localization panel but we'll just create a dummy ACF field group. The name doesn't matter just need to create an initial field group.

Once that group is created; scroll down to the bottom and look for the Multilingual Content Setup meta box and select Make 'Field Groups' translatable and click Apply

Multilingual Content Setup

This should create a tab for the 2nd language on the ACF field group page, so delete the original dummy ACF field group and click on that 2nd language to create the ACF field group you will be working with.

Step 3c - Setup the Repeater Field

Now, you may ask how I ended up deciding to use the repeater field rather than creating a text field for the name and description for the group's translation. There is really no way to determine how many groups there would be in the future so by using the repeater field we are able to future-proof this bootlegged setup for as long as possible until WPML or BuddyPress decides to support the translation of the name and description of the groups.

Give this repeater field a label and copy the label name to a text editor to be used later.

Create 3 repeater sub-fields: slug, name, and description

Basically, the idea is to determine the group's slug and if the slug is X then pull the 2nd language's name and description. Sounds simple but just you wait.

First, we need to find the groups slug - you'll most likely end up finding bp_is_groups_component() first but this function isn't it. The bp_is_groups_component() function will only return true if its a group's component so every group would return true so it won't be able to separate each group; which is what we need to make this work.

The function you will need is bp_get_current_group_slug(), this built-in function returns the group's slug - how I knew to use the slug at the start you may ask? I didn't - I was guestimating what I could use based on my history of working with WordPress, slugs, ids whatever. Sometimes plugins don't have such built-in functions it's just the nature of the game.

Next you'll need the ACF repeater fields to pull in the data of each row on that field group from the options page

if ( bp_get_current_group_slug() == get_sub_field('group_slug') ) {
    echo get_sub_field('group_description');
}

"Amaaaaazzzing...I got this solved.." is something you might be saying right now because that was what I was thinking when I got here - but you also might be thinking that really don't need the rest of the post and you might be right; right after you enter your email and the 3 digits on the back of your credit card.

Even if you get the repeater (sub)fields working and you think it's done and send that (regrettable) email to your client saying it's done without doing QA; you'll probably miss some view/page that no one really goes to but the client/customer.

So back to the problem at hand.

There are some realizations you might have landed on at this step of the progress, such as...

What if the group name and description don't have a translation on the options page?
Will the original language name and description show?

This was the step that took me the most time and almost broke my brain in an endless if-else hell but the solution to the problem was so simple.

You'll probably think you'll need to count how many rows there are on the options page and display the original name and description after the loop is finished with an else statement, but you don't need to.

What you need to do is when the group's slug if statement fails display the name and description once with the count function.

You'll end up with something like this for the group name:

<?php
if(ICL_LANGUAGE_CODE=='fr') {
	if( have_rows('group_french_translation', 'option') ) {
		$count = 0;
		while( have_rows('group_french_translation', 'option') ) {
			$count ++;
			the_row();
			if ( bp_get_current_group_slug() == get_sub_field('group_slug') ) {
				echo get_sub_field('group_title');
			} else if ( $count <= 1 ) {
				echo esc_attr( bp_get_group_name() );
			}
		}
	} else {
		echo esc_attr( bp_get_group_name() );
	}
} else {
	echo esc_attr( bp_get_group_name() );
}
?>

and this for the group description:

<?php
if(ICL_LANGUAGE_CODE=='fr') {
    if( have_rows('group_french_translation', 'option') ) {
        $count = 0;
        while( have_rows('group_french_translation', 'option') ) {
            $count ++;
            the_row();
            if ( bp_get_current_group_slug() == get_sub_field('group_slug') ) {
                echo get_sub_field('group_description');
            } else if ( $count <= 1 ) {
                echo bp_nouveau_group_meta()->description;
            }
        }
    } else {
        echo bp_nouveau_group_meta()->description;
    }
} else {
    echo bp_nouveau_group_meta()->description;
}
?>

I've been told by my friends countless times that I don't explain my thought process and that I land on conclusions without properly explaining how I got there, so please leave a comment below if you think I've missed a step or if you have a better long term solution for this problem leave a comment below. Until next time.