---
title: "Leiho for HTML, PHP and others: visual editing on WordPress"
description: "Plain HTML, PHP, Eleventy, Hugo: copy the bridge to your public folder and write the attributes by hand."
url: https://leiho.dev/frameworks/html
lang: en
updated: 2026-11-04
---
HTML, PHP and others · Plain HTML, PHP, Eleventy, Hugo…

# Visual editing for any site, on WordPress.

Plain HTML, PHP, Eleventy, Hugo: copy the bridge to your public folder and write the attributes by hand.

1. 01
   ## Allow the editor to display your site
   Set the header in your server configuration.
   ```
   add_header Content-Security-Policy "frame-ancestors 'self' https://cms.example.com" always;
   ```
   ```
   <IfModule mod_headers.c>
     Header always set Content-Security-Policy "frame-ancestors 'self' https://cms.example.com"
   </IfModule>
   ```
   ```
   Content-Security-Policy: frame-ancestors 'self' https://cms.example.com
   ```
2. 02
   ## Add the bridge
   Put leiho-bridge.js in the site’s public folder, then add this code to the layout’s head.
   ```text
   <script>
     if (window.self !== window.top) {
       var s = document.createElement('script');
       s.src = '/leiho-bridge.js';
       s.setAttribute('data-wp-origin', 'https://cms.example.com');
       document.head.appendChild(s);
     }
   </script>
   ```
3. 03
   ## Read the content
   Read the content from these URLs, at build time or on each request.
   ```
   # All published content, in one request
   GET https://cms.example.com/wp-json/leiho/v1/export
   
   # One page, by its path
   GET https://cms.example.com/wp-json/leiho/v1/content?path=/about
   ```
   Building with Node? npm install leiho gives you loadLeihoContent from leiho/content.
4. 04
   ## Mark what editors can change
   Spread field() on each element editors should change. Always render the element, even when its value is empty.
   ```HTML
   <section data-wp-post="12" data-leiho-section="Hero">
     <h1 data-wp-field="hero_title">…</h1>
     <img data-wp-field="hero_image" src="…" alt="…">
     <article data-wp-field="cards.0.title">…</article>
   </section>
   ```

Replace https://cms.example.com with your WordPress address. In wp-admin, **Leiho → Get started** shows these steps with your address filled in, checks each one, and can give the whole setup to your coding agent as one prompt.

Other frameworks

- [**Next.js**](https://leiho.dev/frameworks/nextjs)
- [**Astro**](https://leiho.dev/frameworks/astro)
- [**Nuxt**](https://leiho.dev/frameworks/nuxt)
- [**SvelteKit**](https://leiho.dev/frameworks/sveltekit)
- [**React**](https://leiho.dev/frameworks/react)

## Edit the real site.

Free and open source. Try it on a real WordPress, in your browser.

- [Try it in your browser](https://leiho.dev/try)
- [View on GitHub](https://github.com/pixelersagency/leiho)