Finally, 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.
Learn how with this tutorial:
Linking a profile picture to the profile 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 > User Directory > Directories), and click on the Profile Display tab.
Under “User 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).
If you are using a pre-built display, you will find the profile page option here:
If you selected the Customize User Profile using templates option, you will find the setting here:
If no page is selected, clicking on the directory images will have no effect.
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.
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:
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. Edit a membership 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.
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.
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!