Getting started

Quick start

Install the plugin, connect your site, annotate your markup.

1. Install the plugin

Download leiho.zip (latest version, also listed on the releases page) and upload it in Plugins → Add New → Upload Plugin. Later versions show up in Plugins like any other update. Requires WordPress 6.0+ and PHP 7.4+. Model your content with Leiho Collections, or keep your ACF fields (free or Pro).

2. Point it at your site

Leiho → Settings: your front-end URL, the post types editors may open, and the URL pattern for each one (/{slug} by default; the front page maps to /).

3. Allow wp-admin to frame your site

Send this header from your front end (Leiho → Get started shows it with your domain filled in, and checks it for you):

code
Content-Security-Policy: frame-ancestors 'self' https://your-wordpress.example

4. Add the bridge and annotate your markup

React (Next.js, Remix, Vite…)

bash
npm install leiho
jsx
// Root layout: app/layout.tsx, root.tsx, App.tsx…
import { LeihoBridge } from 'leiho/react';

<LeihoBridge wpOrigin="https://your-wordpress.example" />

Any other site (Astro, Nuxt, SvelteKit, HTML): copy leiho-bridge.js (downloadable from Leiho → Get started) to your public folder and add to <head>:

html
<script>
  // Loads the bridge only inside the editor: visitors get ~150 bytes, not 10 KB.
  if (window.self !== window.top) {
    var s = document.createElement('script');
    s.src = '/leiho-bridge.js';
    s.setAttribute('data-wp-origin', 'https://your-wordpress.example');
    document.head.appendChild(s);
  }
</script>

Then annotate what should be editable:

html
<main data-wp-post="12">
  <h1 data-wp-field="_title">About us</h1>
  <p data-wp-field="intro">We build things.</p>
  <img data-wp-field="hero_image" src="/hero.jpg" alt="" />
</main>

Back in wp-admin, Leiho → Get started → Test the connection confirms that the bridge answers. You're done. Step-by-step setups for each framework are in examples/.

Using a coding agent? Leiho → Get started gives you ready-to-paste prompts and the full integration contract (plugin/docs/agent-instructions.md) for Claude Code, Cursor, Codex and the like.

Something unclear on this page? Tell us →