Last Updated On October 29, 2018

Since v1.2, a-staff uses an advanced templating system, a similar one that is used by many popular plugins (like WooCommerce). Theme authors and website developers have now a system that enables them to customize every little part of the a-staff boxes in the a-staff Loop.

For developers only!!!

Please use the following method only if you are familiar with editing the WordPress PHP template files and know how WordPress themes are built up.

How can I edit the a-staff templates?

1. Locate the template files

Location of template files

Location of template files

Find the following folder in your WordPress installation (e.g. via FTP): wp-content/plugins/a-staff/templates

You can find the following files in it:

  • member-box.php: the template for the member boxes (tiles) in the a-staff Loop
  • single-member.php: the template for viewing a single member page (e.g. if you navigate there by clicking on a member’s tile in the loop)

2. Copy these files into your theme

  1. Create a folder inside your theme called “a-staff” (e.g. wp-content/themes/your-theme/a-staff/)
  2. Copy the file(s) you’d like to edit into this directory. (e.g. wp-content/themes/your-theme/a-staff/member-box.php)

And that’s it. From now on, until there is the file with the same name in your theme’s a-staff directory, the plugin will use it instead of the default template located in the plugin’s /templates folder.

3. Edit the template files

Now edit the template files in your theme to make them look like you’d like them to look.

IMPORTANT!!!

Always edit the a-staff template files in your theme and not in the a-staff plugin (as plugin templates will be overwritten with every plugin update).

If you are using child themes then it’s highly recommended to put your custom a-staff templates there and not in your parent theme (as parent themes can also be overwritten during theme updates).

Hierarchy of the templates

When a-staff is loading its template files, it looks for them in the following order:

  1. Child theme / a-staff folder
  2. Parent theme / a-staff folder
  3. Plugins / a-staff / templates folder (default)

So if it finds e.g. the member-box.php template in your child theme’s “a-staff” folder then it will stop searching further and use this version.

If no a-staff template files were found in your themes, then it will use the default version from the plugin itself.


Templates before a-staff v1.2

Prior to version 1.2 a-staff was using a template editor inside its Plugin Settings. It was generally a static HTML template with some pre-defined shorttags. While it was easier to edit for the everyday website administrator, it had some shortcomings:

  • As we gave total control of the template into the hands of the admin, there was the possibility to break the validity of our HTML output straight from WP-Admin
  • The number of custom features of the templates was limited to the number of shorttags provided by the plugin. The new templating system lets developers add any kind of code to the templates, removing all limitations on customization.
  • Because of written in plain HTML, you couldn’t use conditions and add your own variables (e.g. ACF fields) in your team member templates. With the new PHP-based templates this is now possible.

Deprecated

These old templates now have the Deprecated / Legacy status. You can still use them if you enable the “Use Legacy box template” setting in Plugin Settings – however, they will be removed from versions after a-staff v1.5.

How to switch to the new templates?

  1. Follow the instructions at the top of this article to create the new template files.
  2. Make the changes to these files where you’d like to (you might need a developer to do this)
  3. Please have a look at the table below to see what code you can use instead of the shorttags in your templates (please note that the new code is PHP code and can only be used in the new templates – it won’t work in the Legacy editor in your WP-Admin)
Old shorttag (pre-1.2) New template tag (from 1.2)
{MEMBER_NAME} » $member->get_name()
{MEMBER_EXCERPT} » $member->get_excerpt()
{MEMBER_TITLE} » $member->list_titles()
{MEMBER_SOCICONS} » $member->list_social_icons()
{MEMBER_URL} » $member->get_url()
{MEMBER_IMAGE} » $member->get_image_url()
{MEMBER_PHONE} » $member->get_phone()