moreminimore-redesign/skills/wordpress-theme-to-emdash/phases/4-dynamic.md

Phase 4: Dynamic Features

Implement CMS-driven features: site settings, menus, taxonomies, and widgets.

4.1 Site Settings

Map WordPress customizer values to EmDash site settings:

WP Customizer Setting	EmDash Site Setting
Site Title	title
Tagline	tagline
Site Icon	favicon
Custom Logo	logo
Posts per page	postsPerPage
Date format	dateFormat

---
import { getSiteSettings } from "emdash";
const settings = await getSiteSettings();
---
<header>
  {settings.logo ? (
    <img src={settings.logo.url} alt={settings.title} />
  ) : (
    <span class="site-title">{settings.title}</span>
  )}
  {settings.tagline && <p class="tagline">{settings.tagline}</p>}
</header>

4.2 Navigation Menus

Identify menus in functions.php:

register_nav_menus([
    'primary' => 'Primary Navigation',
    'footer' => 'Footer Links',
]);

Use in templates:

---
import { getMenu } from "emdash";
const primaryNav = await getMenu("primary");
---
<nav class="primary-nav">
  {primaryNav && (
    <ul>
      {primaryNav.items.map(item => (
        <li>
          <a href={item.url} aria-current={Astro.url.pathname === item.url ? 'page' : undefined}>
            {item.label}
          </a>
          {item.children.length > 0 && (
            <ul class="submenu">
              {item.children.map(child => (
                <li><a href={child.url}>{child.label}</a></li>
              ))}
            </ul>
          )}
        </li>
      ))}
    </ul>
  )}
</nav>

4.3 Taxonomies

Identify taxonomies in theme:

register_taxonomy('genre', 'book', [
    'label' => 'Genres',
    'hierarchical' => true,
]);

Use in templates:

---
import { getTaxonomyTerms, getEntryTerms, getEntriesByTerm } from "emdash";

// Get all terms
const genres = await getTaxonomyTerms("genre");

// Get terms for a specific entry
const bookGenres = await getEntryTerms("books", book.id, "genre");

// Get entries by term
const fictionBooks = await getEntriesByTerm("books", "genre", "fiction");
---

4.4 Widget Areas

Identify sidebars in theme:

register_sidebar([
    'name' => 'Main Sidebar',
    'id' => 'sidebar-1',
]);

Use in templates:

---
import { getWidgetArea } from "emdash";
import { PortableText } from "emdash/ui";

const sidebar = await getWidgetArea("sidebar");
---
{sidebar && sidebar.widgets.length > 0 && (
  <aside class="sidebar">
    {sidebar.widgets.map(widget => (
      <div class="widget">
        {widget.title && <h3>{widget.title}</h3>}
        {widget.type === "content" && <PortableText value={widget.content} />}
      </div>
    ))}
  </aside>
)}

4.5 Widget Components

Map WP widgets to Astro components:

WP Widget	EmDash Component
Recent Posts	core:recent-posts
Categories	core:categories
Tag Cloud	core:tags
Search	core:search
Archives	core:archives
Text/Custom HTML	type: 'content'
Navigation Menu	type: 'menu'

See references/emdash-api.md for full API reference.