Shortcodes

Task Manager Pro provides powerful shortcodes that allow you to embed functionality anywhere on your WordPress site. These shortcodes make it easy to create client portals, team dashboards, and project management interfaces.

🎯 Overview

Shortcodes are special WordPress tags that allow you to embed Task Manager Pro functionality directly into pages, posts, and widgets. This makes it easy to create custom project management interfaces without coding.

💡 Benefits: Easy integration, flexible placement, customizable appearance, responsive design, and built-in security features.

✨ January 2025 Update - Public Visibility: Share projects and tasks publicly with custom URLs and shortcodes! Create client portals, public project showcases, and team dashboards that can be embedded anywhere on your website without requiring user authentication. Public tasks can be accessed via shareable URLs (e.g., `/task/demo-task`).

📋 Available Shortcodes

Basic Shortcodes

Task List `[tmp task]`

Display a list of tasks assigned to the current user.

Basic Usage

[tmp task="5"] [tmp task="10" show_status="true"] [tmp task="15" show_priority="true" show_due_date="true"]

Parameters:

task (number): Number of tasks to display (1-50, default: 5)
show_status (boolean): Show task status (default: false)
show_priority (boolean): Show task priority (default: false)
show_due_date (boolean): Show due dates (default: false)

Project List `[tmp project]`

Display a list of projects the current user has access to.

Basic Usage

[tmp project="3"] [tmp project="5" show_progress="true"] [tmp project="8" show_team="true" show_deadline="true"]

Parameters:

project (number): Number of projects to display (1-50, default: 5)
show_progress (boolean): Show project progress (default: false)
show_team (boolean): Show team members (default: false)
show_deadline (boolean): Show project deadlines (default: false)

Interactive Shortcodes

Recent Activity Feed `[tmp activity-feed]`

Display a real-time feed of recent user activities.

Basic Usage

[tmp activity-feed="10"] [tmp activity-feed="15" show_avatars="true"] [tmp activity-feed="20" filter_by="team" show_avatars="true"]

Features:

✅ Real-time activity updates
✅ User avatars and activity icons
✅ Filterable by user or team
✅ Responsive design
✅ Auto-refresh every 60 seconds

✨ New in v3.7.0: This shortcode provides real-time updates and enhanced user experience.

Upcoming Deadlines `[tmp upcoming-deadlines]`

Show tasks with approaching or overdue deadlines.

Basic Usage

[tmp upcoming-deadlines="7"] [tmp upcoming-deadlines="14" show_overdue="true"] [tmp upcoming-deadlines="30" group_by="project" show_overdue="true"]

Features:

✅ Deadline highlighting and overdue warnings
✅ Project grouping
✅ Status badges with colors
✅ Clickable task links
✅ Auto-refresh every 5 minutes

Quick Actions Panel `[tmp quick-actions]`

Provide quick access to common task management actions.

Basic Usage

[tmp quick-actions] [tmp quick-actions show_create="true" show_timer="true"] [tmp quick-actions show_reports="false" show_create="true"]

Features:

✅ One-click task creation
✅ Timer start/stop functionality
✅ Direct links to boards and reports
✅ Interactive hover effects
✅ Responsive grid layout

Task Creation Form `[tmp create-task]`

Embeddable form for creating new tasks.

Basic Usage

[tmp create-task] [tmp create-task project_id="123"] [tmp create-task assign_to="current_user" project_id="456"]

Features:

✅ Complete task creation form
✅ Project and priority dropdowns
✅ Due date picker
✅ Estimated hours input
✅ AJAX form submission
✅ Loading states and validation

Team Directory `[tmp team-directory]`

Display team members with their statistics and contact info.

Basic Usage

[tmp team-directory] [tmp team-directory show_roles="true" show_stats="true"] [tmp team-directory avatar_size="large" show_stats="true"]

Features:

✅ Team member cards with avatars
✅ Project and task statistics
✅ User roles display
✅ Email contact buttons
✅ Responsive grid layout

Notification Center `[tmp notifications]`

Real-time notification display and management.

Basic Usage

[tmp notifications] [tmp notifications type="all" mark_read="true"] [tmp notifications real_time="true" type="task_assigned"]

Features:

✅ Real-time notification updates
✅ Unread count badge with animation
✅ Mark individual/all as read
✅ Notification type filtering
✅ Auto-refresh every 30 seconds

Public Visibility Shortcodes

Board View `[tmp board-view]`

Display a Kanban-style board view for a project (public or private).

Basic Usage

[tmp board-view="123"] [tmp board-view project_id="123"] [tmp board-view="123" show_assignees="true" show_priority="true"]

Features:

✅ Drag-and-drop task cards
✅ Custom column configuration
✅ Real-time updates
✅ Public or private visibility
✅ Responsive design

Task List `[tmp task-list]`

Display a list of tasks for a specific project.

Basic Usage

[tmp task-list project_id="123"] [tmp task-list project_id="123" limit="20"] [tmp task-list project_id="123" show_filters="true"]

Features:

✅ Filterable by status and priority
✅ Search functionality
✅ Pagination support
✅ Public or private visibility

Project Overview `[tmp project-overview]`

Display project statistics and recent tasks.

Basic Usage

[tmp project-overview="123"] [tmp project-overview project_id="123"] [tmp project-overview="123" show_stats="true" show_recent_tasks="10"]

Features:

✅ Project statistics
✅ Recent tasks display
✅ Progress indicators
✅ Public or private visibility

🌐 Public Visibility & URLs

Public Task URLs

Tasks and projects marked as "public" can be accessed via shareable URLs without requiring user authentication.

✨ January 2025 Update: Public visibility system now supports custom slugs for SEO-friendly URLs and client portals.

Public URL Format

https://yoursite.com/task/{public_slug}/
https://yoursite.com/project/{public_slug}/

Example URLs

Task: https://yoursite.com/task/demo-task
Project: https://yoursite.com/project/demo-project
Custom Slugs: https://yoursite.com/task/website-redesign-task-1

How to Create Public Tasks

Mark Task as Public
- Edit a task
- Set visibility to "Public"
- Add a public slug (e.g., "demo-task")
- Save the task
Share the URL
- Copy the public URL
- Share with clients, stakeholders, or team members
- URL works without login authentication

Use Cases

✅ Client Portals: Share project progress with clients
✅ Public Showcases: Display completed projects publicly
✅ Stakeholder Updates: Share task status with stakeholders
✅ Team Dashboards: Create public team dashboards
✅ SEO-Friendly: Custom slugs for better SEO

💡 Public Projects: Projects and tasks marked as "public" can be accessed via shareable URLs like yoursite.com/project/demo-project or yoursite.com/task/demo-task

🎨 Styling & Customization

CSS Classes

All shortcodes use consistent CSS classes for easy customization:

css

/* Main containers */
.tmp_task_list
.tmp_project_list
.tmp-dashboard-widget
.tmp-stats-widget
.tmp-activity-feed
.tmp-upcoming-deadlines
.tmp-quick-actions
.tmp-create-task-form
.tmp-team-directory
.tmp-notification-center

/* Common elements */
.tmp-empty          /* Empty state */
.tmp-error          /* Error state */
.tmp-loading        /* Loading state */

Custom Styling

Customize Activity Feed

.tmp-activity-feed { background: #f8f9fa; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

.tmp-activity-feed .activity-item { background: white; margin-bottom: 10px; padding: 15px; border-radius: 5px; }

Customize Quick Actions

.tmp-quick-actions .action-link { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; transition: transform 0.3s ease; }

.tmp-quick-actions .action-link:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

🔧 Advanced Usage

Conditional Display

Show for Logged-in Users Only

<?php if (is_user_logged_in()): ?> [tmp dashboard] [tmp activity-feed="5"] <?php else: ?> <p>Please log in to view your dashboard.</p> <?php endif; ?>

Multiple Shortcodes

Client Portal Page

[tmp dashboard]

[tmp activity-feed="10" show_avatars="true"]

[tmp upcoming-deadlines="14" show_overdue="true"]

[tmp quick-actions show_create="true"]

📱 Responsive Design

All shortcodes are fully responsive and automatically adapt to different screen sizes:

Desktop: Full grid layouts and hover effects
Tablet: Adjusted spacing and smaller elements
Mobile: Single-column layouts and touch-friendly buttons

🔒 Security & Permissions

Permission Checks

All shortcodes automatically check user permissions:

Logged-in Users: Most shortcodes require user login
Project Access: Users only see projects they have access to
Task Access: Users only see tasks they're assigned to
Role-based Access: Different content based on user roles

Security Best Practices

🔒 Security: Always check permissions, sanitize output, and use nonces for forms.

🚀 Performance Optimization

Caching

Enable Caching

// Cache shortcode output $cache_key = 'tmp_shortcode_' . md5(serialize($args)); $cached_output = wp_cache_get($cache_key, 'tmp_shortcodes');

if ($cached_output === false) { $cached_output = generate_shortcode_output($args); wp_cache_set($cache_key, $cached_output, 'tmp_shortcodes', 300); }

Database Optimization

💡 Tip: Always limit the number of results and use specific parameters for better performance.

🛠️ Troubleshooting

Common Issues

Issue	Solution
Shortcodes not displaying	Check if user is logged in and has proper permissions
Styling issues	Check for CSS conflicts and verify CSS file is loaded
AJAX errors	Check nonce configuration and verify AJAX endpoints

💡 Best Practices

Shortcode Usage

✅ Use appropriate parameters for your needs
✅ Limit the number of items displayed
✅ Test on different devices and browsers
✅ Use caching for frequently accessed content

Performance

✅ Avoid using too many shortcodes on one page
✅ Use specific parameters to limit data
✅ Enable caching where appropriate
✅ Monitor page load times

User Experience

✅ Provide clear instructions for users
✅ Use consistent styling across shortcodes
✅ Test with different user roles
✅ Ensure mobile compatibility

🎉 Next Steps: After mastering shortcodes, explore Public Visibility and Workflows.

Shortcodes ​

🎯 Overview ​

📋 Available Shortcodes ​

Basic Shortcodes ​

Task List [tmp task] ​

Basic Usage

Project List [tmp project] ​

Basic Usage

Interactive Shortcodes ​

Recent Activity Feed [tmp activity-feed] ​

Basic Usage

Upcoming Deadlines [tmp upcoming-deadlines] ​

Basic Usage

Quick Actions Panel [tmp quick-actions] ​

Basic Usage

Task Creation Form [tmp create-task] ​

Basic Usage

Team Directory [tmp team-directory] ​

Basic Usage

Notification Center [tmp notifications] ​

Basic Usage

Public Visibility Shortcodes ​

Board View [tmp board-view] ​

Basic Usage

Task List [tmp task-list] ​

Basic Usage

Project Overview [tmp project-overview] ​

Basic Usage

🌐 Public Visibility & URLs ​

Public Task URLs ​

Public URL Format ​

Example URLs ​

How to Create Public Tasks ​

Use Cases ​

🎨 Styling & Customization ​

CSS Classes ​

Custom Styling ​

Customize Activity Feed

Customize Quick Actions

🔧 Advanced Usage ​

Conditional Display ​

Show for Logged-in Users Only

Multiple Shortcodes ​

Client Portal Page

📱 Responsive Design ​

🔒 Security & Permissions ​

Permission Checks ​

Security Best Practices ​

🚀 Performance Optimization ​

Caching ​

Enable Caching

Database Optimization ​

🛠️ Troubleshooting ​

Common Issues ​

💡 Best Practices ​

Shortcode Usage ​

Performance ​

User Experience ​

Shortcodes

🎯 Overview

📋 Available Shortcodes

Basic Shortcodes

Task List `[tmp task]`

Project List `[tmp project]`

Interactive Shortcodes

Recent Activity Feed `[tmp activity-feed]`

Upcoming Deadlines `[tmp upcoming-deadlines]`

Quick Actions Panel `[tmp quick-actions]`

Task Creation Form `[tmp create-task]`

Team Directory `[tmp team-directory]`

Notification Center `[tmp notifications]`

Public Visibility Shortcodes

Board View `[tmp board-view]`

Task List `[tmp task-list]`

Project Overview `[tmp project-overview]`

🌐 Public Visibility & URLs

Public Task URLs

Public URL Format

Example URLs

How to Create Public Tasks

Use Cases

🎨 Styling & Customization

CSS Classes

Custom Styling

🔧 Advanced Usage

Conditional Display

Multiple Shortcodes

📱 Responsive Design

🔒 Security & Permissions

Permission Checks

Security Best Practices

🚀 Performance Optimization

Caching

Database Optimization

🛠️ Troubleshooting

Common Issues

💡 Best Practices

Shortcode Usage

Performance

User Experience