A modern, full-featured Kanban task management plugin for WordPress with Gutenberg block integration. Create beautiful, interactive task boards directly in your WordPress posts and pages with drag-and-drop functionality.
Screenshot of the main kanban board
Screenshot showing the block in the WordPress editor
Screenshot showing mobile layout
- Drag & Drop Interface - Intuitive task movement between columns
- Three-Column Layout - To Do, In Progress, and Done columns
- Real-time Updates - AJAX-powered task management
- Gutenberg Integration - Native WordPress block editor support
- Responsive Design - Works perfectly on all devices
- Quick Task Creation - Add tasks with title, description, priority, and assignee
- Priority Levels - Visual priority indicators (High, Medium, Low)
- Task Assignment - Assign tasks to team members
- Status Tracking - Automatic status updates when moving tasks
- Task Counting - Real-time task count per column
- Custom Board Titles - Personalize your task boards
- Toggle Add Button - Show/hide the add task button
- Modern UI - Clean, professional design
- Custom Styling - Easy to customize with CSS
- AJAX Integration - Smooth, no-reload interactions
- Database Storage - Persistent task storage
- REST API Ready - Extensible API endpoints
- Security First - Nonce verification and data sanitization
- Debug Support - Built-in debugging and logging
- Download the plugin files
- Upload the
wptaskboardfolder to/wp-content/plugins/ - Activate the plugin through the 'Plugins' menu in WordPress
- Start using the Kanban Board block in your posts/pages!
cd wp-content/plugins/
git clone https://github.com/yourusername/wptaskboard.gitwptaskboard/
├── wptaskboard.php # Main plugin file
├── README.md # This file
├── assets/
│ ├── css/
│ │ └── kanban-board.css # Main stylesheet
│ └── js/
│ └── kanban-board.js # Frontend JavaScript
├── blocks/
│ └── kanban-board/
│ ├── block.json # Block configuration
│ ├── index.js # Block registration
│ ├── edit.js # Block editor component
│ ├── save.js # Block save component
│ └── style.css # Block-specific styles
├── includes/
│ ├── class-ajax.php # AJAX handlers
│ ├── class-blocks.php # Block management
│ ├── class-database.php # Database operations
│ └── class-api.php # REST API endpoints
└── screenshots/ # Plugin screenshots
├── kanban-board-main.png
├── block-editor.png
└── mobile-view.png
-
In Block Editor:
- Click the "+" button to add a new block
- Search for "Kanban Task Board"
- Insert the block into your post/page
-
Customize Settings:
- Set a custom board title in the block settings
- Toggle the "Add Task" button visibility
- Adjust alignment (wide/full width supported)
-
Adding Tasks:
- Click the "+ Add Task" button
- Fill in task details (title, description, priority, assignee)
- Submit to add to the "To Do" column
-
Moving Tasks:
- Drag tasks between columns to change status
- Changes are automatically saved
- Task counts update in real-time
The Kanban Board block supports the following attributes:
{
"boardTitle": {
"type": "string",
"default": "My Task Board"
},
"showAddButton": {
"type": "boolean",
"default": true
}
}wptaskboard_add_task- Create new taskswptaskboard_update_task- Update task status/details
Key CSS classes for customization:
.wptaskboard-kanban-board /* Main container */
.kanban-board /* Board grid */
.kanban-column /* Individual columns */
.kanban-task /* Task cards */
.priority-high/.priority-medium/.priority-low /* Priority indicators */- WordPress 5.0+
- PHP 7.4+
- Modern browser with JavaScript enabled
- Clone the repository
- Set up a local WordPress development environment
- Install the plugin in development mode
- Enable WP_DEBUG for development logging
- Main Plugin File (
wptaskboard.php) - Plugin initialization and core functionality - Block Files (
blocks/kanban-board/) - Gutenberg block definition and editor interface - Assets (
assets/) - CSS and JavaScript files for frontend functionality - Includes (
includes/) - PHP classes for database, AJAX, and API functionality
The plugin provides several hooks for customization:
// Example: Customize task creation
add_filter('wptaskboard_before_task_create', 'my_custom_task_handler');
// Example: Modify board output
add_filter('wptaskboard_board_html', 'my_custom_board_html');We welcome contributions! Here's how you can help:
- Fork the Repository
- Create a Feature Branch (
git checkout -b feature/amazing-feature) - Commit Changes (
git commit -m 'Add amazing feature') - Push to Branch (
git push origin feature/amazing-feature) - Open Pull Request
- Follow WordPress coding standards
- Include PHPDoc comments for all functions
- Test on multiple WordPress versions
- Ensure mobile responsiveness
- Add appropriate error handling
Please use GitHub Issues to report bugs or request features:
- Bug Reports - Include WordPress version, PHP version, and steps to reproduce
- Feature Requests - Describe the feature and use case clearly
- Questions - Use the Discussions tab for general questions
- Task due dates and reminders
- User assignment with WordPress user integration
- Task templates and categories
- Export/import functionality
- Multiple board support
- Task comments and attachments
- Advanced filtering and search
- Email notifications
- Integration with popular project management tools
- Team collaboration features
- Advanced reporting and analytics
- Custom workflow states
- API webhooks
- Premium features and licensing
- Initial release
- Gutenberg block integration
- Drag and drop functionality
- AJAX-powered task management
- Responsive design
- Basic task creation and management
This project is licensed under the GPL v2 or later - see the LICENSE file for details.
- WordPress community for excellent documentation
- Gutenberg team for the block editor
- Contributors and beta testers
- Icons by Dashicons
⭐ If you find this plugin useful, please give it a star on GitHub!
Made with ❤️ for the WordPress community