CF7 Visual Styler - Development Guide

Welcome to the CF7 Visual Styler project! This plugin is designed as an extension for Contact Form 7 (CF7) to provide pre-defined visual themes. This guide is structured to help students understand the architecture and step-by-step development process of a WordPress plugin.

📁 Plugin Structure

cf-style/
├── cf-style.php          # Main plugin file (Logic & Admin UI)
└── assets/
    └── css/
        ├── admin.css     # Professional Admin UI styling
        ├── modern.css    # Theme: Modern Blue
        ├── dark.css      # Theme: Dark Elegance
        ├── minimal.css   # Theme: Minimalist Gray
        ├── ...           # Other theme files

🛠 Step-by-Step Development Directions

Step 1: Plugin Initialization & Singleton Pattern

We start by defining the plugin headers in cf-style.php so WordPress recognizes it. We use the Singleton Pattern to ensure only one instance of our plugin class runs, preventing hook duplication.

• Explanation: The get_instance() method checks if an instance already exists; if not, it creates one.

Step 2: Hooking into WordPress

In the __construct() method, we connect our plugin to WordPress using Actions and Filters.

• admin_menu: To add our settings page to the dashboard.
• wp_enqueue_scripts: To load CSS on the frontend.
• admin_init: To register our settings in the database.
• admin_enqueue_scripts: To load specific CSS for our admin panel.

Step 3: Implementing the Settings API

WordPress provides a secure way to save data called the Settings API.

• Register: Use register_setting() to tell WordPress about cf7_styler_theme.
• Save: By pointing our admin form to options.php, WordPress handles the security (nonces) and database updates automatically.

Step 4: Building a Professional Admin UI

Instead of a boring dropdown, we built a Grid-based Card UI.

• The Logic: We loop through a $themes array to generate cards.
• The Interaction: A small JavaScript snippet handles the "selection" effect. When a user clicks a card, the hidden radio button inside is checked, and the "Active" class is toggled.
• The Styling: assets/css/admin.css uses Flexbox/Grid to make the layout responsive and modern.

Step 5: Frontend Style Delivery

This is where the magic happens for the user.

• The enqueue_frontend_styles() function retrieves the saved theme name using get_option().
• It checks if the corresponding CSS file exists in assets/css/.
• If found, it enqueues the style using wp_enqueue_style().

🎓 Key Concepts for Students

1. What is Enqueuing?

Never hardcode <link rel="stylesheet"> in WordPress. Always use wp_enqueue_style(). This allows WordPress to manage dependencies and prevents loading the same file multiple times.

2. The Power of get_option()

This simple function is the bridge between your admin settings and the frontend. It fetches data from the wp_options table. We use it here to decide which CSS file to load.

3. Separation of Concerns

Notice how the logic (PHP) is in cf-style.php while the presentation (CSS) is kept in the assets/ folder. This makes the code maintainable and easy to extend.

🚀 How to Add a New Theme

To teach students how to extend this plugin, ask them to:

1. Create a new CSS file in assets/css/your-theme.css.
2. Target the .wpcf7 class to change its background, borders, and fonts.
3. Add the new theme entry to the $themes array in the render_admin_page() method in cf-style.php.
4. (Optional) Add a color preview for the card in assets/css/admin.css.

Happy Coding! This project demonstrates how a small amount of PHP can leverage the massive power of the WordPress ecosystem.