Custom Member Directory Grid


If you want to change the Member Directory Grid styles, you can override the template via your active theme.

  1. 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
  2. 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";  

$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}}}">
					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 ">
					<?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;">
						<?php } ?>



			<# }); #>
		<# } else { #>

			<div class="um-members-none">
				<p><?php echo $no_users; ?></p>

		<# } #>

		<div class="um-clear"></div>

<style type="text/css">
.um-directory .um-members-wrapper .um-member{
    width: 15% !important;

.um-directory .um-members-wrapper .um-member .cc-profile-photo{
	height: 270px ;


.um-directory.uimob800 .um-members-wrapper .um-member{
    width: 20% !important;
	height: 250px !important;

.um-directory.uimob500 .um-members-wrapper .um-member{
    width: 30% !important;
	height: 200px !important;
	margin: 3px;

.um-directory.uimob500 .um-members-wrapper .um-member .cc-profile-photo{
    height: 150px !important;

.um-directory.uimob340 .um-members-wrapper .um-member{
    width: 30% !important;
	height: 180px !important;
	margin: 3px;

.um-directory.uimob340 .um-members-wrapper .um-member .cc-profile-photo{
    height: 120px !important;


<?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!

Help me reach other people who need the help

4 Comments Custom Member Directory Grid

  1. 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?

    1. 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.

  2. 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.

    1. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *