Shortcodes
Frontend pages and shortcode setup
Create secure employee and manager pages in Divi using the correct shortcode for the edition installed on your website.
Available shortcodes
| Edition | Shortcode | Purpose | Who should access it |
|---|---|---|---|
| Free | | Employee time clock dashboard with clock in/out, one break, live counters, and recent attendance. | Logged-in employees with allowed clock role. |
| Pro | [wpchef_tracker] | Employee time clock with GPS capture, assigned department/location/shift, status, approval status, flag status, and recent attendance. | WPChef Tracker Employees, Managers, HR Admins, and Administrators. |
| Pro | [wpchef_tracker_manager] | Frontend manager dashboard with Overview, Attendance & Payroll, Employees & Managers, and Create User tabs. | Managers, HR Admins, and Administrators. |
| Pro legacy alias | [staffpulse] | Legacy alias for the Pro employee clock. | Use only if upgrading from an older setup. |
| Pro legacy alias | [staffpulse_manager] | Legacy alias for the Pro manager dashboard. | Use only if upgrading from an older setup. |
How to add a shortcode in Divi
- Create or edit a WordPress page.
Example page names: Employee Time Clock, Staff Attendance, Manager Dashboard, or HR Attendance Dashboard. - Open the page with Divi Builder.
Add a regular section, one row, and one full-width Code module or Text module. - Paste the shortcode.
Use the Free shortcode on Free sites or the Pro shortcode on Pro sites. - Restrict the page.
Only logged-in employees should access clock pages. Only managers, HR admins, or administrators should access manager pages. - Publish and test.
Open the page in an employee account and confirm the dashboard loads.
Suggested page structure
Free site
Page title: Employee Attendance Slug: /employee-attendance/ Shortcode:
Pro site
Page title: Employee Time Clock Slug: /employee-time-clock/ Shortcode: [wpchef_tracker] Page title: Manager Attendance Dashboard Slug: /manager-attendance-dashboard/ Shortcode: [wpchef_tracker_manager]