New profile icon

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

Requirements

  • You need Woffice 2.0.2 at least, with Buddypress Xprofile enabled) 
  • You need to have basic PHP / HTML skills in order to make this change

We will use a child theme and assume you’re using one as well. So you will 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 have called our field : “URL

Once saved, we will see a new URL field in our user’s profile edit page. 

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 :

    if(!empty($field_value)){

        // We display it :

        echo'<a href="'.esc_url($field_value) .'"  title="'.__('SEO Title','woffice').'" target="_blank">';

            echo'<i class="fa fa-link"></i>';

        echo'</a>';

    }

}

add_action('woffice_after_member_icons', 'wofficeCustomIcon');

Few notes: 

  • URL in xprofile_get_field_data(‘URL’, $member_id); needs 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 at 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

Powered by BetterDocs

Leave a Reply

Your email address will not be published. Required fields are marked *