MXCamp WordPress Plugin Development

Expert development assistant for the MXCamp V3 WordPress plugin - a custom plugin that creates an immersive, interactive website showcasing the MXCamp experience with vertical-scrolling sliders, interactive maps, video backgrounds, and bilingual support.

Project Architecture

This is a **WordPress plugin project** (not a standalone application) with these core components:

Development Instructions

Critical: No Build System

IMPORTANT: This project has **no build process, package.json, or npm commands**. It uses vanilla JavaScript, CSS, and PHP directly deployed to WordPress.

File Structure

When working with files, understand this structure:

```

mxcamp_V3/

├── mxcamp.php # Main WordPress plugin file (entry point)

├── navigation-v3_0.js # Core slider navigation system

├── css/mxcamp_style-v3_0.css # Primary stylesheet

├── WP-AdditionalCustomizedCSS.css # WordPress-specific overrides

├── Post Contents/

│ ├── leaflet_mapa.html # Interactive map implementation

│ └── exported_posts/ # Multilingual post content (EN/ES)

├── assets.js # Utilities including changeLangue() switcher

├── BgVideoSound.js # Background video management

├── hovers.js # Hover effect management

├── replacevideo-module.js # EventON video integration

├── slider_vimeo.js # Vimeo gallery slider

└── add-onmouseover-detail.js # Clickable element utility

```

Key Features to Understand

1. **Interactive Homepage Slider**: Vertical-scrolling full-page slider with dynamic content loading

2. **Custom Interactive Map**: Image-based map using Leaflet.js with hover effects and layer toggling

3. **Post Content Hints**: Session-based hint system showing interactive content hints on first 3 slides

4. **Multilingual Support**: English/Spanish switcher via `assets.js:changeLangue()`

5. **Video Integration**: Background videos, Vimeo players, custom video modules

6. **Event Calendar**: EventON plugin integration with custom styling

7. **WordPress Integration**: WPBakery page builder compatibility

Testing Approach

Since there are no automated tests:

1. **Manual Testing**: Load in WordPress environment with plugin activated

2. **Post Content Hints Debug Commands**:

```javascript

navigation.testPostContentHint() // Test flash animation

navigation.resetFirstEncounters() // Reset session tracking

navigation.testCursorHintOnCurrentSlide() // Test cursor hint

```

3. **Test Page**: Use `test-post-content-hint.html` for UI testing

4. **Browser Console**: Primary debugging tool for JavaScript issues

Code Conventions

**JavaScript:**

**CSS:**

**PHP:**

WordPress Integration Requirements

When modifying WordPress-related code:

Common Debugging Areas

**Loading System:**

**Video Playback:**

**Map Interactions:**

**Hint System:**

**Responsive Behavior:**

Development Scripts

Implementation Guidelines

1. **Before Making Changes:**

- Read the relevant source files completely

- Understand the Navigation class state management

- Check for existing event listeners that may conflict

- Review mobile vs desktop behavior differences

2. **When Adding Features:**

- Use vanilla JavaScript (no frameworks)

- Follow ES6 class-based patterns

- Add comprehensive error handling

- Clean up event listeners in destroy methods

- Test on mobile and desktop viewports

- Consider bilingual content implications

3. **When Fixing Bugs:**

- Check browser console for errors

- Use navigation debug methods for hint system issues

- Review loading sequence timing

- Test video playback on various devices

- Verify map polygon click handlers

4. **WordPress Considerations:**

- Enqueue scripts/styles properly in `mxcamp.php`

- Use WordPress security best practices

- Test shortcode output in page builder context

- Verify compatibility with WordPress 5.x+

5. **Security Notes:**

- `.htaccess` blocks direct file access

- Sanitize all user inputs in PHP

- Follow WordPress nonce patterns for AJAX

- Validate and escape output

Multilingual Content

When working with language features:

Performance Considerations