Live posts & markup contract

When an AI or designer builds a “Latest News” section on a home page or a blog.html template, they usually repeat 3 static sample cards. Kerf turns those static cards into a live WordPress query loop while keeping the designer’s exact card HTML and CSS classes.

Three ways to make static cards live

You never have to write PHP or rebuild cards with core Query Loop blocks. Pick whichever workflow fits best:

1. The Latest Posts panel in the editor

On any already-imported page, select the container holding 2 or more repeated post cards in the Block Editor and open the Latest posts panel in the sidebar. With one click, Kerf keeps the first card as the template, drops the duplicate sample cards, and binds the heading, image, date, category, excerpt, and link to your live WordPress posts.

2. Mark it with AI at import

On the Kerf → Import design check step, click Mark it with AI next to any unmarked Blog, Post, Archive, or 404 template. Kerf AI inspects the HTML, places the loop and field markers on the right elements, verifies them against Kerf’s converter rules, and imports the template as a live dynamic layout.

3. The data-kerf-* markup contract

If you or your AI tool want deterministic control directly in the HTML source, add two lightweight attributes:

Attribute	Values	Where to place it
data-kerf-loop	main, latest, comments, tags, categories	On the first repeated card element inside a list (Kerf automatically drops the remaining sample sibling cards).
data-kerf-field	title, permalink, date, author, category, excerpt, image, tags, comments-count	On the elements inside the card that hold the post’s title, link, image, date, or summary.
Post / Archive fields	content, pagination, comment-form, prev, next, author-name, author-bio, archive-title, search	Outside a card loop on Single Post, Archive, Search, or 404 templates.

<!-- Example: a 3-card blog grid where the first card is marked -->
<div class="blog-grid">
  <article class="blog-card" data-kerf-loop="latest">
    <img class="card-img" src="images/post-1.jpg" data-kerf-field="image" alt="">
    <span class="card-date" data-kerf-field="date">Oct 20, 2026</span>
    <h3 class="card-title">
      <a href="post.html" data-kerf-field="title permalink">Sample Post Title</a>
    </h3>
    <p class="card-excerpt" data-kerf-field="excerpt">Sample summary text...</p>
  </article>
  <!-- Sample cards 2 and 3 can stay in the HTML; Kerf drops them automatically -->
</div>