Description

Re{code} Front HTML Editor adds a fixed toolbar to the frontend of your WordPress site (visible only to users who can edit the current post). Click Edit, modify the HTML directly in the editor, then hit Save & Preview — the page updates in place with no reload required.

Features

Live on-page editing — no page reload, no switching to the backend
Lightweight plain textarea editor — no external dependencies, works everywhere
Format toolbar — Bold, Italic, Strikethrough, Highlight, Inline code, H2, H3, Paragraph, Blockquote, UL, OL, Insert link, Insert image
Keyboard shortcuts — Ctrl+E (open/close), Ctrl+S (save), Escape (cancel), Ctrl+B/I/K
Custom Snippets — save any HTML block as a toolbar button; use {|} to mark where the cursor lands after inserting
Element Picker — click any element on the page to discover its CSS selector, navigate ancestor breadcrumbs, and copy it to Settings
Dark and Light themes configurable in Settings Front HTML Editor
Configurable content selector — choose from popular theme defaults or enter any custom CSS selector
Secure — nonce-verified AJAX, edit_post capability check per-post, content sanitized with wp_kses_post
Works with Twenty* themes, Astra, GeneratePress, Kadence, Divi, OceanWP, Flatsome, and most other themes

How It Works

Visit any post or page on the frontend while logged in as an editor or administrator
The ✏️ HTML Editor toolbar appears at the top of the page
Click Edit — the plugin loads the raw post_content from the database into the editor
Edit the HTML, use the format toolbar or keyboard shortcuts
Click 💾 Save & Preview — your changes are saved and the page content updates instantly
Use 🎯 Pick element if the editor can’t find the content area — click any block to get its CSS selector

Custom Snippets

Go to Settings Front HTML Editor Custom Snippets to add reusable HTML blocks.
Each snippet gets its own button in the editor toolbar.
Use {|} in the HTML code to control where the cursor appears after the snippet is inserted.

Example:

<div class="see-also-block"><div class="see-also-title">See also:</div><ul><li><a href="{|}"></a></li></ul></div>

Security

AJAX requests are nonce-verified
Every action checks current_user_can('edit_post', $post_id) for the specific post
Saved content passes through wp_kses_post
The toolbar is never rendered for unauthenticated users or users without edit rights for the current post

Installation

Upload the recode-front-html-editor folder to the /wp-content/plugins/ directory
Activate the plugin through the Plugins menu in WordPress — you will be redirected to Settings automatically
Configure the content selector and editor theme
Visit any post or page on the frontend — the toolbar will appear for users with edit rights

FAQ

The editor doesn’t find the content area on my theme. What do I do?: Use the 🎯 Pick element button in the toolbar, click on your content area, then copy the selector to Settings Front HTML Editor Custom selector.
Which user roles can see the editor toolbar?: Any user who has the edit_post capability for the currently viewed post. This typically includes Editors and Administrators, and Authors for their own posts.
Can I use this with the block editor (Gutenberg)?: Yes. The plugin edits the raw post_content stored in the database. For classic posts this is regular HTML. For Gutenberg posts this is HTML with block comments — you can edit it, but be careful not to break block markup. For block-based themes, use .wp-block-post-content as the selector.
Does this work on archive pages, home pages, or WooCommerce pages?: No — the editor only activates on singular posts and pages (is_singular()).

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Re{code} Front HTML Editor” is open source software. The following people have contributed to this plugin.

re{code}commerce

Translate “Re{code} Front HTML Editor” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

3.6.9

Added: redirect to Settings page on plugin activation
Added: Settings link in the Plugins list
Fixed: Ctrl+S now prevents browser “Save Page” dialog when editor is focused

3.6.8

Changed: CodeMirror replaced with a plain textarea — no external dependencies, lighter and faster
Removed: Code/Plain toggle button — single editor mode only
Improved: snippet cursor positioning now fully reliable

3.6.0

Changed: CodeMirror loaded from WordPress core instead of CDN — no remote files
Added: Plain textarea toggle mode
Added: Custom dark/light color themes

3.5.2

Fixed: CodeMirror and snippet JS assets now loaded via proper wp_enqueue functions (WordPress.org requirement)

3.5.1

Fixed: removed load_plugin_textdomain() — WordPress 4.6+ loads translations automatically
Fixed: escaped output in field_editor_theme() to satisfy Plugin Check requirements
Updated: Tested up to WordPress 6.9

3.5.0

Added: Custom Snippets — add any HTML block as a toolbar button via Settings
Added: {|} cursor marker — controls where the cursor lands after snippet insert
Added: Snippet Tips card in Settings sidebar with usage example
Added: Distinct visual style for snippet buttons in the editor toolbar (amber color)
Changed: Format toolbar HTML now built dynamically to support variable number of snippet buttons

3.4.3

Changed: internal prefix renamed from rfie to rfhe (option key, nonce, AJAX actions, CSS/JS identifiers, admin page slug)
Changed: plugin description updated — more accurate wording
Changed: Plugin URI and Author URI now point to the dedicated plugin page on recodecommerce.com
Added: footer block on Settings page (Plugin Page / GitHub / Contact links)
Added: PLUGIN_URL and GITHUB_URL constants for easy maintenance

3.4.2

Security: ajax_get_content now verifies edit_post($post_id) per-post
Fixed: body { padding-top } no longer applies globally — only when toolbar is active
Fixed: Pick button colors now respect dark/light theme setting
Improved: All output properly escaped with esc_html_e(), esc_attr_e(), esc_url()
Added: uninstall.php for clean removal

3.4.0

Added Element Picker with ancestor breadcrumb navigation
Added format toolbar (Bold, Italic, Strikethrough, Highlight, code, headings, lists, link, image)
Added keyboard shortcuts (Ctrl+B, Ctrl+I, Ctrl+K, Ctrl+S, Escape)
Added dark/light theme support
Added configurable content selector in Settings

3.0.0

Initial public release