Displaying Profile Fields on Multisite Directory

I'm running a multisite/buddypress/membership network for professionals. I want to display profile fields for each user on their associated site's row. I'm using the Extra theme from Elegant Themes, FYI.

  • Adam Czajczyk

    Hello bennyp,

    I hope you're well today and thank you for your question!

    I admit I'm not quite sure what would you like to achieve. Could you please elaborate on this and also some rough screenshots/sketches would be extremely helpful here.

    I'd also like to take a closer look at your setup if you don't mind as I do not have access to theme that you're using on the site. You could grant me an access via our WPMU DEV Dashboard plugin as explained here:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Adam

  • uxwebtech

    Here's the working code. mu-plugin (code's a little smelly):

    <?php
    
    add_action( 'bp_directory_blogs_profile', 'display_user_languages' );
    
    function display_user_languages() {
    
        $args = array(
            'user_id' => get_user_id_from_string( get_blog_option(bp_get_blog_id(), 'admin_email') ),
            'field'   => 'Languages', // Field name or ID.
            );
    
        $languages = bp_get_profile_field_data( $args );
    
        if ($languages) {
          print '<span class="guide-languages"><i class="fa fa-globe" aria-hidden="true" title="Languages"><span class="sr-only">Language</span></i> <ul>';
          foreach($languages as $val) {
            print "<li class=\"language\" title=\"$val\">" . getLocaleCodeForDisplayLanguage($val) . "</li>";
          }
          print '</ul></span>';
        }
    
    }
    
    add_action( 'bp_directory_blogs_profile', 'display_user_phone' );
    
    function display_user_phone() {
    
        $args = array(
            'user_id' => get_user_id_from_string( get_blog_option(bp_get_blog_id(), 'admin_email') ),
            'field'   => 'Phone', // Field name or ID.
            );
    
        $phone_number = bp_get_profile_field_data( $args );
        echo '<span class="phone">';
        if ($phone_number) {
            echo '<i class="fa fa-phone"><span class="sr-only">Phone Number</span></i> ' . $phone_number;
        }
        echo '</span>';
    
    }
    
    add_action( 'bp_directory_blogs_profile', 'display_user_car' );
    
    function display_user_car() {
    
        $args = array(
            'user_id' => get_user_id_from_string( get_blog_option(bp_get_blog_id(), 'admin_email') ),
            'field'   => 'Car', // Field name or ID.
            );
    
        $car = bp_get_profile_field_data( $args );
        echo '<span class="car">';
        if ($car) {
            echo '<i class="fa fa-car" title="Car Available"></i>';
        } else {
          echo '<span class="sr-only">No Car Available</span>';
        }
        echo '</span>';
    }

    and the loop from the buddypress blog-list template:

    <?php while ( bp_blogs() ) : bp_the_blog(); ?>
    
    		<li>
    			<div class="item-avatar">
    				<a href="<?php bp_blog_permalink(); ?>"><?php bp_blog_avatar( 'type=thumb' ); ?></a>
    			</div>
    			<div class="item">
    
    				<div class="item-title"><a href="<?php bp_blog_permalink(); ?>"><?php bp_blog_name(); ?></a></div>
    				<div class="item-meta"><span class="activity"><?php bp_blog_last_active(); ?><br/><?php bp_blog_latest_post(); ?></span></div>
    				<!-- <div class="meta"></div> -->
    
    				<?php do_action( 'bp_directory_blogs_item' ); ?>
    			</div>
    
    			<div class="guide-profile"><?php do_action( 'bp_directory_blogs_profile' ); ?></div>
    
    			<div class="action">
    
    				<?php do_action( 'bp_directory_blogs_actions' ); ?>
    
    			</div>
    
    			<div class="clear"></div>
    		</li>
    
    	<?php endwhile; ?>

    with a little flexbox css to make it look like a real website:

    #blogs-list > li {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .item-avatar {
      flex-basis: 40px;
    }
    
    .item {
      flex-basis: calc(45% - 40px);
    }
    
    .activity .meta {
      font-size: 80%;
    }
    
    .guide-profile {
      flex-basis: 40%;
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: flex-start;
    }
    
    .guide-languages {
      padding: 0;
      display: flex;
      flex-flow: row wrap;
      flex-basis: 50%;
      align-items: center;
      justify-content: flex-start;
    
    }
    
    .guide-languages ul {
      padding: 0;
      display: flex;
      flex-flow: row wrap;
      flex-basis: 90%;
      margin-top: -10px;
    }
    
    #buddypress .guide-languages li.language {
      border-bottom: none;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border-radius: 10px;
      text-transform: uppercase;
      font-family: "Lucida Console", Monaco, monospace;
      font-weight: bold;
      font-size: 11px;
      padding: 0 5px;
    
      margin-left: 10px;
      margin-top: 10px;
    }
    
    .phone {
      flex-basis: 40%;
    }
    
    .car {
      flex-basis: 10%;
    }
    
    #buddypress ul.item-list li div.action {
      flex-basis: 10%;
      text-align: left;
      position: relative;
      top: auto;
      right: auto;
    }
    
    div.blog-button {
      padding: 0;
      margin: 0;
      background: none;
      border: none;
    }
    
    a.blog-button {
      outline: none;
      display: inline-block;
      background: rgba(0, 0, 0, 0.1) !important;
      padding: 10px 12px;
      border: 0;
      border-style: solid;
      border-radius: 3px;
      box-shadow: none;
      color: rgba(0, 0, 0, 0.6)  !important;
      font-family: inherit;
      font-size: inherit;
      font-weight: 600;
      line-height: normal;
      text-shadow: none;
      text-transform: uppercase;
      cursor: pointer;
      transition: .3s ease;
      border-color: #ffffff !important;
    }
    a.blog-button:hover {
      background: rgba(0, 0, 0, 0.2) !important;
      color: rgba(0, 0, 0, 0.75) !important;
      text-shadow: none;
    }
    a.blog-button:visited {
      color: rgba(0, 0, 0, 0.6) !important;
    }
    /* Read More Button */
    a.blog-button {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      padding: 10px 12px 10px 12px;
      color: rgba(0, 0, 0, 0.6) !important;
      float: left;
    }
    
    @media (max-width: 480px) {
      #blogs-list > li {
        flex-direction: column;
        align-items: stretch;
      }
      .item,
      .guide-profile,
      .action {
        flex-basis: 100%;
      }
    
    }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.