How to add a new icon in the Profile ?


This article is outdated. Woffice has a new documentation here: 


If anything is missing, let us know and we will improve it. It was designed to be searchable, more organized and more complete. 


Here is a quick guide about how to add a new icon to the user's profile. 

(You need Woffice 2.0.2 at least : https://alkaweb.ticksy.com/article/4136/ with Buddypress Xprofile enabled) 

(You need to have basic PHP / HTML skills in order to make this change)

We'll use a child theme and assume you're using one as well. So you'll be able to update Woffice without loosing your changes. 

1. Creating your text field

To get started, we need to add a new field within the user profile. You can do that from your Wordpress Admin > Users > Profile Fields > Add New Field 

Fill in the input's name and select "Text Box" for the type. The description can stay empty. 

Let's say we've called our field : "URL"

Once saved, we'll see a new URL field in our user's profile edit page. Good. 

2. Adding the HTML in the user's profile header

Now, from you child theme : woffice-child/functions.php file, you can add the following function : 

function wofficeCustomIcon(){
    // We get the value from the current user : 
    global $bp;
    $member_id = $bp->displayed_user->id;
    $field_value   = xprofile_get_field_data('URL', $member_id);
    // We check whether it's empty or not : 
        // We display it : 
        echo'<a href="'.esc_url($field_value) .'"  title="'.__('SEO Title','woffice').'" target="_blank">';
            echo'<i class="fa fa-link"></i>';
add_action('woffice_after_member_icons', 'wofficeCustomIcon');

Few notes : 

  • URL in xprofile_get_field_data('URL', $member_id); need to be changed with your own field's name from step 1
  • fa-link is what creates the icon, you can pick up one of the 650+ icons available on : http://fontawesome.io/icons/
  • woffice_after_member_icons is a Woffice action to output our custom code, if you want to add your icon at the beginning use : woffice_before_member_icons