1. Home
  2. AccessAlly
  3. User Directory
  4. Make Your Member Directory Live

Make Your Member Directory Live

It’s time to put all the pieces together and add your member directory. Here you can customize the appearance of search results, add your filters from Step 2, and create a beautiful member directory page.

When viewing a directory, you may wish to allow users to click on a profile image in order to quickly access that person’s profile page.

To enable this option, go to the directory in the backend settings (AccessAlly > Directories > Directories), select the Directory, and click on the Member Display tab.

Under “Member Profile Page”, select the published WordPress page that you’ve set up as the designated directory profile page for each user (click here to access the tutorial for setting up the user profile pages).

The setting may look different, depending on which template you have selected.

If you are using a pre-built display, you will find the profile page option here:Link to Member Profile Page

If you selected the Customize Member Profile using templates option, you will find the setting here:Setting the Member Profile Page

If no page is selected, clicking on the directory image will have no effect.

The user profile link will time out after ~24 hours. This is a design choice, since a permanent link would mean that a user’s profile would still be accessible even after it being removed from the user directory.

However, it is possible to create permanent user profile links. Here is how to achieve that:

In the Member Directory, add the User Profile link with the following shortcode (via custom code element)
[accessally_user_link link="https://link.to/user/profile/" method="nice"]

On the Member Profile page, add the profile with the following shortcode:
[accessally_user_profile profile_id="1" request="nice"]

The key argument is “nice”, which creates permanent links. It is also important to use “nice” when adding the user profile, or it won’t interpret the argument accordingly.

Customizing the Member Directory Template

AccessAlly comes with 3 different editing options to help you design your member directory. You can choose from super simple member directory template designs, take one of those templates and edit it further with the drag and drop fields, or go full HTML and get your geek on.

Member Display Templates Options

At the end of your customization process, you might end up with something like this where you can blend progress tracking information and badges into your directories:

Screenshot of example final member directory template

1. Use a default template

The easiest option is to choose one of the “out of the box” templates. This will help you publish your directory immediately, no muss, and no fuss.

If you want to make changes, then the next option is for you.

2. Customize a member profile template

Once you’ve picked the general type of template you’d like to edit switch to the second option from the drop-down. You’ll be able to edit the basic things like the size of each member profile, and the size and location of the profile image.

After that you’ll be able to add any field you want to display in the directory, and drag and drop these fields to re-order them. You can take advantage of the built-in LMS reporting to create a reporting dashboard through ProgressAlly here, too.

Profile Description Options

To give people the ability to display a clickable email address, in your profile settings choose the “Custom Attribute” and name it something like “Email”. Make sure that the “Make this a clickable link” option is selected.

Then add the same Custom Attribute here with the name same (“Email” for example). Then if an email address is entered by the member, there will be a “mailto” prefix added in the directory, which will make the link open an email window to send a message.

Once you’ve added some more built-in fields, you should preview your directory to see what it looks like.

If it’s looking good, but you’d like the design and style to match your website more then you’ll want to dive into the HTML version and create some additional CSS code. Keep reading.

3. Use HTML for full control

The most advanced method is to add all of the fields you want first, and then switch to HTML view. This will convert your fields into editable HTML. Please note that when you switch back to editing templates you may lose your HTML, so be careful when switching between options.

Using Raw HTML for Member Display

To add spacing, borders, and other design elements you’ll need to add some CSS code to your theme files. This is an advanced styling method and might require a developer if you’re not familiar with CSS coding.

Finally, Add the Directory to a Page on WordPress

Once you’re satisfied with all of the settings for your directory, it’s time to insert the directory on a WordPress page using the shortcode or block adder.

If you have more than one member directory, you’ll be able to specify which directory you want to insert into your page.

Which tags you add to your page will determine who has access to this page, and that’s how you can make the most of your directory – whether it’s a public-facing directory or only for certain course participants.

Because you’ve set up your directory on your AccessAlly site, you need to insert the shortcode on the same WordPress website. However, if you want to link to a public directory on your AccessAlly site from another website, you can easily do that with a link!

Updated on October 15, 2021

Was this article helpful?

Related Articles

NO QUESTION GOES UNANSWERED

If you have any questions, we're just an email away.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.

Opt-In-Laptop.png

AccessAlly is the #1 WordPress Course and Membership Solution for Industry Leaders

WATCH THE DEMO

You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.