Malibu Markup - WordPress Visual Commenting Plugin

A powerful WordPress plugin that enables visual commenting directly on page elements, similar to markup.io. Users can click on any element to add comments, which are displayed as numbered markers with a sidebar interface for easy management.

Features

• Visual Commenting: Click on any page element to add comments
• Responsive Design: Comments automatically adjust position on different screen sizes
• Numbered Markers: Comments are displayed as numbered circular markers
• Sidebar Interface: Left sidebar shows all comments with easy navigation
• Click-to-Navigate: Click comment numbers to scroll between page and sidebar
• User Permissions: Configurable user roles and post types
• Comment Moderation: Optional approval workflow for comments
• Export Functionality: Export all comments to CSV format
• Canvas Mode: Clean interface that doesn't interfere with site functionality

Installation

1. Upload the Plugin

   • Download the plugin files
   • Upload the malibu-markup folder to /wp-content/plugins/
   • Or install via WordPress admin: Plugins → Add New → Upload Plugin

2. Activate the Plugin

   • Go to WordPress Admin → Plugins
   • Find "Malibu Markup" and click "Activate"

3. Configure Settings

   • Go to Settings → Malibu Markup
   • Enable the plugin and configure your preferences

Configuration

Settings Page

Navigate to Settings → Malibu Markup to configure:

General Settings

• Enable Malibu Markup: Toggle to enable/disable the commenting system
• Allowed User Roles: Select which user roles can create and view comments
• Enabled Post Types: Choose which post types support visual commenting
• Canvas Mode: Choose between Overlay or iFrame display modes
• Comment Moderation: Require approval for new comments

Dashboard Features

The settings page includes a dashboard showing:

• Total number of comments
• Number of active pages with comments
• Recent activity (comments from last 7 days)
• Quick access to comment management
• Export functionality

Usage

For Users

1. Enable Comments: Admin must enable the plugin in settings
2. View Comments: Look for the comment toggle button (💬) in the top-right corner
3. Add Comments:
   • Click the toggle button to open the sidebar
   • Click "Add Comment" button
   • Click on any page element where you want to comment
   • Enter your comment in the modal and save
4. Navigate Comments:
   • Use the sidebar to see all comments
   • Click "Show on page" to scroll to a comment's location
   • Click numbered markers on the page to view comment details

For Administrators

1. Plugin Management:

   • Configure user permissions and post types
   • Enable/disable comment moderation
   • Monitor comment activity via dashboard

2. Comment Management:

   • View all comments in WordPress admin
   • Edit or delete comments as needed
   • Export comments to CSV for analysis

Technical Details

Database Schema

The plugin creates two custom tables:

wp_malibu_markup_comments

• id: Unique comment identifier
• post_id: Associated WordPress post ID
• user_id: Comment author user ID
• element_selector: CSS selector for target element
• element_xpath: XPath for element location
• position_x, position_y: Comment marker coordinates
• comment_text: The actual comment content
• comment_status: Approval status (approved/pending)
• parent_id: For threaded comments (future feature)
• created_at, updated_at: Timestamps

wp_malibu_markup_comment_meta

• meta_id: Unique metadata identifier
• comment_id: Associated comment ID
• meta_key, meta_value: Custom metadata storage

File Structure

malibu-markup/
├── malibu-markup.php          # Main plugin file
├── includes/
│   ├── class-admin.php        # Admin interface and settings
│   ├── class-frontend.php     # Frontend display logic
│   ├── class-ajax.php         # AJAX request handlers
│   └── class-database.php     # Database operations
├── assets/
│   ├── css/
│   │   └── frontend.css       # Frontend styling
│   └── js/
│       ├── frontend.js        # Frontend JavaScript
│       └── admin.js           # Admin JavaScript
└── README.md                  # This file

Responsive Positioning

Comments use a sophisticated positioning system:

• Initial position is stored as absolute coordinates
• On window resize, positions are recalculated relative to target elements
• CSS selectors and XPath provide fallback element identification
• Markers automatically adjust for different screen sizes

Security Features

• Nonce verification for all AJAX requests
• User capability checks for all operations
• Input sanitization and validation
• SQL injection prevention with prepared statements
• XSS protection with WordPress sanitization functions

Customization

Styling

Override the default styles by adding CSS to your theme:

/* Customize comment markers */
.comment-marker .marker-number {
    background: #your-color;
    border-color: #your-border-color;
}

/* Customize sidebar */
.malibu-markup-sidebar {
    width: 500px; /* Change sidebar width */
}

/* Customize toggle button */
.markup-toggle-btn {
    background: #your-brand-color;
}

Hooks and Filters

The plugin provides several hooks for customization:

// Modify comment data before saving
add_filter('malibu_markup_before_save_comment', function($comment_data) {
    // Your modifications
    return $comment_data;
});

// Customize user permissions
add_filter('malibu_markup_user_can_comment', function($can_comment, $user_id) {
    // Your logic
    return $can_comment;
}, 10, 2);

Browser Compatibility

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• Mobile browsers (iOS Safari, Chrome Mobile)

Performance Considerations

• Comments are loaded via AJAX to avoid impacting page load times
• Minimal JavaScript footprint with efficient event handling
• CSS optimized for smooth animations and transitions
• Database queries are optimized with proper indexing

Troubleshooting

Common Issues

1. Comments not appearing

   • Check if plugin is enabled in settings
   • Verify user has required permissions
   • Ensure post type is enabled for comments

2. Positioning issues

   • Clear browser cache
   • Check for CSS conflicts with theme
   • Verify JavaScript is not blocked

3. AJAX errors

   • Check WordPress debug log
   • Verify nonce values are correct
   • Ensure proper user permissions

Debug Mode

Enable WordPress debug mode to troubleshoot issues:

// In wp-config.php
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Support

For support and feature requests:

• Create an issue on GitHub
• Check the WordPress.org plugin support forum
• Review the documentation

License

This plugin is licensed under the GPL v2 or later.

Changelog

Version 1.0.0

• Initial release
• Visual commenting system
• Responsive design
• User permission management
• Comment moderation
• Export functionality
• Admin dashboard

Credits

Inspired by markup.io and built for the WordPress community.

Note: This plugin requires WordPress 5.0+ and PHP 7.4+.