Adding Page Sections

For content editors

Sections are added to pages through the WordPress editor using ACF flexible content:

1. Edit the page in wp-admin
2. Scroll to the Components section
3. Click Add Row and select the section type (hero, copy, cards, etc.)
4. Fill in the fields for that section
5. Drag sections to reorder them
6. Save/publish the page

Each section type has its own set of fields. The order you arrange them is the order they appear on the page.

For developers: creating a new section

1. Create the component file

Add a PHP file to src/wp-content/themes/wha2025/components/sections/:

<?php
// components/sections/my-section.php

$props = set_props([
    'class:join' => 'my-section',
    'title'      => '',
    'body'       => '',
    'image'      => [],
], $props);
?>

<section class="<?php echo esc_attr($props->class); ?>">
    <div class="container">
        <?php if ($props->title) : ?>
            <h2><?php echo esc_html($props->title); ?></h2>
        <?php endif; ?>

        <?php if ($props->body) : ?>
            <div><?php echo wp_kses_post($props->body); ?></div>
        <?php endif; ?>
    </div>
</section>

2. Add the ACF flexible content layout

The flexible-content field lives in the "Components" ACF field group, which is managed through the ACF UI and synced to acf-json/. It's not hand-coded in functions/acf.php. In wp-admin, go to Custom Fields → Field Groups → Components, edit the components flexible-content field and add a new layout:

• Layout name: my-section — this resolves to a component path relative to components/. A bare name maps to components/sections/my-section.php; a prefixed name like content/article maps to components/content/article.php.
• Layout label: "My Section" (what editors see in wp-admin)
• Add sub-fields that match your set_props() keys: title (text), body (wysiwyg), image (image), etc.

ACF writes the change back to acf-json/; commit that file. The layout's sub-field values are passed to the component as the incoming $props (the second argument to set_props()), so no manual mapping is needed.

3. Add CSS

Create styles in assets/css/ (either in app.css or a new partial imported by it). Use Tailwind utilities in the PHP template, or write custom CSS with the component's class name.

4. Test

The new section immediately appears as an option when editing any page with the Components field group. Add it to a page, fill in the fields and verify it renders correctly.

Props reference

Nesting components

Sections can render UI components inside them:

<?php foreach ($items as $item) : ?>
    <?php get_component('ui/card', [
        'title' => $item->title,
        'image' => $item->image,
        'href'  => $item->url,
    ]); ?>
<?php endforeach; ?>