buddypress widgets -display name

Hi, ive added footer widgets for whos online and friends. but the members names are only displayed when you hover over the profile image. How can the profile name and their location be displayed to the right of their image

  • Kris Tomczyk

    Hi Murray,

    Hope you are doing good today.

    Solution for this to use one of the JavaScript and CSS Editor. I recommend this one: https://pl.wordpress.org/plugins/custom-css-js/

    Step 1:
    Install this plugin: https://pl.wordpress.org/plugins/custom-css-js/

    Step 2:
    Paste this code to field in Custom CSS & JS -> Add Custom JS:

    jQuery(function($) {
    $('.item-avatar a').each( function() {
    $(this).append('<span class="username">' + $(this).attr('title') + '</span>');
    });
    });

    Click Publish.

    Step 3 (optional):
    Paste this code to field in Custom CSS & JS -> Add Custom CSS:

    .username {
     font-size:16px;
     color:red;
    }

    Of course you can use different size of font or color.

    I am waiting for your reply.

    Kind Regards,
    Kris

  • Murray

    Hi Kris,

    So it worked on the widget footer but caused a slight problem elsewhere.
    In buddypress the members directory list page that lists all profiles already has the names located to the side. Now there is additional text below each member profile photo with "Undefined" written in red.

    Also noticed on the widget that the profile name is against the right side of the photo box. Can you move the name over just a little bit.

  • Kris Tomczyk

    Hi Murray,

    In custom css delete:

    .username {
     font-size:16px;
     color:red;
    }

    and add:

    .username {
     font-size:16px;
     color:red;
     padding:0 0 0 15px;
    }

    15px - this value you can change to 5px or 10px or even 20px, see it for yourself which is better for you

    ####################################

    also change in custom JS:

    delete old code that I gave you and paste a new on:

    jQuery(function($) {
    $('.avatar-block a').each( function() {
    $(this).append('<span class="username">' + $(this).attr('title') + '</span>');
    });
    });

    this will add username only if footer. You will not see it on members site.

    Kind Regards,
    Kris

  • Kris Tomczyk

    Hi Murray ,

    The previous solution I gave you was based on the standard user fields. Looking for solutions for you I came across many threads on similar topics. Unfortunately, after couple of solution I found and tested the only one that works is to edit the source code of the Buddypress plugin. I have to inform you that this solution will be not permanent, because every time plugin will be updated changes made in files will be erased. You should then add it again to the specified php file.

    Find your "class-bp-core-recently-active-widget.php" file in your "/wp-content/plugins/buddypress/bp-members/classes/" folder. Find the line:

    <a href="<?php bp_member_permalink();?> "title =" <? Php bp_member_name ();?> "> <? Php bp_member_avatar (); ?> </a>

    And replace it with:

    <a href="<?php bp_member_permalink();?> "title =" <? Php bp_member_name ();?> "> <? Php bp_member_avatar (); ?> </a> <?php bp_profile_field_data( array('user_id'=>get_the_author_meta( 'ID' ),'field'=>'Location' )); ?>

    This will display the user's location. I called the custom field on my test page just like your "Location".

    Here is a screenshot of my site that the code is working.

    If you feel uncomfortable with that I can do it for you. I will need your FTP acceess:
    Please send it through our secure contact form here https://premium.wpmudev.org/contact/#i-have-a-different-question and make sure that subject is "I have a different question" and:
    - Mark to my attention: ATTN: Krzysztof Tomczyk
    - FTP credentials (host / username / password)
    - Link back to this thread

    Kind Regards,
    Kris

  • Murray

    Hi Kris,

    I would prefer you make the change. but if we are going to do this I would like to see username, age and location.

    Ive sent you my cpanel access details.

    Also buddypress has its members directory list with just profile pic and username. Could you add the age and location to that too? its not part of the widget section but a members directory page in itself.

    And if i lose the changes please let me know the code you modified to insert it.

    Thanks again for this.