The template system

The Customer Area plugin allows you to fully customize the way information gets displayed. You can change that at different levels: from the general layout of all pages, to the way each item in a list gets displayed.

Introduction

To help you find the template you want to modify, each add-on (both commercial and core add-ons) implements his templates in his own templates sub-folder. For example:

  • If you want to change the way the customer files are displayed, you would look into the /customer-area/src/php/core-addons/customer-private-files folder;
  • If you want to change the way the customer account is displayed, you would look into the /customer-area/src/php/core-addons/customer-account folder;
  • If you want to change the way the create new file page is displayed, you would look into the /customer-area-collaboration/src/php/customer-new-private-page folder.

If you have a look at the plugin code, you will notice that all customer pages are each located in their own add-on folder and that folder’s name always begins with customer-.

Developers will enjoy a new setting that will output debug information about which templates are used within a page. When enabling that, some HTML comments will be output within the page source code to tell you which template is used and in which folder it has been found. This setting is available under Settings > WP Customer Area > Frontend and Debug templates.

Overriding the templates

To avoid loosing your changes when you update the plugin, you can override those templates by copying them either in /wp-content/ or directly in your theme under /wp-content/themes/THEME_NAME:

  • Create a folder named /customer-area/
  • Create a sub-folder named /templates
  • Locate the template file you want to change (hint: look in the plugin folders, they are all named .template.php)
  • Make your changes, do not forget to save the file
  • You should be able to see the changes immediately online

To see which templates have been overriden, you can visit the Customer Area > Status > Templates page. You will get a lot of information about:

  • which templates are overriden and which ones are original
  • if their version number matches the original template version number (useful to detect if some overriden templates need to be updated after you have updated the plugin)

Tip: if you are using a theme that could be upgraded in the future, we recommend to put your customer area templates in the WordPress content directory /wp-content/customer-area/templates

General structure

All the pages defined in the Customer Area (except the detail pages for single private content) are following the same layout. The template you will need to copy is named customer-page.template.php and can be found in /customer-area/src/php/core-classes/templates/

Single content pages work a bit differently. Those pages are by default using the theme template named after their type. In WP Customer Area, we currently have 3 types of private content and each of these types is shown by WordPress using the following theme templates:

  • single-cuar_private_file.php for a private file
  • single-cuar_private_page.php for a private page
  • single-cuar_conversation.php for a conversation
  • single-cuar_tasklist.php page for a list of tasks
  • single-cuar_project.php page for a project

If your theme does not implement those templates, WordPress will take another template by default single.php or index.php. Simply copy page.php as many times as necessary and rename the files according to your needs: single-cuar_private_file.php, single-cuar_private_page.php, single-cuar_conversation.php, etc.

Individual page parts

If you want to make changes to a particular customer page, you can also override a part of it. Each page may contain 4 areas: a header, a footer, a sidebar and a content area. Of course, not all pages output content in those areas. For example, by default, the customer dashboard does not show a sidebar.

By convention, each page part (header, footer, content and sidebar) corresponds to a template file named after the page slug:

  • myslug-header.template.php for the header
  • myslug content.template.php for content
  • myslug-sidebar.template.php to sidebar (if needed)
  • myslug-footer.template.php for footer

You can find the slug of each page in WP Customer Area > Status > Pages.

Content listing pages

Pages listing content is loaded to display private content. These are templates that you can reuse in your theme:

  • myslug-content-item.template.php represents a content item in the list on the main page of content – for example, in the My Files page
  • myslug-content-item-dashboard.template.php represents a content item in the list of the corresponding section of the dashboard – for example, recent files
  • myslug-content-item-empty.template.php is displayed in the absence of content
  • myslug-content-item-empty-category_archive.template.php is displayed in the absence of content in a category page
  • myslug-content-item-empty-date_archive.template.php is displayed in the absence of content in a page archive by date

You can find the slug of each page in WP Customer Area > Status > Pages.

Single content pages

WP Customer Area will show the details of a private content just after its description (author, owner, date of publication, the download link for a private file, etc.). Again, you can make your changes with myslug-single-post-footer.template.php model. It will be used to display this information just below the details of the content.

Add-ons

The add-ons also work with that very same template system. Because there are too may of them, it would be useless to list them all here. You should use the developer tools which will allow you to see on each page, directly in the HTML source code, which templates are in use.