Adding Page Sections

For Content Editors

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

Edit the page in wp-admin
Scroll to the Components section
Click Add Row and select the section type (hero, copy, cards, etc.)
Fill in the fields for that section
Drag sections to reorder them
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'      => [],
]);
?>

<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

In functions/acf.php, add a new layout to the "Components" field group. The layout name must match the filename (without .php):

Layout name: my-section
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.

The ACF field values are automatically passed to the component as $props — no manual mapping 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

Feature	Syntax	Purpose
Default value	`'title' => ''`	What to use if the field is empty
Class joining	`'class:join' => 'my-section'`	Base classes — callers can add more without overwriting
Array fields	`'image' => []`	For ACF image/repeater fields
Boolean fields	`'show_cta' => true`	Toggle visibility of elements

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; ?>

Adding Page Sections

On this page