Code

Source: https://pastebin.com/raw/zpg7gwNr

This snippet should be added to wp-content/themes/kleo-child/functions.php

Note : You will have to adapt this function for your needs by changing the name of the fields Location and Specialization from the example shown. Field names are case sensitive and must match exactly.

Examples:

$location = bp_get_member_profile_data('field=Location'); $specialization = bp_get_member_profile_data('field=Specialization'); field=Location represents name of the field that we need to show in the member directory field=Specialization represents name of another field that we need to show in the member directory.

CSS

Minimal CSS required

div.mdetcenter {text-align:center;}

This snippet should be added to wp-content/themes/kleo-child/style.css

Full CSS used in demo

div.mdetcenter {text-align:center;}
#buddypress #members-list li div.item-avatar {width: 100px;display: block;height: 100px;text-align: center !important;margin: 0 auto !important;float: none;}
#members-list .item-meta {text-align: center;}
#buddypress ul.item-list li div.item-title {margin-left: 0;margin-right: 0;}
#buddypress #members-list .item-title {margin-left: 0;margin-right: 0;text-align: center;}
#buddypress #members-list .item-meta {margin-left: 0;margin-right: 0;text-align: center;}
ul#members-list li.kleo-masonry-item .member-inner-list{background-color :#333333 !important;}
#buddypress #friend-list div.item, #buddypress #members-list div.item, #buddypress #member-list div.item {color:#FFF;}
#buddypress #members-list .item-title a {color : #FFFFFF !important;font-weight: bold;}

This snippet should be added to wp-content/themes/kleo-child/style.css