Skip to:

user role box under profile picture

  • Masoud


    i am using latest version of wordpress and buddypress.
    in site, i want the users to know who is admin of website.
    so i decided to create a small box under profile picture, which should say the current user role.
    (just like the one, here on buddypress)(you can see my user role as Member)(Participant)(Moderator)…

    1 – i created a css property :
    .buddypress-under-avatar-img-txt {height:auto;width:90px;background:green;border:1px;color:black;padding-bottom:3px;text-align:center;}

    2 – copy/paste ” cover-image-header.php ” file

    3 – and added my code on line 27:

    <?php bp_displayed_user_avatar( 'type=full' ); ?>
       <div id="buddypress-under-avatar-img-txt">
         <?php if (current_user_can('administrator')) ?>
           <br /><p <?php printf ('Admin of site'); ?> </p>

    but the box is not showing.
    can anyone please help me on this? which part of my code is wrong? how can i correct it?

    any help would be appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)

  • danbp



    you have many errors in your code.

    – in the css you declare a class (a dot ) while you use an ID (#) in the html
    – in the code, you omit to close a p tag, and you need also a user_id and a way to get the displayed user (WordPress) role. Both are missing.

    Here, the whole thing corrected.
    – we don’t need a extra div, as we only add a p tag in an existing div.
    – the code to get the role holds in 2 small lines.

    The CSS (goes into child theme’s style.css)

    #item-header-avatar p {
    margin: auto;
    border:1px solid green;
    background: yellow;
    width: 110px;
    text-transform: capitalize;

    The html and php for the template (starts aroud line 24 of cover-image-header.php)

    <div id="item-header-avatar">
    	<a href="<?php bp_displayed_user_link(); ?>">
    	<?php bp_displayed_user_avatar( 'type=full' ); ?>
    	$user = new WP_User( bp_displayed_user_id() );
    	echo '<p>'. $user->roles[0] .'</p>';
    </div><!-- #item-header-avatar -->

    Do it simple ! 😉



    hi @danbp
    your explanations was complete. i understood completely.
    and thank you very much for the help.
    the code worked well.
    actually i changed it a little to fit my requirements .
    i added some other elements to the css

    #item-header-avatar p {
    width: 90px;
    height: 15px;
    position : absolute;
    top : 90px;
    right : 0px;
    text-align: center;
    vertical-align: middle;
    line-height: 15px; 
    margin-top: 3px;
    border:1px solid green;
    background: green;
    color: black;

    again, thank you for help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.
Skip to toolbar