Génération IA

1. L'IA génère un site avec les attributs

Pour : utilisateurs avec un design (Figma, maquette, référence)

Partagez le lien de cette page avec votre assistant IA avec votre design. L'IA génère du HTML avec les attributs déjà en place. Vous vérifiez le rapport, demandez des corrections et générez le thème.

1. Donnez à votre IA le lien vers ce guide + votre design (URL Figma, captures, référence)
2. L'IA génère du HTML avec tous les attributs selon les règles
3. Vérifiez le rapport d'attributs — ajustez si nécessaire
4. Générez le thème WordPress via ThemeForge

2. L'IA ajoute des attributs au HTML existant

Pour : développeurs avec un HTML prêt (export Webflow, template, codé à la main)

Vous avez déjà du HTML sans attributs ThemeForge. Partagez ce guide avec votre IA et demandez-lui d'analyser le HTML et de placer les attributs.

1. Donnez à votre IA le lien vers ce guide + vos fichiers HTML
2. L'IA analyse la structure et ajoute des attributs aux textes, images, liens
3. Vérifiez le rapport — l'IA ne sait pas toujours quels éléments sont décoratifs
4. Lancez la validation, corrigez les problèmes, générez le thème

3. Placement manuel dans Webflow Designer

Pour : utilisateurs Webflow expérimentés préférant un contrôle total

Ajoutez des attributs personnalisés directement dans Webflow Designer (Paramètres de l'élément → Custom Attributes). Exportez le site et validez avant de générer le thème.

1. Sélectionnez un élément dans Webflow → Settings → Custom Attributes
2. Ajoutez le nom de l'attribut (ex. fld-text) et la valeur (ex. Heading)
3. Exportez le site (Code Export ou .webflow.io)
4. Lancez la validation et générez le thème

Prompt A: Add attributes to existing HTML

Use this when you already have an HTML site and need to add ThemeForge attributes.

I have a finished HTML website that I want to convert into a WordPress theme with an editable admin panel, using ThemeForge.

Read the placement rules and follow them exactly. Start here — it names the rule modules and tells you what to do first:
https://themeforge.pro/ai
Always pull the `core` module; if you are generating the site from scratch, pull `build` too. Then add what this site needs (pages, blog, cpt, woocommerce, deploy).

Then add ThemeForge attributes to every piece of editable content in my HTML:
- Each visual section = a tab + group pair; short headings/labels = text, paragraphs and long wrapping headings = textarea, images on  tags, links as a URL + text pair.
- Repeating cards (features, team, FAQ) = a repeater with 2+ rows.
- Header, footer, navigation, logo and contacts = site-wide options.
- If my site is multilingual, mark the language switcher with wp-menu="Language" and do NOT hardcode any visible text — every label must be a field (each language has its own value).
- Keep image/file paths as they are; do not skip any visible text.

[Add your specific requirements here: which pages, WooCommerce / blog support, languages, etc.]

When done, follow the Final Delivery steps: create the theme-options page with ALL option fields, serve the files locally, and give me the complete list of page URLs to paste into ThemeForge.

Prompt B: Generate HTML with attributes from scratch

Use this when you want the AI to create an HTML site from a design (Figma, screenshot, description) with ThemeForge attributes already included.

I need you to generate an HTML website with ThemeForge attributes already in place, ready for WordPress theme generation.

Read the placement rules and follow them exactly. Start here — it names the rule modules and tells you what to do first:
https://themeforge.pro/ai
Always pull the `core` module; if you are generating the site from scratch, pull `build` too. Then add what this site needs (pages, blog, cpt, woocommerce, deploy).

Here is my design: [ATTACH YOUR FIGMA LINK / SCREENSHOTS / DESCRIPTION]

Generate clean, semantic HTML + CSS and place ThemeForge attributes on all editable content as you build each section (not as a separate pass):
- Each section = a tab + group pair; text vs textarea by line count; images on ; links as a URL + text pair; repeating cards as a repeater with 2+ rows.
- Header/footer/navigation/contacts = site-wide options.
- For a multilingual site, mark the language switcher with wp-menu="Language" and keep every visible string as a field (no hardcoded text).
Use real placeholder content (not lorem ipsum) so data import populates real fields.

[Add your specific requirements here: colors, fonts, number of pages, WooCommerce / blog, languages, etc.]

When done, follow the Final Delivery steps: create the theme-options page with ALL option fields, serve the files locally, and give me the complete list of page URLs to paste into ThemeForge.

Sections et onglets

fld-tab doit être sur un <div> vide séparé, PAS sur le même élément que fld-group. Placez-le en tant que frère AVANT le groupe.

<!-- ONE wp-fields-group per page on <body> -->
<body wp-fields-group="Home Page">

  <!-- Tab = empty sibling BEFORE the group -->
  <div fld-tab="Hero" wp="delete-element" class="tab-div"></div>
  <section fld-group="Hero" class="hero">
    <h1 fld-text="Heading">Welcome</h1>
    <p fld-area="Description">...</p>
  </section>

  <div fld-tab="Features" wp="delete-element" class="tab-div"></div>
  <section fld-group="Features" class="features">
    ...
  </section>

</body>

Liens — toujours une paire

Chaque lien DOIT avoir à la fois un attribut lien et un attribut texte, sous DEUX noms — fld-link="X" sur <a>, fld-text="X text" sur un <div> enfant. Un seul nom pour les deux fait qu'un champ alimente l'URL et le libellé. Téléphone/email : opt-phone-link / opt-email-link seuls — un attribut remplit le href et le texte visible. Exception : liens icônes sans texte visible.

<!-- CORRECT: fld-link on <a>, fld-text on child, two names -->
<a fld-link="CTA" href="/shop" class="btn w-inline-block">
  <div fld-text="CTA text">Shop Now</div>
</a>

<!-- Phone/email: one attribute fills both href and text -->
<a opt-phone-link="Phone" href="tel:...">+1 234 567</a>

Images

fld-image va UNIQUEMENT sur les balises <img>. fld-bg-image sur tout élément avec image de fond.

<img fld-image="Hero Image" src="images/hero.jpg" alt="Hero" />
<div fld-bg-image="Background" style="background-image:url('img/bg.jpg')"></div>

Options du site

Les éléments sur chaque page (téléphone, email, logo, adresse) doivent utiliser opt-* au lieu de fld-*.

<!-- Header: site-wide, use opt-* -->
<img opt-image="Logo" src="images/logo.png" />

<!-- Navigation: a repeater of link + caption rows (NOT wp-menu) -->
<nav opt-loop="Nav links" class="nav">
  <div class="nav-item">
    <a opt-link="Link" href="/about" class="nav-link w-inline-block">
      <div opt-text="Link text">About</div>
    </a>
  </div>
  …
</nav>

<!-- Footer: contacts — one attribute each -->
<a opt-phone-link="Phone" href="tel:...">+1 234 567</a>
<a opt-email-link="Email" href="mailto:...">info@site.com</a>
<p opt-text="Address">123 Main St</p>

Menus

<!-- Navigation: an opt-loop of link + caption rows (preferred) -->
<nav opt-loop="Nav links" class="nav">
  <div class="nav-item">
    <a opt-link="Link" href="/" class="nav-link w-inline-block">
      <div opt-text="Link text">Home</div>
    </a>
  </div>
  <div class="nav-item">
    <a opt-link="Link" href="/about" class="nav-link w-inline-block">
      <div opt-text="Link text">About</div>
    </a>
  </div>
</nav>

<!-- Language switcher (Polylang): use wp-menu -->
<div wp-menu="Language" class="lang-switcher">
  <a href="/en" class="lang-link">EN</a>
  <a href="/ua" class="lang-link">UA</a>
</div>

Sélecteur de langue — la recette

<!-- Dropdown: toggle shows the CURRENT language (an options field),
     the list is a connected wp-menu="Language" (locales injected) -->
<div opt-hide="Hide language switcher" class="lang-drop w-dropdown">
  <div class="lang-dt w-dropdown-toggle">
    <div opt-text="Current language">UA</div>
  </div>
  <nav class="lang-drop-list w-dropdown-list">
    <div wp-menu="Language" class="lang-switcher">
      <a href="/en"><div>ENG</div></a>
      <a href="/ru"><div>РУС</div></a>
    </div>
  </nav>
</div>

<!-- Simple variant: a flat list of language links -->
<ul wp-menu="Language" class="header__languages">
  <li><a href="/">UA</a></li>
  <li><a href="/ru/">RU</a></li>
  <li><a href="/en/">EN</a></li>
</ul>

Les champs globaux opt-* (téléphone, adresse, libellés de navigation) sont aussi par langue, donc l’en-tête/pied de chaque langue peuvent différer. Marquez-les avec opt-* comme d’habitude — aucun travail supplémentaire.

Slug → Template Mapping

Use these exact file names. Custom pages (about, services, contacts, etc.) can use any slug that doesn't conflict with the reserved names below.

tf-cors.php

Facultatif : si votre site est déjà servi depuis une adresse localhost, vous pouvez indiquer cette adresse dans le projet au lieu de téléverser l'archive sur le site (voir « La source sur votre site »). Créez ce fichier à la racine du site et lancez le serveur avec : php -S localhost:8080 tf-cors.php. Seul themeforge.pro est autorisé — aucun autre site ne peut accéder à vos fichiers.

<?php
// ThemeForge CORS Router — place in site root, run: php -S localhost:8080 tf-cors.php
$allowed = ['https://themeforge.pro', 'https://www.themeforge.pro', 'http://localhost:8081'];
$origin = $_SERVER['HTTP_ORIGIN'] ?? '';
if (in_array($origin, $allowed, true)) header('Access-Control-Allow-Origin: ' . $origin);
elseif (empty($origin)) header('Access-Control-Allow-Origin: https://themeforge.pro');
header('Access-Control-Allow-Methods: GET, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { http_response_code(204); exit; }
$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$file = __DIR__ . $path;
if (is_dir($file)) $file = rtrim($file, '/') . '/index.html';
if (!is_file($file) && is_file($file . '.html')) $file .= '.html';
if (is_file($file)) {
    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
    $types = ['html'=>'text/html','css'=>'text/css','js'=>'application/javascript','json'=>'application/json',
        'png'=>'image/png','jpg'=>'image/jpeg','jpeg'=>'image/jpeg','gif'=>'image/gif','svg'=>'image/svg+xml',
        'webp'=>'image/webp','ico'=>'image/x-icon','woff'=>'font/woff','woff2'=>'font/woff2','ttf'=>'font/ttf'];
    if (isset($types[$ext])) header('Content-Type: ' . $types[$ext]);
    readfile($file); return true;
}
http_response_code(404); echo '404 Not Found';

POST /api/validate-markup

Envoyez l'ensemble complet en une seule requête : certaines vérifications portent sur l'ensemble et non sur un fichier — présence de theme-options.html, présence de la page d'accueil.

POST https://themeforge.pro/api/validate-markup
Content-Type: application/json

{"pages":[
  {"name":"index.html","html":"<!doctype html>…"},
  {"name":"about.html","html":"…"},
  {"name":"theme-options.html","html":"…"}
]}