|
| 1 | +--- |
| 2 | +description: WordPress Plugin Boilerplate |
| 3 | +alwaysApply: true |
| 4 | +--- |
| 5 | + |
| 6 | +# WordPress Plugin Boilerplate - Cursor Project Rules |
| 7 | + |
| 8 | +## Project Overview |
| 9 | +This is a WordPress Plugin Boilerplate project that follows modern development practices with: |
| 10 | +- **Backend**: PHP with object-oriented architecture, namespaces, and WordPress standards |
| 11 | +- **Frontend**: React with Vite, TypeScript, Tailwind CSS, and shadcn ui |
| 12 | +- **Build System**: Vite for frontend, Grunt for PHP tasks, npm for package management |
| 13 | +- **Architecture**: MVC pattern with separation of concerns |
| 14 | + |
| 15 | +## File Structure & Conventions |
| 16 | + |
| 17 | +### Root Directory Structure |
| 18 | +``` |
| 19 | +wordpress-plugin-boilerplate/ |
| 20 | +├── config/ # PHP configuration files |
| 21 | +├── database/ # Database migrations and seeders |
| 22 | +│ ├── Migrations/ # Database schema changes |
| 23 | +│ └── Seeders/ # Database seeding files |
| 24 | +├── includes/ # Core PHP classes and functionality |
| 25 | +│ ├── Admin/ # Admin-specific functionality |
| 26 | +│ ├── Assets/ # Asset management classes |
| 27 | +│ ├── Controllers/ # Business logic controllers |
| 28 | +│ ├── Core/ # Core plugin functionality |
| 29 | +│ ├── Frontend/ # Frontend-specific functionality |
| 30 | +│ ├── Interfaces/ # PHP interfaces |
| 31 | +│ ├── Models/ # Data models and ORM |
| 32 | +│ ├── Routes/ # API route definitions |
| 33 | +│ └── Traits/ # Reusable PHP traits |
| 34 | +├── src/ # Frontend source code |
| 35 | +│ ├── admin/ # Admin React application |
| 36 | +│ ├── frontend/ # Frontend React application |
| 37 | +│ ├── components/ # Shared React components |
| 38 | +│ ├── blocks/ # WordPress Gutenberg blocks |
| 39 | +│ └── lib/ # Shared utilities |
| 40 | +├── assets/ # Built assets (generated) |
| 41 | +├── views/ # PHP templates |
| 42 | +├── libs/ # Third-party libraries |
| 43 | +└── vendor/ # Composer dependencies |
| 44 | +``` |
| 45 | + |
| 46 | +## PHP Development Rules |
| 47 | + |
| 48 | +### Namespace Conventions |
| 49 | +- **Main Namespace**: `WordPressPluginBoilerplate` |
| 50 | +- **Sub-namespaces**: Follow directory structure (e.g., `WordPressPluginBoilerplate\Admin\Menu`) |
| 51 | +- **Use PSR-4 autoloading** with Composer |
| 52 | + |
| 53 | +### Class Structure |
| 54 | +```php |
| 55 | +<?php |
| 56 | +namespace WordPressPluginBoilerplate\Admin; |
| 57 | + |
| 58 | +use WordPressPluginBoilerplate\Traits\Base; |
| 59 | + |
| 60 | +final class Menu { |
| 61 | + use Base; |
| 62 | + |
| 63 | + public function init() { |
| 64 | + // Implementation |
| 65 | + } |
| 66 | +} |
| 67 | +``` |
| 68 | + |
| 69 | +### File Naming |
| 70 | +- **Classes**: PascalCase (e.g., `Menu.php`, `Actions.php`) |
| 71 | +- **Functions**: snake_case (e.g., `wordpress_plugin_boilerplate_init`) |
| 72 | +- **Constants**: UPPER_SNAKE_CASE (e.g., `WORDPRESS_PLUGIN_BOILERPLATE_VERSION`) |
| 73 | + |
| 74 | +### WordPress Standards |
| 75 | +- Follow **WordPress Coding Standards** |
| 76 | +- Use **WordPress hooks and filters** appropriately |
| 77 | +- Implement **security best practices** (nonce verification, sanitization, escaping) |
| 78 | +- Use **WordPress REST API** for AJAX requests |
| 79 | + |
| 80 | +### Database & ORM |
| 81 | +- Use **Eloquent ORM** for database operations |
| 82 | +- Create **Migrations** for schema changes in `database/Migrations/` |
| 83 | +- Create **Seeders** for test data in `database/Seeders/` |
| 84 | +- Models should extend `Prappo\WpEloquent\Database\Eloquent\Model` |
| 85 | + |
| 86 | +### API Routes |
| 87 | +- Define routes in `includes/Routes/Api.php` |
| 88 | +- Use RESTful conventions |
| 89 | +- Implement proper authentication |
| 90 | +- Follow WordPress REST API standards |
| 91 | + |
| 92 | +## React/JavaScript Development Rules |
| 93 | + |
| 94 | +### Component Structure |
| 95 | +```jsx |
| 96 | +// components/ui/Button.tsx |
| 97 | +import React from 'react'; |
| 98 | +import { cn } from '@/lib/utils'; |
| 99 | + |
| 100 | +export const Button = ({ className, ...props }) => { |
| 101 | + return ( |
| 102 | + <button |
| 103 | + className={cn( |
| 104 | + "inline-flex items-center justify-center rounded-md text-sm font-medium", |
| 105 | + className |
| 106 | + )} |
| 107 | + {...props} |
| 108 | + /> |
| 109 | + ); |
| 110 | +}; |
| 111 | +``` |
| 112 | + |
| 113 | +### File Organization |
| 114 | +- **Components**: PascalCase (e.g., `Button.tsx`, `UserProfile.jsx`) |
| 115 | +- **Hooks**: camelCase with `use` prefix (e.g., `useMail.ts`) |
| 116 | +- **Utilities**: camelCase (e.g., `utils.ts`) |
| 117 | +- **Types**: PascalCase with `.ts` extension (e.g., `account-types.ts`) |
| 118 | + |
| 119 | +### Styling Guidelines |
| 120 | +- Use **Tailwind CSS** for styling |
| 121 | +- Create **reusable component variants** with `class-variance-authority` |
| 122 | +- Use **CSS modules** for component-specific styles |
| 123 | +- Follow **mobile-first** responsive design |
| 124 | + |
| 125 | +### State Management |
| 126 | +- Use **React hooks** for local state |
| 127 | +- Use **Jotai** for global state management |
| 128 | +- Implement **React Query** for server state (when needed) |
| 129 | + |
| 130 | +### WordPress Integration |
| 131 | +- Use **@wordpress/scripts** for Gutenberg blocks |
| 132 | +- Implement **WordPress REST API** integration |
| 133 | +- Use **WordPress i18n** for internationalization |
| 134 | + |
| 135 | +## Build & Development Rules |
| 136 | + |
| 137 | +### Development Commands |
| 138 | +```bash |
| 139 | +# Start development servers |
| 140 | +npm run dev # Both admin and frontend |
| 141 | +npm run dev:admin # Admin only |
| 142 | +npm run dev:frontend # Frontend only |
| 143 | +npm run dev:server # With WordPress server |
| 144 | + |
| 145 | +# Build commands |
| 146 | +npm run build # Production build |
| 147 | +npm run block:start # Start block development |
| 148 | +npm run block:build # Build blocks |
| 149 | +``` |
| 150 | + |
| 151 | +### Vite Configuration |
| 152 | +- **Admin**: `vite.admin.config.js` - Admin React app |
| 153 | +- **Frontend**: `vite.frontend.config.js` - Frontend React app |
| 154 | +- Use **@kucrut/vite-for-wp** for WordPress integration |
| 155 | + |
| 156 | +### Code Quality |
| 157 | +- Use **ESLint** for JavaScript/TypeScript linting |
| 158 | +- Use **Prettier** for code formatting |
| 159 | +- Use **PHPCS** for PHP code standards |
| 160 | +- Run `npm run format:check` and `npm run format:fix` |
| 161 | + |
| 162 | +## Asset Management |
| 163 | + |
| 164 | +### PHP Asset Loading |
| 165 | +```php |
| 166 | +// includes/Assets/Admin.php |
| 167 | +class Admin { |
| 168 | + public function bootstrap() { |
| 169 | + wp_enqueue_script( |
| 170 | + 'wordpress-plugin-boilerplate-admin', |
| 171 | + WORDPRESS_PLUGIN_BOILERPLATE_ASSETS_URL . '/admin/dist/main.js', |
| 172 | + array('wp-element', 'wp-components'), |
| 173 | + WORDPRESS_PLUGIN_BOILERPLATE_VERSION, |
| 174 | + true |
| 175 | + ); |
| 176 | + } |
| 177 | +} |
| 178 | +``` |
| 179 | + |
| 180 | +### React Asset Integration |
| 181 | +- Use **WordPress REST API** for data fetching |
| 182 | +- Implement **nonce verification** for security |
| 183 | +- Use **WordPress hooks** for data passing |
| 184 | + |
| 185 | +## Database & Models |
| 186 | + |
| 187 | +### Model Example |
| 188 | +```php |
| 189 | +// includes/Models/Posts.php |
| 190 | +namespace WordPressPluginBoilerplate\Models; |
| 191 | + |
| 192 | +use Prappo\WpEloquent\Database\Eloquent\Model; |
| 193 | + |
| 194 | +class Posts extends Model { |
| 195 | + protected $table = 'posts'; |
| 196 | + protected $fillable = ['post_title', 'post_content']; |
| 197 | +} |
| 198 | +``` |
| 199 | + |
| 200 | +### Migration Example |
| 201 | +```php |
| 202 | +// database/Migrations/CreatePostsTable.php |
| 203 | +class CreatePostsTable { |
| 204 | + public function up() { |
| 205 | + // Schema creation |
| 206 | + } |
| 207 | + |
| 208 | + public function down() { |
| 209 | + // Schema rollback |
| 210 | + } |
| 211 | +} |
| 212 | +``` |
| 213 | + |
| 214 | +## API Development |
| 215 | + |
| 216 | +### Route Definition |
| 217 | +```php |
| 218 | +// includes/Routes/Api.php |
| 219 | +Route::get('/posts/get', '\WordPressPluginBoilerplate\Controllers\Posts\Actions@get_all_posts'); |
| 220 | +Route::post('/posts/create', '\WordPressPluginBoilerplate\Controllers\Posts\Actions@create_post'); |
| 221 | +``` |
| 222 | + |
| 223 | +### Controller Example |
| 224 | +```php |
| 225 | +// includes/Controllers/Posts/Actions.php |
| 226 | +namespace WordPressPluginBoilerplate\Controllers\Posts; |
| 227 | + |
| 228 | +class Actions { |
| 229 | + public function get_all_posts() { |
| 230 | + $posts = Posts::all(); |
| 231 | + return wp_send_json_success($posts); |
| 232 | + } |
| 233 | +} |
| 234 | +``` |
| 235 | + |
| 236 | + |
| 237 | + |
| 238 | +### Code Review Checklist |
| 239 | +- [ ] PHP follows WordPress coding standards |
| 240 | +- [ ] React components are properly typed |
| 241 | +- [ ] API endpoints have proper authentication |
| 242 | +- [ ] Database queries are optimized |
| 243 | +- [ ] Assets are properly enqueued |
| 244 | +- [ ] Internationalization is implemented |
| 245 | +- [ ] Security measures are in place |
| 246 | + |
| 247 | +## Deployment & Release |
| 248 | + |
| 249 | +### Release Process |
| 250 | +```bash |
| 251 | +npm run release # Creates release package in /release folder |
| 252 | +``` |
| 253 | + |
| 254 | +### Version Management |
| 255 | +- Update version in `plugin-config.json` |
| 256 | +- Update version in main plugin file |
| 257 | +- Update version in `package.json` |
| 258 | +- Create changelog entries |
| 259 | + |
| 260 | +## Security Guidelines |
| 261 | + |
| 262 | +### PHP Security |
| 263 | +- Always use `defined('ABSPATH') || exit;` |
| 264 | +- Sanitize all user inputs |
| 265 | +- Use WordPress nonces for forms |
| 266 | +- Escape all outputs |
| 267 | +- Validate user capabilities |
| 268 | + |
| 269 | +### JavaScript Security |
| 270 | +- Validate data from WordPress REST API |
| 271 | +- Use secure HTTP methods |
| 272 | +- Implement proper error handling |
| 273 | +- Sanitize user inputs on frontend |
| 274 | + |
| 275 | +## Performance Optimization |
| 276 | + |
| 277 | +### PHP Performance |
| 278 | +- Use **object caching** where appropriate |
| 279 | +- Optimize database queries |
| 280 | +- Implement **lazy loading** for assets |
| 281 | +- Use **transients** for expensive operations |
| 282 | + |
| 283 | +### React Performance |
| 284 | +- Use **React.memo** for expensive components |
| 285 | +- Implement **code splitting** with dynamic imports |
| 286 | +- Use **React.lazy** for route-based splitting |
| 287 | +- Optimize bundle size with **tree shaking** |
| 288 | + |
| 289 | +## Internationalization |
| 290 | + |
| 291 | +### PHP i18n |
| 292 | +```php |
| 293 | +// Load text domain |
| 294 | +load_plugin_textdomain('wordpress-plugin-boilerplate', false, dirname(plugin_basename(__FILE__)) . '/languages/'); |
| 295 | + |
| 296 | +// Use translation functions |
| 297 | +__('Hello World', 'wordpress-plugin-boilerplate'); |
| 298 | +_e('Hello World', 'wordpress-plugin-boilerplate'); |
| 299 | +``` |
| 300 | + |
| 301 | +### React i18n |
| 302 | +```jsx |
| 303 | +// Use WordPress i18n |
| 304 | +import { __ } from '@wordpress/i18n'; |
| 305 | + |
| 306 | +const MyComponent = () => { |
| 307 | + return <h1>{__('Hello World', 'wordpress-plugin-boilerplate')}</h1>; |
| 308 | +}; |
| 309 | +``` |
| 310 | + |
| 311 | +## Common Patterns |
| 312 | + |
| 313 | +### Plugin Initialization |
| 314 | +```php |
| 315 | +// Main plugin file |
| 316 | +function wordpress_plugin_boilerplate_init() { |
| 317 | + WordPressPluginBoilerplate::get_instance()->init(); |
| 318 | +} |
| 319 | +add_action('plugins_loaded', 'wordpress_plugin_boilerplate_init'); |
| 320 | +``` |
| 321 | + |
| 322 | +### React Component with WordPress Data |
| 323 | +```jsx |
| 324 | +// Access WordPress data |
| 325 | +const MyComponent = () => { |
| 326 | + const wpData = window.wordpressPluginBoilerplateAdmin || {}; |
| 327 | + |
| 328 | + return ( |
| 329 | + <div> |
| 330 | + <h1>{wpData.pluginName}</h1> |
| 331 | + </div> |
| 332 | + ); |
| 333 | +}; |
| 334 | +``` |
| 335 | + |
| 336 | +### Shortcode Implementation |
| 337 | +```php |
| 338 | +// Register shortcode |
| 339 | +Shortcode::add() |
| 340 | + ->tag('myshortcode') |
| 341 | + ->attrs(['id', 'name']) |
| 342 | + ->render(plugin_dir_path(__FILE__) . 'views/shortcode/myshortcode.php'); |
| 343 | +``` |
| 344 | + |
| 345 | +## Troubleshooting |
| 346 | + |
| 347 | +### Common Issues |
| 348 | +1. **Vite dev server not working**: Check SSL certificates or use localhost mode |
| 349 | +2. **Assets not loading**: Verify asset paths and WordPress enqueue functions |
| 350 | +3. **API routes not working**: Check route registration and authentication |
| 351 | +4. **Build failures**: Ensure all dependencies are installed |
| 352 | + |
| 353 | +### Debug Mode |
| 354 | +- Enable WordPress debug mode |
| 355 | +- Use browser developer tools for frontend debugging |
| 356 | +- Check WordPress error logs |
| 357 | +- Use React Developer Tools for component debugging |
| 358 | + |
| 359 | +## Best Practices Summary |
| 360 | + |
| 361 | +1. **Follow WordPress standards** for PHP development |
| 362 | +2. **Use modern React patterns** with hooks and functional components |
| 363 | +3. **Implement proper error handling** throughout the application |
| 364 | +4. **Write clean, documented code** with proper comments |
| 365 | +5. **Test thoroughly** before deployment |
| 366 | +6. **Follow security best practices** for both PHP and JavaScript |
| 367 | +7. **Optimize for performance** from the start |
| 368 | +8. **Plan for internationalization** early in development |
| 369 | +9. **Use version control** effectively with meaningful commits |
| 370 | +10. **Document your code** and maintain up-to-date documentation |
| 371 | + |
0 commit comments