8.9 KiB
8.9 KiB
Quick Reference: Artifact to File Mapping
This document maps each artifact I created to its exact file location in the plugin structure.
📦 Artifacts Created (in order)
| # | Artifact ID | File Name | Location |
|---|---|---|---|
| 1 | main_plugin |
wpforms-mailjet-automation.php | Root |
| 2 | core_class |
class-wpfmj-core.php | includes/ |
| 3 | loader_class |
class-wpfmj-loader.php | includes/ |
| 4 | activator_class |
class-wpfmj-activator.php | includes/ |
| 5 | deactivator_class |
class-wpfmj-deactivator.php | includes/ |
| 6 | cpt_class |
class-wpfmj-cpt.php | includes/ |
| 7 | encryption_class |
class-wpfmj-encryption.php | includes/ |
| 8 | mailjet_api_class |
class-wpfmj-mailjet-api.php | includes/ |
| 9 | form_handler_class |
class-wpfmj-form-handler.php | includes/ |
| 10 | error_logger_class |
class-wpfmj-error-logger.php | includes/ |
| 11 | admin_class |
class-wpfmj-admin.php | admin/ |
| 12 | dashboard_class |
class-wpfmj-dashboard.php | admin/ |
| 13 | admin_css |
wpfmj-admin.css | admin/css/ |
| 14 | wizard_app |
App.jsx | assets/src/wizard/ |
| 15 | step_one |
StepOne.jsx | assets/src/wizard/components/ |
| 16 | step_two |
StepTwo.jsx | assets/src/wizard/components/ |
| 17 | step_three |
StepThree.jsx | assets/src/wizard/components/ |
| 18 | step_four |
StepFour.jsx | assets/src/wizard/components/ |
| 19 | step_five |
StepFive.jsx | assets/src/wizard/components/ |
| 20 | step_six |
StepSix.jsx | assets/src/wizard/components/ |
| 21 | api_utils |
api.js | assets/src/wizard/utils/ |
| 22 | uninstall_script |
uninstall.php | Root |
| 23 | silence_index |
index.php | Multiple locations (see below) |
| 24 | wizard_asset |
wpfmj-wizard.asset.php | admin/js/ |
| 25 | build_readme |
BUILD-INSTRUCTIONS.md | Root |
| 26 | directory_structure |
DIRECTORY-STRUCTURE.txt | Root |
| 27 | plugin_summary |
PLUGIN-SUMMARY.md | Root |
| 28 | quick_reference |
QUICK-REFERENCE.md | Root (this file) |
📍 index.php Placement (9 copies needed)
The silence_index artifact should be copied to these 9 locations:
wpforms-mailjet-automation/index.php
wpforms-mailjet-automation/includes/index.php
wpforms-mailjet-automation/admin/index.php
wpforms-mailjet-automation/admin/css/index.php
wpforms-mailjet-automation/admin/js/index.php
wpforms-mailjet-automation/assets/index.php
wpforms-mailjet-automation/assets/src/index.php
wpforms-mailjet-automation/assets/src/wizard/index.php
wpforms-mailjet-automation/assets/src/wizard/components/index.php
wpforms-mailjet-automation/assets/src/wizard/utils/index.php
Content of each index.php:
<?php
// Silence is golden.
🗂️ Complete File Tree
wpforms-mailjet-automation/
│
├── 📄 wpforms-mailjet-automation.php (Artifact #1)
├── 📄 uninstall.php (Artifact #22)
├── 📄 index.php (Artifact #23)
├── 📄 BUILD-INSTRUCTIONS.md (Artifact #25)
├── 📄 DIRECTORY-STRUCTURE.txt (Artifact #26)
├── 📄 PLUGIN-SUMMARY.md (Artifact #27)
├── 📄 QUICK-REFERENCE.md (Artifact #28)
├── 📄 package.json (Create manually - see below)
│
├── 📁 includes/
│ ├── 📄 index.php (Artifact #23)
│ ├── 📄 class-wpfmj-activator.php (Artifact #4)
│ ├── 📄 class-wpfmj-deactivator.php (Artifact #5)
│ ├── 📄 class-wpfmj-loader.php (Artifact #3)
│ ├── 📄 class-wpfmj-core.php (Artifact #2)
│ ├── 📄 class-wpfmj-cpt.php (Artifact #6)
│ ├── 📄 class-wpfmj-encryption.php (Artifact #7)
│ ├── 📄 class-wpfmj-mailjet-api.php (Artifact #8)
│ ├── 📄 class-wpfmj-form-handler.php (Artifact #9)
│ └── 📄 class-wpfmj-error-logger.php (Artifact #10)
│
├── 📁 admin/
│ ├── 📄 index.php (Artifact #23)
│ ├── 📄 class-wpfmj-admin.php (Artifact #11)
│ ├── 📄 class-wpfmj-dashboard.php (Artifact #12)
│ │
│ ├── 📁 css/
│ │ ├── 📄 index.php (Artifact #23)
│ │ └── 📄 wpfmj-admin.css (Artifact #13)
│ │
│ └── 📁 js/
│ ├── 📄 index.php (Artifact #23)
│ ├── 📄 wpfmj-wizard.asset.php (Artifact #24)
│ └── 📄 wpfmj-wizard.js (Generated by build)
│
└── 📁 assets/
├── 📄 index.php (Artifact #23)
└── 📁 src/
├── 📄 index.php (Artifact #23)
└── 📁 wizard/
├── 📄 index.php (Artifact #23)
├── 📄 App.jsx (Artifact #14)
│
├── 📁 components/
│ ├── 📄 index.php (Artifact #23)
│ ├── 📄 StepOne.jsx (Artifact #15)
│ ├── 📄 StepTwo.jsx (Artifact #16)
│ ├── 📄 StepThree.jsx (Artifact #17)
│ ├── 📄 StepFour.jsx (Artifact #18)
│ ├── 📄 StepFive.jsx (Artifact #19)
│ └── 📄 StepSix.jsx (Artifact #20)
│
└── 📁 utils/
├── 📄 index.php (Artifact #23)
└── 📄 api.js (Artifact #21)
📝 package.json Template
Create this file manually in the root directory:
{
"name": "wpforms-mailjet-automation",
"version": "1.0.0",
"description": "WPForms to Mailjet automation plugin",
"scripts": {
"build": "wp-scripts build assets/src/wizard/App.jsx --output-path=admin/js",
"start": "wp-scripts start assets/src/wizard/App.jsx --output-path=admin/js"
},
"devDependencies": {
"@wordpress/scripts": "^26.0.0"
},
"dependencies": {
"@wordpress/element": "^5.0.0",
"@wordpress/components": "^25.0.0",
"@wordpress/i18n": "^4.0.0"
}
}
⚡ Quick Setup Commands
# 1. Create plugin directory
mkdir wpforms-mailjet-automation
cd wpforms-mailjet-automation
# 2. Create subdirectories
mkdir -p includes admin/css admin/js assets/src/wizard/components assets/src/wizard/utils
# 3. Copy all artifacts to their locations (see table above)
# 4. Create package.json from template above
# 5. Install dependencies
npm install
# 6. Build React bundle
npm run build
# 7. Upload to WordPress
# Upload the entire wpforms-mailjet-automation folder to wp-content/plugins/
# 8. Activate in WordPress Admin
✅ Verification Checklist
After placing all files, verify:
- 28 artifacts placed correctly
- 9 index.php security files in place
- package.json created in root
- npm install completed successfully
- npm run build generated admin/js/wpfmj-wizard.js
- No syntax errors in any PHP files
- All JSX files in correct locations
- CSS file in admin/css/
- All class files start with <?php tag
- No missing dependencies
🎯 Build Output
After running npm run build, you should see:
✔ Compiled successfully in XXXms
asset wpfmj-wizard.js XXX KiB [emitted] [minimized] (name: main)
asset wpfmj-wizard.asset.php XXX bytes [emitted] (name: main)
webpack 5.x.x compiled successfully in XXXms
The build creates these files:
admin/js/wpfmj-wizard.js- Minified React bundleadmin/js/wpfmj-wizard.asset.php- Dependency manifest (overwrites the template)
🚀 Final Steps
-
Zip the plugin (optional):
zip -r wpforms-mailjet-automation.zip wpforms-mailjet-automation -x "*/node_modules/*" -x "*/.git/*" -
Upload to WordPress:
- Via FTP: Upload folder to
/wp-content/plugins/ - Via Admin: Upload the .zip file at Plugins → Add New → Upload
- Via FTP: Upload folder to
-
Activate:
- Go to Plugins menu
- Find "WPForms to Mailjet Automation"
- Click "Activate"
-
Configure:
- Go to "Mailjet Automations" in admin menu
- Click "Add New" to create your first automation
📞 Support
If you encounter any issues:
- Check BUILD-INSTRUCTIONS.md for detailed build steps
- Verify all files are in correct locations using this reference
- Check browser console for JavaScript errors
- Check PHP error log for server-side errors
- Ensure WPForms is installed and activated
Total Implementation Time: ~30 minutes (including npm install and build)
Difficulty Level: Intermediate
Prerequisites: Node.js installed, basic command line knowledge