1. Creating Your First Staff Member

In order to create a member of staff you must first make sure that the plugin ‘Simple Staff List’ is activated. In order to do this go to Plugins > Simple Staff List and click activate.

Once this is done you should see a section labeled ‘Staff Members’ in your smartsite admin sidebar.

Click on this section and then select ‘Add New’, this will take you to the section to create a new member of staff.

2. Adding the staff details

From here you can add the Staff Member’s Name, Photo, Job Title and Biography (lower down the page). Make sure that you create groups (in the sidebar on the right) and add the team member to the correct one. You will need these to be specific when adding the shortcode to the page later on.

When you are done adding all of the Team Member’s information click ‘Publish.’

In order to add another member of staff, simply click ‘Add New’ at the top of the page next to the ‘Edit Staff Member’ title.

3. Adding Your Shortcode

From here you will need to click on the ‘Groups’ section in the Staff Members sidebar.

From here you will see a list of your groups. For the purpose of this example we have chosen to use ‘Leadership.’ Copy the text under ‘Slug’ i.e. ‘leadership.’ This needs to be added to the shortcode.

Next click ‘Usage’ in the sidebar.

4. Adding The Shortcode

From here you need to copy and paste the short code. You have a range of options but for displaying specific groups please use:

Now go to the page that you wish to insert the shortcode onto and copy and paste it into the HTML. As per the image below.

Your staff will now display as per the image below. You can edit the look and style of the staff plugin layout in your css.

In order to display staff like this please use the following code in your css:

 /* Staff Pages */

 img.staff-member-photo {

   max-width: 20%;

   height: auto;

   display: inline-block;

}

.staff-member-info-wrap {

   display: inline-block;

   margin-left: 30px;

}

.staff-member.even {

   margin-bottom: 20px;

}

.staff-member.odd {

   margin-bottom: 40px;

}