Skip to content
BranchesTags

Repository files navigation

Lovable to WordPress

Version: 1.0.0
Status: Production Ready ✅
Compatibility: WordPress 5.8+, PHP 8.0+, Elementor 3.0+

Transform your Lovable projects into fully functional WordPress websites with Elementor compatibility. Features intelligent plugin recommendations, automatic component detection, and seamless asset migration.

🎯 Features

Core Functionality

  • ✅ ZIP Upload & Analysis - Upload complete Lovable projects directly from GitHub
  • ✅ Intelligent Component Detection - Automatically detects forms, popups, filters, galleries, animations, and CPTs
  • ✅ Smart Plugin Recommendations - AI-powered plugin matching with 6 functionality categories
  • ✅ Elementor Pro/Free Detection - Adapts recommendations based on installed Elementor version
  • ✅ Priority-Based Sorting - Prioritizes already installed plugins → Elementor Pro features → Best compatibility
  • ✅ ZIP Validation - Comprehensive validation (size, structure, security, MIME type)
  • ✅ Asset Import - Automatic media library integration for images and files
  • ✅ CSS Extraction - Preserves Tailwind colors, fonts, and custom styles
  • ✅ Page Creation - Generates WordPress pages with Elementor metadata
  • ✅ Plugin Auto-Install - One-click installation and activation from WordPress.org

Advanced Features

  • 🎨 85-90% Style Preservation - Maintains design fidelity through CSS extraction
  • 🔌 20+ Plugin Mappings - Curated recommendations for FREE and PREMIUM solutions
  • 🎯 User Preference Memory - Remembers plugin choices for future imports
  • 🔒 Security First - Nonce verification, capability checks, file sanitization
  • 🌐 Translation Ready - Full i18n support with .pot file included
  • 📊 Import Statistics - Real-time progress tracking (pages created, plugins installed)
  • ⚡ Hooks & Filters - Extensible architecture with 10+ action hooks

📦 Installation

Requirements

  • WordPress 5.8 or higher
  • PHP 8.0 or higher
  • Elementor (Free or Pro)
  • PHP ZipArchive extension
  • upload_max_filesize ≥ 50MB (recommended)

Quick Install

  1. Download the plugin:

    git clone https://github.com/WEBLOTI/lovable-to-wordpress.git

  2. Upload to WordPress:

    cp -r lovable-to-wordpress /path/to/wordpress/wp-content/plugins/

  3. Activate:

    • Go to Plugins in WordPress admin
    • Find "Lovable to WordPress"
    • Click "Activate"

  4. Access:

    • Navigate to Lovable to WordPress in admin menu
    • Upload your Lovable project ZIP

🚀 Usage

Step 1: Prepare Your Lovable Project

Export from Lovable/GitHub:

git clone <your-lovable-repo>
cd <your-lovable-repo>
zip -r lovable-project.zip .

Required Structure:

lovable-project.zip
├── src/
│   ├── components/
│   ├── pages/
│   └── ...
├── public/
│   └── assets/
└── package.json

Step 2: Upload & Analyze

  1. Go to Lovable to WordPress in admin menu
  2. Click "Choose ZIP file or drag here"
  3. Select your lovable-project.zip
  4. Click "Analyze Project"

The system will:

  • ✅ Validate ZIP structure
  • ✅ Extract project information
  • ✅ Detect components (forms, popups, etc.)
  • ✅ Generate plugin recommendations

Step 3: Select Plugins

Review recommendations for each detected functionality:

Example: Forms Detected

  • JetFormBuilder (95%) - FREE ✅ (Recommended - Already Installed)
  • Fluent Forms (90%) - FREE
  • WPForms Lite (85%) - FREE
  • Contact Form 7 (75%) - FREE
  • Skip / Manual Setup

Example: Popups Detected (with Elementor Pro)

  • Elementor Pro Popup Builder (98%) - PREMIUM ✅ (Only option shown)

Example: Animations Detected (with Elementor Free)

  • WPCode (92%) - FREE ✅ (Best free option)
  • Elementor Motion Effects (90%) - NATIVE FREE
  • Custom CSS/JS Animations (85%) - NATIVE FREE

Step 4: Configure Import Options

  • ✅ Automatically install selected plugins - Downloads from WordPress.org
  • ✅ Import images and assets - Uploads to Media Library
  • ✅ Apply Lovable CSS styles - Injects Tailwind and custom CSS
  • ☐ Remember my plugin choices - Saves preferences for future imports

Step 5: Import

Click "Import to WordPress" and wait for completion.

Success Message:

✅ Import Completed Successfully!
5 pages created | 3 plugins installed

🔧 Plugin Mappings

Supported Functionalities

Functionality Detection Patterns Recommended Solutions Free Options
Popups/Modals Dialog, Modal, Popover Elementor Pro (98%), JetPopup (95%), Popup Maker (90%) Popup Maker, Popup Anything
Forms react-hook-form, useForm JetFormBuilder (95%), Fluent Forms (90%), WPForms (85%) All 4 options
Filters/Search filter, search, Select JetSmartFilters (95%), Search & Filter (80%) Search & Filter
CPTs mockListings, data/ JetEngine (95%), ACF (90%), Meta Box (85%) ACF, Meta Box, CPTUI
Gallery Gallery, Carousel JetEngine (95%), JetElements (92%), Elementor (90%) Elementor native
Animations framer-motion, motion Elementor Pro (95%), WPCode (92%), Elementor (90%) WPCode, Custom CSS

Priority System

Plugins are sorted by:

  1. Active Plugins (Highest Priority) - User's existing setup
  2. Installed Plugins - Already downloaded
  3. Elementor Pro Features - If Pro is active
  4. Compatibility Score - Technical best match

🎨 Style Preservation

CSS Extraction

Automatically extracts and converts:

  • ✅ Tailwind utility classes → WordPress CSS
  • ✅ Custom colors & gradients
  • ✅ Typography (fonts, sizes, weights)
  • ✅ Spacing (margins, paddings)
  • ✅ Flexbox/Grid layouts
  • ✅ Animations & transitions

Example:

Lovable (Tailwind):

<div className="bg-gradient-to-r from-purple-600 to-blue-500 p-8 rounded-lg">
  <h1 className="text-4xl font-bold text-white">Hello</h1>
</div>

WordPress (Generated CSS):

.lovable-section-1 {
  background: linear-gradient(to right, #9333ea, #3b82f6);
  padding: 2rem;
  border-radius: 0.5rem;
}
.lovable-section-1 h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: #ffffff;
}

🔌 Developer Hooks

Actions

// Before import starts
do_action('l2wp_before_import_start', $analysis_result, $plugin_choices);

// After each page is created
do_action('l2wp_page_created_from_lovable', $page_id, $page_data);

// After import completes
do_action('l2wp_after_import_complete', $import_status);

// Before uninstall
do_action('l2wp_before_uninstall');

// After uninstall
do_action('l2wp_after_uninstall');

Filters

// Modify max ZIP size (default 50MB)
add_filter('l2wp_max_zip_size', function($size) {
    return 104857600; // 100MB
});

// Modify required ZIP structure
add_filter('l2wp_required_zip_structure', function($structure) {
    $structure[] = 'custom-folder/';
    return $structure;
});

// Modify allowed file extensions
add_filter('l2wp_allowed_file_extensions', function($extensions) {
    $extensions[] = 'pdf';
    return $extensions;
});

// Control uninstall data deletion
add_filter('l2wp_uninstall_delete_data', function($delete) {
    return false; // Keep data on uninstall
});

Helper Functions

// Check if Elementor is active
l2wp_is_elementor_active();

// Check if plugin is active
l2wp_is_plugin_active('jetformbuilder');

// Install and activate plugin
l2wp_install_plugin('jetformbuilder');

// Import assets
l2wp_import_assets($assets_array);

// Replace placeholders in content
l2wp_replace_placeholders($content, $post_id);

📊 Technical Architecture

Class Structure

L2WP_Main (lovable-to-wordpress.php)
├── L2WP_ZIP_Validator (class-l2wp-zip-validator.php)
├── L2WP_ZIP_Analyzer (class-l2wp-zip-analyzer.php)
├── L2WP_Component_Detector (class-l2wp-component-detector.php)
├── L2WP_Plugin_Recommender (class-l2wp-plugin-recommender.php)
├── L2WP_CSS_Extractor (class-l2wp-css-extractor.php)
├── L2WP_Elementor_Builder (class-l2wp-elementor-builder.php)
├── L2WP_API_Bridge (class-l2wp-api-bridge.php)
├── L2WP_Export_Engine (class-l2wp-export-engine.php)
├── L2WP_Elementor_Mapper (class-l2wp-elementor-mapper.php)
├── L2WP_Asset_Loader (class-l2wp-asset-loader.php)
└── L2WP_Dynamic_Tags (class-l2wp-dynamic-tags.php)

Data Flow

1. ZIP Upload
   ↓
2. L2WP_ZIP_Validator validates
   ↓
3. L2WP_ZIP_Analyzer extracts structure
   ↓
4. L2WP_Component_Detector scans for patterns
   ↓
5. L2WP_Plugin_Recommender generates options
   ↓
6. User selects plugins
   ↓
7. L2WP_Main::handle_import_submission()
   ↓
8. Install plugins via l2wp_install_plugin()
   ↓
9. Create pages via wp_insert_post()
   ↓
10. Import assets via l2wp_import_assets()
    ↓
11. Extract CSS via L2WP_CSS_Extractor
    ↓
12. Redirect with success message

🔒 Security

Implemented Measures

  • ✅ Nonce Verification - All forms protected
  • ✅ Capability Checks - manage_options required
  • ✅ Input Sanitization - sanitize_text_field(), esc_html(), etc.
  • ✅ File Validation - MIME type, extension, size checks
  • ✅ ZIP Security Scan - Detects dangerous files (.php, .exe, ../)
  • ✅ SQL Injection Prevention - Prepared statements
  • ✅ XSS Prevention - Output escaping
  • ✅ CSRF Protection - Nonces on all actions

Best Practices

// ✅ GOOD - Sanitized and escaped
$plugin_slug = sanitize_text_field($_POST['plugin_slug']);
echo esc_html($plugin_slug);

// ❌ BAD - Direct output
echo $_POST['plugin_slug'];

🧪 Testing

Manual Testing Checklist

  • Upload valid Lovable ZIP → Success
  • Upload invalid ZIP → Error message shown
  • Upload oversized ZIP → "File too large" error
  • Upload non-ZIP file → "Must be ZIP" error
  • Detect components correctly
  • Show correct plugin recommendations
  • Prioritize installed plugins
  • Install plugins successfully
  • Create pages with correct metadata
  • Import assets to media library
  • Extract and apply CSS
  • Show success message with stats
  • Reset cache works
  • Uninstall cleans up data

Test ZIP Structure

Create a test ZIP:

mkdir lovable-test
cd lovable-test
mkdir -p src/components src/pages public/assets
echo '{"name": "test-project"}' > package.json
echo "export default function Home() {}" > src/pages/Home.tsx
zip -r ../lovable-test.zip .

📝 Changelog

[1.0.0] - 2025-10-25

Added

  • ✅ Complete ZIP validation system
  • ✅ Intelligent plugin recommendation engine
  • ✅ Elementor Pro/Free detection
  • ✅ Priority-based plugin sorting
  • ✅ Automatic plugin installation from WordPress.org
  • ✅ Asset import to media library
  • ✅ CSS extraction and application
  • ✅ Page creation with Elementor metadata
  • ✅ Import statistics tracking
  • ✅ User preference memory
  • ✅ Security scans for uploaded ZIPs
  • ✅ Error handling and validation messages
  • ✅ Translation support (.pot file)
  • ✅ Comprehensive uninstall cleanup
  • ✅ Developer hooks and filters
  • ✅ PHPCS configuration
  • ✅ WordPress Coding Standards compliance

Changed

  • 🔄 Refactored all classes to L2WP_ prefix
  • 🔄 Updated constants to L2WP_ format
  • 🔄 Improved function naming consistency
  • 🔄 Enhanced PHPDoc documentation

Fixed

  • ✅ Helper functions fully implemented
  • ✅ Template synchronization
  • ✅ Message display after import
  • ✅ Plugin installation error handling

🤝 Contributing

Development Setup

git clone https://github.com/WEBLOTI/lovable-to-wordpress.git
cd lovable-to-wordpress

Coding Standards

Run PHPCS:

phpcs --standard=WordPress lovable-to-wordpress.php

Pull Request Process

  1. Fork the repository
  2. Create feature branch (git checkout -b feature/AmazingFeature)
  3. Commit changes (git commit -m 'Add AmazingFeature')
  4. Push to branch (git push origin feature/AmazingFeature)
  5. Open Pull Request

📄 License

GPL v2 or later - https://www.gnu.org/licenses/gpl-2.0.html

👨‍💻 Author

WEBLOTI
GitHub: @WEBLOTI

🙏 Acknowledgments

  • Elementor team for the excellent page builder
  • Crocoblock for JetEngine ecosystem
  • WordPress community for coding standards
  • Lovable for the amazing design tool

📞 Support

🎯 Roadmap

v1.1.0 (Next Release)

  • Unit tests (PHPUnit)
  • Integration tests
  • GitHub Actions CI/CD
  • Advanced Elementor template generation
  • Multi-page imports
  • Custom field mapping UI

v2.0.0 (Future)

  • Gutenberg support
  • REST API endpoints
  • Import templates library
  • Export WordPress back to Lovable
  • Cloud storage integration

Made with ❤️ by WEBLOTI

⭐ Star us on GitHub if this helped you!

About

Export Lovable designs to WordPress with full Elementor compatibility

Resources

Readme
Activity

Stars

6 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages