Drag it, type on it, publish it.

Install and set up 2 minutes

You need WordPress 6.0 or newer and PHP 7.4 or newer. Wonder Editor works alongside any theme.

1. In your WordPress dashboard, open Plugins › Add New and click Upload Plugin.
2. Choose wonder-editor-1.0.0.zip, click Install Now, then Activate. You can also upload the wonder-editor folder to /wp-content/plugins/ by FTP.
3. A new Wonder Editor menu appears in the dashboard with Theme Builder, Popups, Saved Templates, Submissions and Settings.
4. Optional: open Wonder Editor › Settings to choose which post types can use the editor, set your global colours and fonts, decide role access, and paste API keys for Mailchimp, HubSpot and other integrations.

Tour of the editor

Open any page and click Edit with Wonder Editor. The screen has four areas.

• Top bar. Device switcher (desktop, tablet, mobile), undo and redo, Navigator, history, keyboard shortcuts, light or dark mode, Preview changes and the Publish or Update button.
• Sidebar. The Elements tab lists every widget with a search box. Select an element and the sidebar switches to its settings, split into Content, Style and Advanced tabs.
• Canvas. Your real page, rendered by WordPress. Hover to see an element's outline and handle. Click to select it.
• Navigator. A tree of sections, columns and widgets. Drag items to reorder, use the eye icon to hide one while you work, and right-click for more actions.

Build your first page

Pages are made of sections, which hold columns, which hold widgets. Use an Inner section when you need columns inside a column.

1. Click Add new section at the bottom of the canvas and pick a column structure in Select your structure.
2. Drag a Heading from the sidebar into the first column. A red line shows where it will land.
3. Click the heading text on the canvas and type your own. Select words to bring up the formatting toolbar for bold, italic and links.
4. Drag in a Text Editor, an Image and a Button. Set the button link in the Content tab.
5. To change order, drag an element by its handle, or drag it in the Navigator. Right-click any element to copy, paste, duplicate or delete it.
6. Click Save draft to keep working later, or Publish to make the page live.

Style and responsive editing

Every element has three tabs in the sidebar.

• Content holds the text, media, links and options for that widget.
• Style holds colours, typography, borders, shadows and hover states. Use the Normal and Hover toggle where it appears.
• Advanced is on every element: margin, padding, background, border, motion effects, sticky, responsive visibility, custom attributes and custom CSS.

Different values per device

Controls with a device icon next to their label are responsive. Switch the top bar to tablet or mobile and change the value: it applies only to that device and smaller, while desktop keeps its own. Use the Responsive section of the Advanced tab to hide an element on a device entirely.

Motion and sticky

In Advanced › Motion effects add an entrance animation, scroll effects such as parallax and fade, or mouse tracking and 3D tilt. Turn on Sticky to pin a header or sidebar while visitors scroll.

Site settings and global widgets

Open Site settings in the sidebar to manage Global colors and Global fonts. Every colour and typography control lets you pick one of them, so a brand change is a single edit.

• Global widgets. Right-click a styled widget and choose Save as global widget. Drop it anywhere from the Global widgets list. Editing one copy updates all of them. Choose Unlink from global to make a copy independent.
• Dynamic tags. Text, link, image and number controls can pull live data instead of typed values: post title, author, site name, the current user, ACF, Pods and Toolset fields, and WooCommerce product data.

Templates, undo and revisions

• Template library. Click Add template to browse Blocks, Pages and My templates, then click Insert.
• Save your own. Right-click a section and choose Save as template. It appears under My templates and in Wonder Editor › Saved Templates.
• Undo and history. Ctrl + Z undoes, Ctrl + Shift + Z redoes. The History panel lists every action so you can jump back several steps at once.
• Revisions. Each save creates a WordPress revision. Open History › Revisions and click Restore on any earlier version.

Theme Builder

Use the Theme Builder to replace parts of your theme with designs you build in the editor.

1. Go to Wonder Editor › Theme Builder and click Add New.
2. Pick a template type (Header, Footer, Single, Archive, Search results, 404 and others), give it a name and create it. New templates start as drafts, so nothing changes on your site yet.
3. Build the template. Theme widgets such as Site Logo, Nav Menu, Post Title and Post Content fill in with real content.
4. Open Display conditions and add Include rules (for example Entire site) and any Exclude rules. Exclusions win over inclusions.
5. Click Save & close, then Publish. The template now replaces your theme's version wherever its conditions match.

Popups

1. Go to Wonder Editor › Popups and click Add New.
2. Design the popup content, then open its settings to choose a layout: modal, slide-in, top bar, bottom bar or full screen.
3. Choose a trigger: on page load, after scrolling a set depth, on click, on exit intent or after inactivity.
4. Add rules to narrow who sees it: logged in or out, device, referrer, number of page views or sessions, and how many times to show it.
5. Set display conditions for which pages it can appear on, then publish.

Forms

1. Drag the Form widget onto the page and add fields in the Content tab: text, email, phone, number, date, select, radio, checkbox, file upload, hidden and more.
2. Mark fields as required and set validation. Add Step (page break) fields to split a long form into a multi-step form.
3. Use Conditional logic on any field to show it only when an earlier answer matches.
4. Under Actions after submit, choose what happens: save the submission, send an email, redirect, call a webhook, open a popup, or send to Mailchimp, HubSpot, ActiveCampaign, ConvertKit, Zapier, Slack or Discord.
5. Read entries in Wonder Editor › Submissions and export them as CSV.

Spam protection is on by default: nonce checks, a hidden honeypot field, a time trap for instant bot submissions and a rate limit.

WooCommerce

With WooCommerce active, the Theme Builder offers Single product, Product archive, Cart, Checkout and My Account template types.

1. Create a Single product template and drag in Product Images, Product Title, Product Price, Product Rating, Add To Cart, Product Meta and Product Data Tabs.
2. Set its display conditions to all products or to a product category.
3. Add a Menu Cart widget to your header template so shoppers always see their cart.
4. Use the Products widget on any page to show a grid of products filtered by category, tag or sale status.

Roles and access

In Wonder Editor › Settings, set an access level for each WordPress role.

Keyboard shortcuts

On a Mac, use ⌘ wherever you see Ctrl.

For developers

Add your own widgets by extending WonderEditor\Widget_Base and registering on the wonder_editor/widgets/register action. Widgets render on the server in both the editor and the front end, so there is no JavaScript template to write. Responsive controls, selectors and dynamic tags work the same as in built-in widgets. The full reference is in docs/developer-widgets.md inside the plugin.

add_action( 'wonder_editor/widgets/register', function ( $widgets ) {
    require_once __DIR__ . '/class-hello-widget.php';
    $widgets->register( new My_Plugin\Hello_Widget() );
} );

class Hello_Widget extends \WonderEditor\Widget_Base {
    public function get_name()     { return 'hello'; }
    public function get_title()    { return __( 'Hello', 'my-plugin' ); }
    public function get_category() { return 'basic'; }

    protected function register_controls() {
        return array(
            array( 'name' => 'text', 'type' => 'text', 'label' => 'Text', 'default' => 'Hello!' ),
        );
    }

    protected function render( array $settings, array $element ) {
        return '<p>' . esc_html( $settings['text'] ) . '</p>';
    }
}