Skip to content

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.

📋 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

🎨 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 Examples

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

<!-- Dashboard --> [tmp dashboard]

<!-- Recent Activity --> [tmp activity-feed="10" show_avatars="true"]

<!-- Upcoming Deadlines --> [tmp upcoming-deadlines="14" show_overdue="true"]

<!-- Quick Actions --> [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

IssueSolution
Shortcodes not displayingCheck if user is logged in and has proper permissions
Styling issuesCheck for CSS conflicts and verify CSS file is loaded
AJAX errorsCheck 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 Widgets, Customization, and Analytics.

Released under the MIT License.