Reimagine WordPress Development

PROWIND is a revolutionary development framework for WordPress, meticulously engineered for developers and agencies who demand efficiency, performance, and creative freedom.

At its core, PROWIND unshackles you from the rigid constraints of traditional themes. It introduces a fluid, code-centric paradigm built upon powerful Templates and modular Components. By integrating a sophisticated live editor, granular asset management, and an AI-powered coding assistant, PROWIND transforms the entire development lifecycle. It stands as the definitive, modern alternative to page builders, granting you absolute authority over your site's architecture, markup, and performance.

The PROWIND Philosophy

• Developer-Centric by Design: PROWIND is crafted for professionals who write code. We don't abstract away HTML, CSS, or PHP. Instead, we provide a robust, professional-grade toolkit to write, manage, and deploy your code with precision and control directly within WordPress.
• Performance as a Principle: By eliminating bloated themes and empowering you with conditional asset loading, PROWIND is architected for speed. You build lean, lightning-fast websites because you only load what you need, precisely when you need it.
• Unleashed Flexibility: From crafting custom templates for any post type or archive to building a library of reusable components, PROWIND dissolves the conventional boundaries of WordPress theming. Your creativity is the only limit.
• AI as an Accelerator: Our integrated AI is a "pro-code" catalyst, not a "no-code" crutch. It's your intelligent partner for scaffolding components, refactoring code, and translating designs into pristine markup, dramatically boosting your productivity without ever compromising on code quality.

Quick Start Guide

Launch your first PROWIND-powered site in minutes. This guide will walk you through the essential first steps.

1. Installation & The Blank Slate

Upon activation, PROWIND creates and activates a minimal theme named prowind-blank-theme. This is a core feature, providing a clean, conflict-free canvas for your work. Your previously active theme is safely stored and will be restored if you deactivate PROWIND.

2. Activate Your License

An active license is required to unlock the editor, save settings, and receive plugin updates.

1. Navigate to PROWIND → License in your WordPress admin area.
2. Enter your license key.
3. Click "Activate License". The status should turn green and display "Active".

3. Configure AI (Highly Recommended)

To leverage the powerful code generation features, connect your OpenAI account.

1. Navigate to PROWIND → AI Settings.
2. Enter your OpenAI API Key.
3. Add Global Custom Instructions to tailor the AI's output. For instance: Always use Tailwind CSS classes. Never use @apply. Code must be semantic and accessible.
4. Click "Save API Settings". The plugin will validate your key.

4. Create Your First Template

Templates are the architectural blueprints of your site.

1. Navigate to PROWIND → Templates → Add New.
2. Name your template, for example, "Blog Post Layout".
3. In the "Template Settings & Structure" section, assign it to the "Post" post type.
4. Add a Code Block for your site header, an Inner Content block, and another Code Block for your footer. The "Inner Content" block will automatically render the specific content of each post.
5. Click Publish. All your single posts will now use this custom layout.

License Management

Your PROWIND license key enables all premium features, including the live editor, AI tools, and automatic updates. Manage your license at PROWIND → License.

Activating Your License

1. Go to the PROWIND → License page.
2. Paste your license key into the input field.
3. Click Activate License. The system will verify the key, and the status indicator will update to "Active" on success, showing your plan details.

Deactivating Your License

Deactivate a license to free up an activation slot, for instance, when moving a site to a new domain or decommissioning a project.

1. Navigate to the PROWIND → License page.
2. Click the Deactivate License button and confirm.

License Statuses Explained

• Active: Your license is valid. All features are enabled.
• Inactive: The default state. No license key has been activated.
• Expired: Your license has expired. Please renew to restore pro features and updates.
• Invalid: The entered key is incorrect.
• Disabled: The license has been deactivated from our end due to a billing issue or refund. Core functionality will be restricted.
• Grace Period: For new, unlicensed installations, PROWIND operates in a fully-functional 7-day trial mode before features are restricted.

Templates Engine

Templates are the heart of PROWIND, giving you complete control over your site's structure by replacing the standard WordPress theme hierarchy. You can manage them under PROWIND → Templates.

Template Configuration

When creating a template, you have several key settings:

• Assignments: Dictate where your template is used. You can assign it to one or more post types (e.g., Posts, Pages) or to special archive views like the Front Page, Blog Index, Search Results, and 404 pages.
• Parent Template: This powerful feature enables nested layouts. You can create a "Master Layout" template with a header and footer, then create child templates (e.g., "Page Layout", "Post Layout") that render inside the "Inner Content" block of the master.
• Container Class: Define a global wrapper class for your template content, e.g., max-w-7xl mx-auto px-4 sm:px-6 lg:px-8. This can be disabled for full-width designs.

Template Structure: Blocks

A template is constructed from a sequence of re-orderable blocks:

• Code Block: The fundamental building block. It holds your custom HTML, PHP, CSS, and JS. A typical page might have a Code Block for the header, another for a hero section, and a third for the footer.
• Inner Content: A special placeholder block. Its function changes based on context:
  • In a parent template, it marks the injection point for the child template's entire content.
  • In a regular template assigned to a post, it renders the content from that specific post's PROWIND Editor.

Components

Components are modular, self-contained, and reusable blocks of code. They are the ideal solution for elements you use repeatedly, such as call-to-action sections, testimonials, author bios, or pricing tables.

Manage your component library at PROWIND → Components.

Creating and Using Components

When you add a new component, you give it a title for your reference. PROWIND automatically generates a unique slug (e.g., primary-call-to-action) which is used to identify it.

You can then use the PROWIND Editor to add HTML, CSS, and JS. Once saved, the component can be inserted anywhere using its shortcode:

You can also render it directly from your template's PHP code:

<?php echo do_shortcode(''); ?>

Component Library Portability

PROWIND features a robust Import/Export tool, allowing you to move your component libraries between projects effortlessly. This is a game-changer for agencies and developers maintaining multiple sites.

• Export: Select components or export all of them, including their categories, into a single, portable JSON file.
• Import: Upload a PROWIND JSON file. You can choose to overwrite existing components with the same ID, making it simple to distribute updates to your component library.

Assets Manager

The Assets Manager (PROWIND → Assets) is your central command for managing all CSS, JavaScript, and font files, giving you the power to optimize site performance with surgical precision.

Managing Your Assets

• Asset Types: Upload local CSS/JS files, add external files from a CDN, or manage local and web fonts (e.g., Google Fonts).
• Load Order: The order of assets in the list dictates their enqueue order on the front-end. Drag and drop assets to manage dependencies, ensuring libraries load before the scripts that depend on them.

Conditional Loading

This is PROWIND's key performance feature. For each asset, you can define:

• Load On: Choose to load an asset globally (Entire Site) or only on specific pages (Specific Posts/Pages). This prevents loading unnecessary code on pages that don't need it.
• Load In (for CSS/JS): Enqueue the asset in the HTML <head> or just before the closing </body> tag (footer). Loading non-critical JavaScript in the footer is a best practice for faster perceived page loads.
• Apply To (for Fonts): Automatically apply the font's font-family CSS to all headers (h1-h6) and/or the main body text, saving you from writing boilerplate CSS.

The PROWIND Editor

The PROWIND Editor is an immersive, real-time development environment for posts, pages, and components. It bridges the gap between writing code and seeing the result, creating a fluid and intuitive workflow.

The Interface

The editor features a dual-panel layout:

• Code Panel: Houses the powerful CodeMirror editors for HTML/PHP, CSS, and JS.
• Visual Preview: An interactive iframe that renders your code instantly. It's not just for viewing; you can right-click elements to perform actions.

Key Features & Controls

• Responsive Modes: Instantly switch the preview between desktop, tablet, and mobile widths.
• Layout Toggle: Switch the code editor between a multi-panel split view and a single-panel tabbed view to suit your preference.
• Interactive Context Menu: Right-clicking an element in the preview opens a powerful menu.
  • Cut / Copy / Paste / Delete / Duplicate: Perform direct DOM manipulations that reflect immediately in the code editor.
  • Focus in Code: Instantly jumps to and highlights the selected element in the HTML editor—invaluable for navigating complex markup.
  • Unpack Component: Replaces a component's shortcode with its raw HTML, CSS, and JS, allowing for direct, one-off customization.
  • Add Component & AI Generate: Quick access to the Component Picker and AI Generator modals.
• Utility Side Panels: Access powerful tools from the right edge of the screen.
  • Structure: A live, interactive DOM tree. Click to navigate, drag to reorder elements.
  • Images: A list of all images on the page for quick management.
  • History: Access and restore previous saved versions of your code.

AI Integration

PROWIND's AI tools act as your expert coding assistant, designed to accelerate development by automating repetitive tasks and scaffolding new components with intelligent, context-aware suggestions.

AI Configuration

Before first use, configure the AI under PROWIND → AI Settings.

• OpenAI API Key: A valid key from your OpenAI account is required.
• Global Custom Instructions: This is a critical feature. Provide a persistent "system prompt" to guide all AI interactions. Use it to define your brand's voice, enforce a CSS framework (e.g., "Use Tailwind CSS v3"), or mandate coding standards (e.g., "All generated code must be semantic and accessible.").

The AI Generation Workflow

The AI generator is accessed from the right-click context menu in the PROWIND Editor.

1. Right-click in the visual preview and select "AI Generate". The element you clicked on will provide context.
2. Write a clear prompt. Be specific. For example: "Refactor this section to use a flexbox layout with a gap of 4," or "Generate a pricing table with three tiers: Basic, Pro, and Enterprise."
3. Select an AI Model. Choose a model appropriate for your task—advanced models for complex code, simpler models for text editing.
4. (Optional) Add a Reference Image. For vision-capable models like GPT-4o, upload a mockup. The AI will use it as a strong visual guide for generating the corresponding code.
5. Click Generate. The AI-generated code will instantly replace the content in your editor, ready for your review.

Revision History

PROWIND features a dedicated revision history system for all code created within its editor, kept separate from standard WordPress post revisions for better code management.

How It Works

• A new revision is created automatically every time you click "Save Changes".
• It stores a complete snapshot of your HTML/PHP, CSS, and JS.
• The system retains the last 20 revisions per item, automatically purging the oldest one when a new one is created. This limit can be changed via the prowind_max_editor_history_entries filter.

Restoring a Revision

Access the history from the History Panel in the PROWIND Editor.

1. Open the History Panel to see a timestamped list of saved revisions.
2. Click the "Restore" button next to the desired version.
3. After confirming, the contents of your code editors will be replaced with the selected revision.
4. The restored code is not yet permanent. You must click "Save Changes" to commit the restored version.

Shortcodes Reference

PROWIND uses a simple but powerful shortcode system to embed dynamic functionality.

This is the primary shortcode used to render a PROWIND Component anywhere in your site's content.

Usage

Parameters

• name (required): The unique ID (slug) of the component to be rendered. This ID is automatically generated from the component's title.

Hooks & Filters

Leverage WordPress hooks and filters to extend and customize PROWIND's core functionality for advanced integrations and workflows.

Filters

prowind_admin_plugin_page_hooks

Modify the list of screen IDs that PROWIND considers its own admin pages. This is useful for managing script compatibility with other plugins.

<?php
add_filter('prowind_admin_plugin_page_hooks', function($hooks) {
    $hooks[] = 'toplevel_page_my-custom-page';
    return $hooks;
});
?>

prowind_special_page_handlers

Register new "special page" types for template assignment, ideal for integrating with plugins like WooCommerce.

<?php
add_filter('prowind_special_page_handlers', function($handlers) {
    if (function_exists('is_shop')) {
        $handlers['woocommerce_shop'] = 'is_shop';
    }
    return $handlers;
});
?>

prowind_available_special_page_types

Provide a user-friendly label for your custom special page type, which will appear in the template assignment UI.

<?php
add_filter('prowind_available_special_page_types', function($types) {
    $types['woocommerce_shop'] = __('WooCommerce Shop Page', 'your-text-domain');
    return $types;
});
?>

prowind_max_editor_history_entries

Adjust the number of code revisions stored per item. The default is 20.

<?php
add_filter('prowind_max_editor_history_entries', function($limit) {
    return 50;
});
?>