If you want to change the Member Directory Grid styles, you can override the template via your active theme.
- Copy the file /ultimate-member/templates/members-grid.php and add it to your theme’s directory in /wp-content/themes/your-active-theme/ultimate-member/members-grid.php
- Once you’ve added the template to the theme, ensure that you’ve selected the Default view type to Grid in the Directory settings:
3. You can now modify the template file that you added to the theme. You can copy the following sample template and paste it to your member-grid.php file:
<?php if ( ! defined( 'ABSPATH' ) ) exit;
$form_id = $args['form_id'];
$modify_directory = apply_filters("um_custom_member_directories", [ ]);
if( ! in_array( $form_id, $modify_directory ) ){
require_once um_path."/templates/members-grid.php";
}else{
$unique_hash = substr( md5( $args['form_id'] ), 10, 5 ); ?>
<script type="text/template" id="tmpl-um-member-grid-<?php echo esc_attr( $unique_hash ) ?>">
<div class="um-members um-members-grid" >
<div class="um-gutter-sizer"></div>
<# if ( data.length > 0 ) { #>
<# _.each( data, function( user, key, list ) { #>
<div id="um-member-{{{user.card_anchor}}}-<?php echo esc_attr( $unique_hash ) ?>" class="um-member um-role-{{{user.role}}} {{{user.account_status}}} <?php if ( $cover_photos ) { echo 'with-cover'; } ?>">
<a href="{{{user.profile_url}}}" title="{{{user.display_name}}}">
<?php
if ( $profile_photo ) { ?>
<div class="cc-profile-photo" style="width:100%;background: url('{{{user.avatar_raw}}}'); background-position: center center; background-size: cover; height: 200px ">
</div>
<?php } ?>
<div class="um-member-card <?php if ( ! $profile_photo ) { echo 'no-photo'; } ?>">
<?php if ( $show_name ) { ?>
<div class="um-member-name" style="padding:10px 0px 0px 0px;">
{{{user.display_name_html}}}
</div>
<?php } ?>
</div>
</a>
</div>
<# }); #>
<# } else { #>
<div class="um-members-none">
<p><?php echo $no_users; ?></p>
</div>
<# } #>
<div class="um-clear"></div>
</div>
</script>
<style type="text/css">
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member{
width: 15% !important;
}
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .cc-profile-photo{
height: 270px ;
}
.um-directory.uimob800 .um-members-wrapper .um-members.um-members-grid .um-member{
width: 20% !important;
height: 250px !important;
}
.um-directory.uimob500 .um-members-wrapper .um-members.um-members-grid .um-member{
width: 30% !important;
height: 200px !important;
font-size:12px;
margin: 3px;
}
.um-directory.uimob500 .um-members-wrapper .um-members.um-members-grid .um-member .cc-profile-photo{
height: 150px !important;
}
.um-directory.uimob340 .um-members-wrapper .um-members.um-members-grid .um-member{
width: 30% !important;
height: 180px !important;
font-size:12px;
margin: 3px;
}
.um-directory.uimob340 .um-members-wrapper .um-members.um-members-grid .um-member .cc-profile-photo{
height: 120px !important;
}
</style>
<?php } ?>If you will notifce in the sample code, there are CSS code. The purpose of it is to fix the responsiveness for the custom grid template.
You will also notice that the Avatars are not showing up in the grid. Add the following code to enable the avatars for the custom code:
add_filter("um_ajax_get_members_data","um_profile_avatar_members_data", 10, 3 );
function um_profile_avatar_members_data( $data_array, $user_id, $directory_data ){
um_fetch_user( $user_id );
$data_array['avatar_raw'] = um_get_user_avatar_data( $user_id )['url'];
return $data_array;
}Using the filter hook um_ajax_get_members_data, you can modify the data you want to send to the front-end for you to bind it. In the 2nd example above, I wanted to display the full size of avatars so i added a new variable avatar_raw. And then in the template of the first sample code above, I’m able to bind the data with {{{user.avatar_raw}}}
That’s all and i hope you learned a new technique on how to customize the Member Directory Grid. If you have questions, just write it down in the comment box. Cheers!
7 Comments
Alexis Gayraud
Hi Champ,
Is there a way to limit the access of non-authenticated users to the directory, and restrict access to the profile of the user?
Champ Camba
You can restrict the Member Directory page. Just edit the Page and then see the UM Content Restriction settings. You can also restrict the Profile page via UM Content Restriction when you edit it.
Oliver
I found this page because of the ultimate member forum. I too have a similar request. I want to display the system assigned ID under each profile photo in the members grid page. This worked with version before ver. 2.1. How can I do this with the new version of ultimate member.
Champ Camba
I’m not sure what you mean by assigning the ID to the profile photo. Do you want to add an HTML ID or Class to the profile photo![]()
element?
Zuril2903
Hi.
I am trying and following this step by step, but nothing it change. I would like for example to put 2 taglines close to the name, separated only from a space.
Let’s say displayname, age, sex
Also i would like yhat the extra tagline, when opened would make the card larger enough to show every information, not to exit like now from the card.
I tried adding some custom css in WordPress theme as for example:
.member-card {
max-width:100% !important;}
Melki Brunoy
Hello Champ Camba,
I asked 2 developers to try but without success unfortunately, no one understands the blockage to this procedure. It’s a shame because it’s really nice as a display, especially if you’re doing a dating site
Rae
Does this still work?