User Tags Setup

Overview

User tags allows users to associate tags with their profile and allows users to see all users with a specific tag e.g all users who have the skill "HTML". This document explains how to use setup user tags.

User tags

When activated the plugin will add a user tags link to the Ultimate Member sub menu. Clicking this link will take you to the user tags page which is where you can create user tags.

Creating a parent tag

All tags that an end user can select must be grouped together under a parent tag (users can not select the parent tag). Before you can start creating user tags you need to create a parent tag. To create a parent tag e.g "Skills" do the following:

  1. Enter Name e.g "Skills"
  2. Enter Slug e.g "skills"
  3. Parent - leave as "None"
  4. Description - Leave blank
  5. Click the "Add new user tag" button

Creating a user selectable tag

All tags that an end user can select must be grouped together under a parent tag e.g "Skills". To create a user selectable tag do the following:

  1. Enter Name e.g "CSS"
  2. Enter Slug e.g "css"
  3. Parent - Select the parent tag you want the user selectable tag to belong to e.g "Skills"
  4. Description - This is an optional field and if a description is enter this description will show on the front-end of your site e.g "A cascading style sheet (CSS) is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict."
  5. Click the "Add new user tag" button

Once you have created all the tags you want user to select it is time to add the tags to the front-end of your website.

Allowing users to select tags

To allow users to associate tags with their account you need to add a user tag field to either the registration form or the profile form. In this example we will add a user tag field to the user profile form:

  1. Go to Ultimate Member > Forms and edit the profile form.
  2. Click the + icon in the form builder to open up the field selector modal.
  3. Click the user tag field type from modal
  4. Fill in the details for the field e.g Title, Label, Meta Key etc
  5. Enter a number in the "Maximum number of selections" field if you want to limit the number of tags a user can select from the tag group.
  6. Select the parent tag from the "Select a user tags source" (this is the parent tag)
  7. Add this field to profile form and update profile form.

What the end-user sees

When the user enters the edit mode of their profile the user tag field will look like this:

To select a tag the user can click into the field which will bring up a list of the tags:

The user can also start typing characters to search for a specific tag:

Once a user has found a tag they want to add to their profile they can click on the tag and they will show on the field (in edit-mode) as follows:

Once a user saves/updates their profile the tags will appear on the front-end of the site:

Displaying user tags in profile header

The extension allows you to display one group of tags (one parent tag group) in the profile header area. To show user tags in profile header you need to turn this option on by editing the user role as this option is on a per user role basis. 

  1. Go to User Roles page and edit the user role e.g Member
  2. Scroll down until you find the "User Tags" section
  3. Click the button so that it goes to "Yes" to turn on user tags in profile header
  4. Select the parent tag group e.g "Skills"
  5. Update the user role

Once you have done this, the tags for that tag group will show in profile header:

User Tags Settings

On the Ultimate Member Settings > Extensions > Users tag tab is an option to limit the number of tags that are shown initially in the profile header, with the remaining tags only shown when show more link is clicked. The default number for this option is "5".

Clicking on a tag

When a user clicks on a user tag, they will be redirected to the default member directory of the directory page where it will show all users who have selected that tag. The tag will show above the profile cards. 

The URL for the directory when a tag has been clicked looks like this (using our skills example):

http://www.domain.com/members/?skills=html

If you want to create a custom URL link to a specific tag in directory the URL should be (replace parent tag slug and slug with the actual slugs):

http://www.domain.com/members/?parenttagslug=tagslug

To view all members in the directory all the user needs to do is click the x icon to remove the tag filter.