How To Create a Membership Directory Using Ultimate Member & Elementor

In today’s social media-focused audience, having a strong online presence through a membership or directory website is vital. Making a group of like-minded people and creating a community for people who share the same interests is more important now than ever. Whether you want to connect professionals, advertise your knowledge, or monetize your material, the powerful combination of WordPress, the Ultimate Member plugin, and Elementor can make it all happen. In this post, we’ll walk you through the steps of building a dynamic membership website with all of the features of major social media networks.

What is a WordPress Member Website

A WordPress membership site allows you to restrict access to some or all of your site’s content. Consider the scenario where you only want certain users to be able to access your website. There won’t be a public entrance. Users typically have to register in order to access a member website or a particular section of it. Only users who have registered are able to login, read the website’s content, and leave comments.

The advanced member website includes robust features such as setting a user profile photo, sending messages between members, push notifications, and many more.

What Types of WordPress Membership Sites Can You Build?

Here are some examples of Membership or user directories you can create:

1. Alumni Directory – Make an alumni directory for the school that is only accessible to former students, staff, and professors.
2. Church Directory – A directory of all the church’s members..
3. Contractor Listings – Directory of independent or 3rd party contractors.
4. Expert Directory – Directory for legal professionals, journalists, conferences
5. Corporate Directory – Developing a corporate team directory.
6. Sports Directory – Directory of local high school basketball teams.
7. Interest-based Community – Create a directory of Texas Mercedes-Benz owners.

Why Build a Membership Website

An easily searchable WordPress user directory may significantly enhance the user experience. Allowing visitors to identify and connect with the people they are looking for. Membership sites offer an excellent opportunity to monetize your content, expertise, and even your time. By offering well-defined subscription plans at a fixed, recurring price, you can simplify billing processes and provide your customers with convenient access to your products and services on an ongoing basis. With Elementor, you can create a membership site for virtually any niche or purpose, including:

Functionalities a WordPress user directory plugin offers

Good dynamic user directory WordPress plugins offer:

1. User registration features
2. User login features
3. Individual User profile page
4. User directory listings page
5. Advanced user search features
6. Custom fields for user info
7. Let users send message between each other
8. Restrict content based on members role

In this post, we’ll show you how to use Elementor and Ultimate Member together to achieve a better-customized WordPress membership site.

Ultimate Member is the only WordPress membership plugin with more than 200000 active installations. This means that a large number of websites are using it to develop user directories, and the community behind it is very strong. So, if you get stuck, there will always be some support threads, articles, or integrations that can help you out. There are lots of membership plugins that will help you build a community website using WordPress but Ultimate Member tops the chart. According to WordPress veteran & renowned Product Strategist Chris Lema “the developers behind Ultimate Member clearly “get it.”

39 Ultimate Member community websites Examples to help you create your membership Website.

Plugins Required:

1. Ultimate Member
2. Elementor
3. Ultimate Member Widgets for Elementor

Before we begin building the membership website using Ultimate Member, let’s have a look at how a membership website built with Ultimate Member looks like. You can view the demo website by following this link.

Ultimate Member – Directory Page

Ultimate Member – User Profile Page

Step 1 – Activate Ultimate Member

Ultimate Member is one of the best & complete user profile & Membership plugins for WordPress. The free version of Ultimate Member is enough to compete with most of the premium plugins available in this registration and membership plugin category.

First you need to install the Ultimate Member WordPress plugin.

1. Log into your site and go to WordPress Dashboard
2. Go to Plugins > Add new
3. Search for “ultimate member”
4. Please install and activate it

Step 2: Setup Ultimate Member pages

When you initially install the Ultimate Member WordPress plugin, you will get a notification that says “Ultimate Member needs to create several pages (User Profiles, Account, Registration, Login, Password Reset, Logout, Member Directory) to function correctly. When you click the “Create pages” button, the default Ultimate Member pages will be generated for you.

When you activate Ultimate Member, it will install 7 default pages ( Login, Register, User, Account, Member, Logout  & Password Reset pages). Follow this tutorial if you don’t see the page creation modal.

Ultimate Member Shortcodes

Page	What It Does	Shortcode
Account Page	Allows users to change the setting	[ultimatemember_account]
Password Reset Page	Allows users to reset password	[[ultimatemember_password]
Logout Page	Allows logged-in users to log out of the website.	N/A
Register Page	Allows visitors to register	Shortcode found on Ultimate Member > Forms
Login Page	Allows members to log	Shortcode found on Ultimate Member > Forms
User Page	Outputs user profile with avatar, profile cover, and other custom fields.	Shortcode found on Ultimate Member > Forms
Members Page	Displays list of users	Shortcode found on Ultimate Member > Member Directory.

When configuring pages, be sure that the default Ultimate Member pages are not cached. If these pages are cached, they may not function properly. Caching can be enabled across your whole website, with the exception of the Ultimate Member pages (Member Directories, Login, Register, Password Reset, Account, and Profile Page). Simply disable caching for the URL of the Ultimate Member site.

Step 3: Create Registration Page

Now you have to select a default role for newly registered users. For example when someone registers to your directory or membership site, what access do you want to give to them.

Set Default Registration Role

A user role can be automatically assigned when they register on your website. To assign a default user role, follow the steps below:

1. Go to Ultimate Member > Settings
2. Then go to Appearance tab
3. Click on Registration Form tab
4. Set Role in Registration Default Role dropdown
5. Click on Save Changes

Usually it is set to Default. Default user role is usually set to (member or subscriber). You can see the default role from WP-Admin > General Settings > New User Default Role.

Creating a Registration Form

When you activate Ultimate Member, a Registration form labeled “Default Registration” is created. However, if you want to create a new registration form with custom registration fields, follow the instructions below.

1. Go to WordPress Dashboard > Ultimate Member > Forms
2. Click on Add New
3. Add a Form Title
4. Select Form Type (select Registration Form)
5. To add new fields to Form Builder, click +.
6. Click on Create
7. Copy the Shortcode from shortcode metabox. (e.g. [ultimatemember form_id=”1041″] )

Add Fields to Registration Form

By default Ultimate Member adds either the username field or the username/email field and the password field so the user is able to register successfully.

1. Go to WordPress Dashboard > Ultimate Member> Forms
2. Click on Edit below Default Registration
3. From Form Builder click on + to add new fields
4. From Form Builder use Predefined Fields or create New Field

Step 4: Create User Page

You can add a fully configurable and elegant user-profile page as well as functionality as needed.

Adding Fields to User Profile Page

With Ultimate Member, you can add 23 different types of fields to your form. Text Box, Telephone Box, Number, Dropdown, Textarea, Multi-Select, Radio, Checkbox, URL, Image Upload, File Upload, and many more are examples. Users can fill out these fields, which you can display on your user profile page.

1. Go to WordPress Dashboard > Ultimate Member> Forms
2. Click on Edit below Default Profile
3. From Form Builder click on + to add new fields
4. From Form Builder use Predefined Fields or create New Field

Setting Profile Menu

The About, Posts, and Comments menu tabs are displayed by default on User pages. The menu can be displayed conditionally based on user roles. Setting up a user profile menu is simple; simply follow the steps below.

1. Go to WordPress Dashboard > Ultimate Member> Settings
2. Click on Appearance
3. Click on Profile Menu
4. Set default menu from Profile menu default tab dropdown.
5. Click on Save Changes.

Overriding Template

If you want to change the HTML markup of Ultimate Member user profile page template, you can do so by overriding the default template markup.

1. Create a Child theme
2. Create a folder titled ultimate-member
3. Inside ultimate-member create folder titled templates
4. Copy profile.php from p-content/plugins/ultimate-member/templates
5. On your Ultimate Member > Appearance > Settings > Profile Default Template, a new user page template will be available.

Alternatively you can set individual profile page template from Ultimate Member > Forms. “Apply custom settings to this form” should be set to Yes. From the Template dropdown menu, choose the newly created template.

Cover Photo Image Size

By default Ultimate Member cover image size width is set to either 300px and 600px. If you want to increase the Cover image width follow below steps

1. Go to WordPress Dashboard > Ultimate Member> Settings
2. Click on Uploads
3. Click on Add New Size from Cover Photo Thumbnail Sizes (px)
4. Set the Cover Image width. E.g. 900
5. Click on Save Changes

Blurry Profile & Cover Image

Invalid images and unclear photographs are the most frequent problems users experience while uploading images. When a user uploads a profile picture or cover image, they can appear to be extremely blurry.

To fix this, make sure Image Quality is close to 90 from Ultimate member > Settings > Uploads > Image Quality

Step 5: Create Login Page

1. Go to WordPress Dashboard > Ultimate Member> Forms
2. Click on Edit below Default Login
3. From Form Builder click on + to add new fields
4. Use Predefined Fields or create New Field

Step 6: Create Member Directory

Make sure you have the “Enable Members Directory” checked from Ultimate Member > Settings > General > Users, otherwise Member Directory will not be visible.

1. Go to WordPress Dashboard > Ultimate Member> Member Directories
2. Click on Edit below Members
3. From General Options, select Roles you want to display from User Roles to Display
4. Set the number of users you want to display at Number of profiles per page
5. Click on Update

Step 7: Role Settings

In Ultimate Member you can create a User Role and give each user role certain access or permission. For example, You don’t want certain users to restrict the user search feature.
WordPress uses “user roles” to manage such things as users access, privacy, privileges, etc. Ultimate Member extends this functionality to limit profile access. Ultimate Member allows you to create multiple member roles and customize the capabilities and permissions that role has, which provides great flexibility when it comes to creating your site.

Please read the article User Roles Settings first to get to know about role settings.

Adding New User Role

1. Go to Ultimate Member > User Roles
2. Click on Add New
3. Set the Role Title
4. Set the Role Priority (higher number means higher role priority)
5. Using Core plugins you add below role settings and permissions
6. Click on Create Role

Permissions	Options
Administrative Permissions	Can access wp-admin? Force hiding adminbar in frontend? Can edit other member accounts? Can delete other member accounts?
General Permissions	Can edit their profile? Can delete their account?
Profile Access	Can view other member profiles? Can make their profile private? Can view/access private profiles? Avoid indexing profile by search engines
Homepage Options	Can view default homepage?
Registration Options	Registration Status Action to be taken after registration
Login Options	Action to be taken after login
Logout Options	Action to be taken after logout
Delete Options	Action to be taken after account is deleted

Step 8: Access & Restrict Content

Add role-specific content

Using Ultimate Member you can restrict content and display it to certain user role. Or display the post, page or certain area to logged in users only. for example, restrict file download link.

There are 3 ways you can restrict your website and website content

1. Global Restriction
2. Restrict certain posts, pages, products or any custom post types.
3. Restrict certain elements using shortcode.

Global Restriction

To restrict the whole website go to Ultimate Member > Settings > Access and set “Global Site Access” to “Site accessible to Logged In Users”.

Restrict Individual Post or Page

Before Restricting access to any posts, pages, products or any custom post types, make sure “Enable the “Content Restriction” settings for post types” is checked from Ultimate Member > Settings > Access.

After that follow below steps to restrict content individually.

1. Go to Dashboard > Pages
2. Select the page you want to restrict
3. Scroll down to Ultimate member – Content Restriction
4. Check “Restrict access to this post”
5. Set “Logged In Users” in Who can access this post?
6. Select Role from “Select which roles can access this post“
7. Select the redirect URL in “What happens when users without access try to view the post?”
8. Click on Update

Restrict Content Using Shortcode

Ultimate Member allows you to show or hide content to the specific user roles. You can do this by wrapping the content with the following shortcodes:

[um_show_content roles="member"] <!-- insert content here --> [/um_show_content]

Step 9: Install Elementor

Now you need to install the Elementor page builder WordPress plugin to add beautifully designed elements to your website.

1. Log into your site and go to WordPress Dashboard
2. Go to Plugins >> Add new
3. Search for “ultimate member”
4. Please install and activate it

Step 9: Install Ultimate Member Widgets for Elementor (Optional)

Ultimate Member Widgets for Elementor help you add dynamic, customizable user listings using Elementor widgets. 

Now you need to install a free Elementor module for Ultimate Member to add beautifully designed user elements to your website.

1. Log into your site and go to WordPress Dashboard
2. Go to Plugins > Add new
3. Search for “Ultimate Member Widgets for Elementor”
4. Please install and activate it

We’ll show you how to start using Ultimate Member Widgets for Elementor and Elementor together on your site. But first, let’s take a look at an example of what you can accomplish.

Step 10: Setup Homepage

Ultimate Member Widgets for Elementor help you add dynamic, customizable user listings using Elementor widgets.

We’ll show you how to start using Ultimate Member Widgets for Elementor and Elementor together on your site. But first, let’s take a look at an example of what you can accomplish.

1. Open up any page or post, and make sure you’re using the Elementor editor. If you see the traditional WordPress interface, hit the Edit with Elementor button to switch over.
2. On the left, there’s a list of ‘widgets’.
3. If you just want to display a list of Ultimate Member users then drag & drop the “User Listings” widget.
4. customize the looks using Elementor.
5. Once done customizing and setting the user query, color & font to suit your needs, save the settings, and you’re good to go!

Performance Settings

Turn on the “Enable custom table for usermeta” setting from WordPress Dashboard > Ultimate Member > Settings > Misc. It will improve the speed of searching in the Member Directory. Read Creating Metatable for Member Directories for more details.

Hide Member from Google and Other Search Engine

If you want to create a private membership website and you don’t want search engines to access your users data then set the “Avoid indexing profile by search engines” to Yes from Ultimate Member > Settings > General > Users.

It will hide the profile page from search engine crawlers or robots. You can set this individually, role by role basis from Ultimate Member > User Roles.

Extension To Add More Features

• Friends – Let users send friend requests.
• Follow – Let users follow each other.
• Private Messages – Let users send messages between each other.
• Real-time Notifications – Add notification system to your website.
• Social Login – Let users register on your website using popular social media websites like facebook, twitter, linkedin.
• Social Activity – Add a facebook like wall feature to Ultimate Member.
• Groups – Let users create a group and moderate that group based on interest.
• User Bookmarks – Add wishlists or bookmarks to user ability.
• Verified Users – Add verification to users profile.
• User Reviews – Add the ability to review users.
• MailChimp – Sync user data with MailChimp newsletter.
• WooCommerce – Ability to change user role permissions based on the purchased products.
• User Locations – Add Google Maps to your member directories.

Conclusion

With the right plugins and a solid plan of action, you can turn your WordPress site into a flourishing membership or directory platform. Ultimate Member and Elementor’s seamless integration allows you to create an interesting and user-friendly experience for your members.