Konrad's Editable HTML

وەسف

Your custom HTML and page template parts, client-editable in one click.

Your templates are full of sections clients can’t touch. The hero, the intro block, the call to action – all sitting in PHP, so every small text change means a message to you. Move them out, one at a time.

Your layout stays exactly as you built it. Clients change only the parts you chose.

Built on core blocks. Deactivate the plugin – your content stays. On 7.1+, it even stays editable.

Two ways to use it

1. A section on a page

1. Add a Custom HTML block and paste your section, <style> included.
2. Click Make editable in the block toolbar.
3. Tick the parts clients may change.
4. Click Lock HTML before you hand the site over.

Clients click the text and type. Nothing else moves.

2. A section stuck in a PHP template

For classic and hybrid themes, where templates are PHP files.

1. Go to Appearance → Patterns and add a new one.
   Can’t see Patterns in your backend? Scroll down for tips.
2. Add a Custom HTML block and paste the markup from your template.
3. Click Make editable, tick the parts, lock the HTML.
4. Save. Then open Use in a template in the sidebar and click Copy code.
5. Paste that code into your template, in place of the old markup.

The section looks exactly the same, and clients edit it under Patterns instead of messaging you.

The code you get is core WordPress – get_page_by_path() and do_blocks(), nothing of this plugin. It finds the pattern by slug, not by ID, so it survives a move from staging to live. Deactivate the plugin and the template keeps working.

Can’t find the Patterns screen?

• It lives at /wp-admin/edit.php?post_type=wp_block. That is the screen this plugin works on.
• On a block theme, Appearance → Patterns opens the site editor instead. Use the address above.
• The menu needs the edit_theme_options capability. Editors and authors don’t have it.
• Or start in the post editor: select your blocks, open the options menu, choose Create pattern.

The plugin’s How to use page links straight there. Find it next to Activate and Deactivate on your Plugins screen.

What you get

• One click. Select your Custom HTML block, click Make editable.
• Your layout, untouched. The markup and CSS stay exactly as you wrote them.
• You pick what’s editable. Headings, paragraphs, links, images, lists – tick what clients may change.
• Use it in a PHP template. One line of core PHP, copied for you.
• Core blocks on WordPress 7.1+. Plain WordPress, no plugin needed to keep editing.
• A fallback block on 6.6-7.0. Same result on older sites.
• Examples and import. Start from a hero, cards, list or calculator, or import .html/.css/.js or a .zip.
• Lock HTML. Freeze the setup before hand-over.
• No lock-in. Deactivate the plugin – your pages look the same.
• No React, no npm, no build step. Plain PHP and JavaScript you can read.

Who it’s for

• Designers: keep your own HTML and CSS. No page builder, no React.
• Freelancers: hand over sites clients can edit without breaking the design.
• Agencies: turn custom sections into editable content without a block build pipeline.
• Clients: click the text, type, save. That’s it.

Native first

On WordPress 7.1 and newer, the Custom HTML block can hold editable core blocks inside static HTML. Konrad’s Editable HTML finds the parts that can be edited and sets them up for you. The result is plain WordPress: headings and paragraphs are core blocks, no plugin needed to keep editing them.

Every conversion is checked by WordPress’s own parser first. If anything would not work, nothing is changed.

On older WordPress (6.6 to 7.0), “Make editable” uses the plugin’s lightweight Editable HTML block instead.

Make all editable

Links, images and lists can’t be kept exactly by core’s editable slots, so they stay fixed at first. Click Make all editable (in the message, or in the toolbar afterwards) and the Editable HTML block takes over:

• Text and links: type right on the page.
• Images: click to replace, alt text in the sidebar.
• Lists: move, duplicate, add and remove cards, team members or list items.
• Icons at the start of a line stay fixed; only the text is editable.
• Start with an example (hero, cards, list with icons, calculator), import files, or paste HTML.
• Import: pick your .html, .css and .js files, or a .zip (a CodePen export works). Files are read in your browser; nothing is uploaded.

You stay in control

• Tick exactly which parts clients can change. Everything else stays fixed.
• Lock HTML before hand-over: the setup tools disappear, so nobody changes the design by accident. Or leave it open for full flexibility.
• People who can add custom HTML (usually administrators and editors) set up blocks. Everyone who can edit the page can change the editable parts.

No lock-in

Both modes save finished HTML into the page. Deactivate or delete the plugin and your pages look exactly the same.

Try it in 5 minutes

Open the live demo in your browser, no install: Try it live

Free and open source

Code, issues and ideas on GitHub. If it saves you time, a GitHub star or a review here helps others find it.

Built by Konrad Sroka and Claude AI.

Thanks, WordPress community.