Skip to content
CHHS → Find Your Energy · Migration review

From legacy components to Find Your Energy

A visual comparison catalog for CHHS and RDC, with practical destination choices and migration notes.

A recommended path for every listed source component

Use this catalog to choose a destination by layout, content shape and job to be done. Each entry includes a preferred match, alternatives, transfer rules and remaining gaps. The first destination is the preferred starting point; additional links are supporting blocks, fields or alternatives.

43unique source entries
41 + 2shared entries + RDC-only variants
78destination sections reviewed
15ACF/shared-content crosswalk rows

Scope: CHHS represents the shared parent/child-theme catalog in the supplied guide; RDC is the separately illustrated child theme. Other child themes were not supplied as separate guides. This is not an audit of every live page or every child-theme override. Guide usage counts are inherited network counts, not verified RDC-specific counts.

How to read fit: Reuse = close existing equivalent; Adapt = configure an existing component; Compose = assemble blocks/patterns; Build = new reusable layout/component needed; Integrate = external service or plugin work. Visual, structure and function ratings are independent. High does not mean pixel-identical or automatically convertible.

Preview limits: Previews use the supplied markup and theme CSS in isolated frames. Damaged legacy FPO images have been replaced with labeled sample images in the extracted guides and previews. Standard callout direction classes, gallery layout dependencies and RDC body context have been restored. FYE header colors and toolbar containment have been corrected. These are guide reconstructions, not live-page captures. Templates are schematic; integrations and ACF groups are label-only. FYE uses sample data; header color classes have been checked against the local ACF definitions and PHP templates. Functional parity is inferred from field descriptions and requires live verification. Colors and fonts intentionally change.

Start with callouts · Fast Facts recommendation · Section-nav gap · Open ACF migration rules

43 components shown

AdaptHeader, navigation & footer · CHHS + RDC / shared child themes · g-header

Global header (logo, college name, main nav, utility nav)

Both establish CSU identity above local navigation. FYE uses a compact two-tier header, strong green strip and menu/search controls rather than the legacy horizontal mega-nav.

VisualMediumContent structureHighFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Site Header
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Map main/local menus to FYE menu locations; configure network navigation inheritance, network home link and action button in Site Layout. Use toolbar for calendar, directory and news utility destinations.

What still needs attention

Audit mega-menu nesting, utility links, site-title destination and mobile behavior; toolbar is a selected set of utilities, not an arbitrary utility-menu replacement.

Source fields and implementation reference

WordPress menus: main, utility; site title link options page ("Site Title Link" ACF group); network-wide root menus can be inherited by subsites.

csu-chhs-parent-theme/twig-components/organisms/global-header.twig

AdaptHeader, navigation & footer · CHHS + RDC / shared child themes · g-pageheader

Page header — Standard (grid)

The Secondary header preserves the clearest composition: title, introductory copy and action at left, featured image at right. The FYE brush texture replaces legacy circles.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Page Header: Secondary (side by side)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Set page_header_layout=secondary; transfer image to Featured Image, introductory body to page_header_description, actions to buttons[].link and headline to title/highlight_text_lines. Rebuild superhead as kicker where appropriate.

What still needs attention

Review long titles, caption toggle, cropping and contrast. Secondary-link hierarchy, subhead and legacy overlays are not a one-to-one field transfer.

Alternative: Basic for text-only headers; Primary for image-led heroes.

Source fields and implementation reference

ACF group "Page Header" (field page_header ) on every page: Header Text (headline, superhead, subhead, body), Header Image, Button, Secondary Link, Header Style, Color Scheme, Background Texture, Overlay Style

csu-chhs-parent-theme/twig-components/organisms/page-header-grid.twig (organisms/page-header.twig is the legacy variant)

AdaptHeader, navigation & footer · CHHS + RDC / shared child themes · g-pageheader-slate

Page header — Stalwart Slate scheme

The same title/summary/CTA hierarchy fits FYE headers; Stalwart Slate is in FYE’s palette, but its supplied brush backgrounds are not identical to the legacy slate texture.

VisualMediumContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Page Header: Basic
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Use Secondary when an image exists, Basic when absent. Select compatible title, text and background colors from Theme: Page Header.

What still needs attention

Do not assume every palette color has a matching brushstroke asset or header style. Check the actual selected header at full size.

Source fields and implementation reference

Same component with the Stalwart Slate color scheme.

AdaptHeader, navigation & footer · RDC only · g-pageheader-large

Page header — Large media (RDC homepage)

Primary is the best theme-header match for RDC’s oversized image-led introduction. A Cover composition is the closer fallback when the media must remain behind the text.

VisualMediumContent structureHighFunctionPartial
Compare previews & migration notes
Source · RDC only
Open this comparison to load the example.
Suggested destination · Page Header: Primary (hero)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Image-only: use Primary plus description and buttons. Video: compose a core/cover video hero with heading, paragraph and button, then coordinate the theme header to avoid duplicate titles.

What still needs attention

The FYE header guide documents a featured image, not RDC’s video file/poster fields. Video, poster, playback and motion preferences require a custom composition and live validation.

Alternative: Use Secondary if preserving the left text/right media split matters more than image dominance.

Source fields and implementation reference

Button (flexible link), Body (wysiwyg), Media Type (image / video), Image, Video (file + poster), Background Texture

csu-rdc-theme / csu-chhs-parent-theme twig-components/organisms/page-header-large-media.twig

ReuseHeader, navigation & footer · CHHS + RDC / shared child themes · g-breadcrumbs

Breadcrumbs

Both are a short ancestor trail; FYE places it within page headers with different typography and separators.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Breadcrumbs
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Map intended visibility to Page Options > breadcrumbs; confirm ancestor labels and URLs.

What still needs attention

Legacy show_breadcrumbs is per navigation settings; FYE’s documented toggle is a site-wide default. Per-page exceptions need verification.

Source fields and implementation reference

ACF toggle "Show Breadcrumbs" ( show_breadcrumbs ) in "Navigation Settings" group; trail from page ancestors (extended_breadcrumbs())

csu-chhs-parent-theme/twig-components/molecules/breadcrumbs.twig

AdaptHeader, navigation & footer · CHHS + RDC / shared child themes · g-alert

Alert banner (sitewide + site-specific)

The notice banner has the same urgent communication purpose, with FYE adding a conspicuous Energy Green strip and dismissal control.

VisualMediumContent structureHighFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Site Alert
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Transfer headline/body into alert_content; configure alert_enabled, network push, scope, expiry and cookie duration.

What still needs attention

Legacy icon and severity are not documented destination fields. Test local/network precedence, expiry and dismissal; the destination guide’s GAP label conflicts with the source guide’s existing alert.

Source fields and implementation reference

ACF options "Sitewide Alerts" (network) and site-specific alert; fields: headline, body, icon, severity

csu-chhs-parent-theme/twig-components/organisms/banner-alert.twig

BuildHeader, navigation & footer · CHHS + RDC / shared child themes · g-sectionnav

Section nav (left sidebar page tree)

FYE’s header navigation action box can preserve a selected set of section links, but it does not establish equivalence to the automatic left-hand page tree.

VisualLowContent structureMediumFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · ACF: Theme: Page Header
No rendered example: this entry documents fields, a script integration or a composition recipe. The notes describe the suggested replacement.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Use user_action_box=nav with navigation_heading/navigation_menu and assign_nav_to_children for curated menus. Build a section-nav component if automatic hierarchy, current-page state and reset-to-page rules must remain.

What still needs attention

Sticky Nav only jumps to sections on the same page. core/page-list lists pages but is not a verified context-aware ancestor/sibling tree.

Alternative: Use Sticky Nav Section only for long single-page content after intentional restructuring.

Source fields and implementation reference

Page hierarchy; ACF "Sidebar Nav Settings" group: Display Sidebar Nav, Reset nav to this page

csu-chhs-parent-theme/twig-components/molecules/section-nav.twig

BuildPage templates · CHHS + RDC / shared child themes · t-standard

Standard Content Page (page-templates/standard.php)

A normal FYE page can preserve the content sequence. The legacy three-region layout (page tree, main content, sidebar) is a separate design requirement.

VisualLowContent structureMediumFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Page Header: Basic
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Convert flex_slabs to blocks; compose main and contact/teaser column with core/columns if sidebar is required; build page-tree navigation separately.

What still needs attention

No matching ready-made Standard template is evidenced. Columns alone do not reproduce automatic navigation, sidebar widths or mobile reading order.

Alternative: Prefer a simpler single-column page when contact and related content can move into the main flow.

Source fields and implementation reference

Main content template with section nav, flexible slabs and a sidebar.

csu-chhs-parent-theme/page-templates/standard.php → templates/standard.twig

ComposePage templates · CHHS + RDC / shared child themes · t-landing

Landing Page (page-templates/landing.php)

Stacked full-width FYE groups, callouts and routing cards preserve the landing page’s sequence of promotional sections.

VisualUnverifiedContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Page Header: Primary (hero)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Convert each flex_slabs row to the matching block/pattern; retain section order, anchors, actions and intended full/wide alignment.

What still needs attention

This is a composition recipe, not an identically named FYE template. Re-check permissions, content widths and spacing in the editor.

Source fields and implementation reference

Full-width flexible page made only of slabs; no sidebar nav.

csu-chhs-parent-theme/page-templates/landing.php → templates/landing.twig ; ACF group "Flexible Landing Page Content" in the child theme

BuildPage templates · CHHS + RDC / shared child themes · t-academic

Academic Unit (page-templates/academic-unit.php)

The department introduction and full-width news/events area are reproducible, but the legacy nested content/sidebar layout has no demonstrated destination template.

VisualLowContent structureMediumFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Page Header: Secondary (side by side)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Compose introduction and main content, optional sidebar columns, then full-width CTA/facts/SOURCE/Trumba groups. Split flex_slabs and flex_slabs_wide into the correct sequence.

What still needs attention

Section navigation, sidebar rules and placement below the main region require an agreed reusable page pattern or custom template.

Source fields and implementation reference

flex_slabs (main), sidebar , flex_slabs_wide (Routing, Fast Facts, News List, Event List)

csu-chhs-parent-theme/page-templates/academic-unit.php

IntegratePage templates · CHHS + RDC / shared child themes · t-directory

Filtered Directory Listing (page-templates/directory.php)

Content Query has the closest search/filter/listing purpose and can present cards or tables. Its data contract differs from the external JavaScript people directory.

VisualUnverifiedContent structureHighFunctionGap
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Content Query (default)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

If people become a registered post type, map groups to taxonomies, select postType, configure filters and create bio permalinks. Otherwise retain the external directory through a maintained integration.

What still needs attention

External directory data, person fields, search semantics and bio rendering are not supplied by Content Query. Verify table-column support for the required contact fields before selecting this route.

Source fields and implementation reference

People directory (search + filter list) fed by a JavaScript directory feed; links to bio pages.

csu-chhs-parent-theme/page-templates/directory.php → templates/page-directory.twig , templates/page-bio-page.twig

ReuseContent slabs · CHHS + RDC / shared child themes · s-wysiwyg

WYSIWYG Content slab

Core editorial blocks preserve paragraphs, lists, headings and inline links; font family and spacing change with the new theme.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Heading, Paragraph, List, Link, Quote and Table Defaults
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Convert HTML to semantic heading/paragraph/list/image blocks, wrapped in a constrained Group; retain a section heading before the body.

What still needs attention

Audit shortcodes, inline styles, embedded scripts and heading order individually. Do not flatten rich content into a single paragraph.

Source fields and implementation reference

Header (headline group): headline, superhead, subhead WYSIWYG Content (TinyMCE, extended by newcity-wp-wysiwyg: styles, shortcodes)

csu-chhs-parent-theme/twig-components/organisms/wysiwyg-slab.twig

AdaptContent slabs · CHHS + RDC / shared child themes · s-callout-r

Callout slab — Standard, image right

Media & Text preserves a two-part promotional section with copy, action and image. The pattern supplies all three text/action elements.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Pattern: Media & Text
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Move media to the right; map headline to heading, body to paragraph, button to Buttons and links to a separate list; set Group/Media & Text background.

What still needs attention

Brushstroke+ introduces an accent line and FYE typography; triangles/hexagons and exact legacy treatment do not transfer. Add caption outside the media slot if needed.

Source fields and implementation reference

CHHS: Style: Standard / Wide (billboard) / Filmstrip / Large image Header (headline group), Body, Link Style (none / one button / list of text links), Button, Link list Image (src, caption) + Image Position (left / right / none) Color scheme (classic: CSU White, CSU Green, Light Gray, Light Slate, Aggie Orange, Canyon, Dark Slate, Reservoir; or modern) Background design (none / triangles / hexagons) | RDC: Style: Standard / Wide (billboard) / Filmstrip / Large image Header (headline group), Body, Link Style (none / one button / list of text links), Button, Link list Image (src, caption) + Image Position (left / right / none) Color scheme (RDC: White, RDC Red, Gray, Yellow, Blue) Background design (none / triangles / hexagons)

csu-chhs-parent-theme/twig-components/organisms/callout-slab.twig

AdaptContent slabs · CHHS + RDC / shared child themes · s-callout-l

Callout slab — Standard, image left, gray

Media-left with copy at right is the same information layout. A restrained background and Brushstroke style are closer than an image-overlay cover.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Pattern: Media & Text
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Keep media on the left; use a Gray or neutral Group where allowed; transfer headline, body, actions and caption.

What still needs attention

Review gray/text contrast and mobile stacking; choose brush treatment deliberately rather than copying legacy background classes.

Source fields and implementation reference

ACF flexible-content layout callout_slab

csu-chhs-parent-theme/twig-components/organisms/callout-slab.twig

AdaptContent slabs · CHHS + RDC / shared child themes · s-callout-w

Callout slab — Wide (billboard over image)

The full-width Cover keeps the headline and action on a background image, matching the billboard purpose better than side-by-side Media & Text.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Pattern: Call to Action Cover
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Use image as Cover media; add heading, supporting paragraph, Buttons and any secondary links; set overlay opacity and focal point.

What still needs attention

The supplied starter does not include every legacy CTA field. Reverb is a collage treatment and is less visually similar to a single photographic billboard.

Alternative: Ram Reverb Cover for an intentional campaign redesign, not the default conversion.

Source fields and implementation reference

ACF flexible-content layout callout_slab

csu-chhs-parent-theme/twig-components/organisms/callout-slab.twig

ComposeContent slabs · CHHS + RDC / shared child themes · s-callout-f

Callout slab — Filmstrip

The repaired filmstrip shows an introduction above a row of three images. A Gallery inside a Group preserves this repeated-media structure; Columns can recreate the split headline and description.

VisualMediumContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Gallery
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Compose a headline/action and description row, followed by a three-column Gallery. Preserve image count, crop ratio and mobile stacking. Use Media & Text only for an intentionally simplified single-image variant.

What still needs attention

No dedicated filmstrip style is listed. The Gallery example alone lacks the introduction/action area; create the complete reusable composition before conversion.

Source fields and implementation reference

ACF flexible-content layout callout_slab

csu-chhs-parent-theme/twig-components/organisms/callout-slab.twig

ComposeContent slabs · CHHS + RDC / shared child themes · s-callout-li

Callout slab — Large image

A large image with a separate headline/action strip is closer to this variant than a slideshow.

VisualMediumContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Image
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Build a full/wide Group containing Image and a heading/body/action group; Banner Strip can start a short headline/button band.

What still needs attention

The banner pattern alone has no large image or rich body. Review the exact strip placement and caption against the original; use Cover only if the source overlays text.

Source fields and implementation reference

ACF flexible-content layout callout_slab

csu-chhs-parent-theme/twig-components/organisms/callout-slab.twig

AdaptContent slabs · CHHS + RDC / shared child themes · s-routing-img

Routing Slab with Callouts — image teasers

Traditional CTA cards retain the image/headline/description/link structure and visible grid of routing choices. Oval Green feels closer to the darker legacy palette; Energy Green adopts the new emphasis.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Call to Action: Cards | Traditional (Energy Green)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Map each callout to ctas[].image_icon/heading/description/link; superhead to kicker; preserve columns (1–4). Add the slab’s intro and section button outside the block.

What still needs attention

Per-item alignment and featured-card proportions may need adjustment. Swipe/Expanders change content visibility and interaction.

Alternative: Choose Swipe only for intentional horizontal browsing; Expanders only when progressive disclosure is desired.

Source fields and implementation reference

Header (superhead, headline), Intro body, Button Callouts repeater: image or icon, headline, body, link (items per row = 1–4 columns) Callout Type: Image / Icon Callout Content Alignment: Left / Centered / Centered headline + left body Background: Transparent-White / Gray

csu-chhs-parent-theme/twig-components/organisms/teaser-collection-slab.twig

AdaptContent slabs · CHHS + RDC / shared child themes · s-routing-icon

Routing Slab with Callouts — icon teasers, gray, centered

The unstyled CTA block is the better starting point for equal icon-led columns. Icon List is a good purpose match when a vertical action list is acceptable.

VisualMediumContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Call to Action (default / no style)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Use CTA with icon images, item heading, description and link; preserve columns and wrap the section intro/background in a Group.

What still needs attention

The FYE default uses circular media; Icon List uses compact rows and its sample hides longer descriptions. Inspect actual content before switching from a grid.

Alternative: Icon List pattern for concise actions; core/columns with image + heading + paragraph for exact centered grid control.

Source fields and implementation reference

Variant of the Routing slab: Callout Type = Icon, Background = Gray, alignment = Centered.

ReuseContent slabs · CHHS + RDC / shared child themes · s-accordion

Accordion List slab

Repeated Details preserve short question titles with expandable rich answers. Outline is closest to a restrained FAQ list; filled style is a stronger redesign.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Pattern: Accordion / Details Outline
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Map accordion headline to Details summary and body to nested blocks; retain section heading before the group.

What still needs attention

Do not assume mutually exclusive opening, legacy expand-all controls or anchor behavior. Check keyboard use and whether answers should start open.

Source fields and implementation reference

Header (headline, superhead) Accordion repeater: headline + body (WYSIWYG)

csu-chhs-parent-theme/twig-components/organisms/accordion-list-slab.twig

ComposeContent slabs · CHHS + RDC / shared child themes · s-facts

Fast Facts slab (fact collection)

Highlight List with Text already combines introductory copy/action with prominent numbers and captions. It is a stronger starting point than declaring a complete gap.

VisualMediumContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Pattern: Highlight List with Text
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Map fact headline to large number, super/subhead to contextual labels and caption; keep the introduction/button. For a horizontal stat row, rearrange number groups into Columns.

What still needs attention

No dedicated Fast Facts block or matching icon-box styles are listed. The supplied pattern stacks facts vertically; preserve icons using Image blocks and rebuild Icon A/B treatment if needed.

Source fields and implementation reference

Intro: headline, superhead, subhead, button Facts repeater: fact style (Icon A / Icon B / No icon), headline (the number), super/sub head, icon (svg icon picker) Color scheme (CSU Green default)

csu-chhs-parent-theme/twig-components/organisms/fact-collection-slab.twig

AdaptContent slabs · CHHS + RDC / shared child themes · s-news

News Callout slab (SOURCE feed)

SOURCE Stories preserves the external CSU news-feed purpose and card content. Enterprise’s darker cards are closer to the legacy presentation than the bright default.

VisualHighContent structureHighFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · SOURCE Stories: Enterprise
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Choose the CHHS SOURCE channel, translate categories/tags, story count, heading, SOURCE link/button and image ratio; use grid or feature layout according to the source.

What still needs attention

Guide labels disagree on direct/partial. Arbitrary legacy custom queries and tag/category operators are not proven equivalent; validate real returned stories. Content Query requires local posts and is not the default replacement.

Source fields and implementation reference

Header, Button Feed settings: story count, categories, tags, optional custom query Color: White / Gray

csu-chhs-parent-theme/twig-components/organisms/news-slab.twig / news-slab-include.twig

ComposeContent slabs · CHHS + RDC / shared child themes · s-listcoll

List Collection slab

Columns of titled link lists preserve the grouping of resource destinations more accurately than a single flat CTA collection.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Columns: Divider variants
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

For each nested Link List create a Column/Group with heading, optional icon and links/descriptions; keep the parent section heading.

What still needs attention

No dedicated nested-list collection block is listed; maintain group labels, responsive reading order and any shared/reusable list relationships.

Source fields and implementation reference

Header (headline group) Link Lists repeater: each a Link List slab (header, icon, links)

csu-chhs-parent-theme/twig-components/organisms/list-collection.twig

ReuseContent slabs · CHHS + RDC / shared child themes · s-table

Table slab

Suggested: Table · Heading

Core Table preserves tabular relationships and caption, with FYE typography and borders replacing the legacy header styling.

VisualHighContent structureHighFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Table
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Convert row/cell data, header/footer sections and caption; use a separate section Heading. Create a synced pattern for genuinely shared tables.

What still needs attention

First-column row headers and reusable ACF table references need special handling; verify scope/header semantics and horizontal overflow, rather than assuming every ACF option transfers.

Source fields and implementation reference

Table (ACF Table Field: header row, footer row, first column as header) Headline, caption Reusable tables managed on the "Table Slab" options page (acf-components)

csu-chhs-parent-theme/twig-components/organisms/table-slab.twig

AdaptContent slabs · CHHS + RDC / shared child themes · s-events

Event List slab (Trumba)

Trumba Events retains calendar-driven event titles/dates and calendar link, but FYE’s demo is a card grid rather than the embedded legacy spud placeholder.

VisualMediumContent structureHighFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Trumba Events
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Map calendar identity to trumba_calendar_url, count to number_of_events and section heading/calendar button to their ACF fields.

What still needs attention

Destination uses a JSON feed rather than the legacy spud. Calendar filters, photo/list selection and custom views need feed-level validation; the static sample proves neither live data nor parity.

Source fields and implementation reference

Header, Button, Color (white / gray), Background design Events: Trumba filter view, number of events, style (photo / list)

csu-chhs-parent-theme/twig-components/organisms/events-slab.twig

ReuseContent slabs · CHHS + RDC / shared child themes · s-fullimage

Full-width Image slab

Suggested: Image

A full-aligned Image preserves the purpose of a single wide photograph without introducing overlay text.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Image
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Map image, alt text, caption and intended alignfull width; retain intrinsic ratio unless a deliberate crop is approved.

What still needs attention

Confirm theme content-container constraints and image quality.

Alternative: Use Cover only if text overlay or background cropping is part of the actual source instance.

Source fields and implementation reference

ACF flexible-content layout full_width_image_slab

csu-chhs-parent-theme/twig-components/organisms/(image clone)

ComposeContent slabs · RDC only · s-quote

Quote slab (RDC only)

Quote preserves quotation and attribution; its Energy Green rule changes the RDC treatment. Columns can preserve the optional accompanying portrait/image.

VisualMediumContent structureHighFunctionHigh
Compare previews & migration notes
Source · RDC only
Open this comparison to load the example.
Suggested destination · Quote
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Map body to Quote and source to citation; add image in an adjacent column and a Group background where needed.

What still needs attention

A single Quote block does not contain RDC’s optional image or color-scheme layout. Rich attribution links require careful conversion.

Source fields and implementation reference

Body (wysiwyg), Source (wysiwyg), Image, Color scheme

ComposeSidebar content · CHHS + RDC / shared child themes · sb-contact

Contact Info block

A colored Group with structured contact text preserves the contact card’s purpose and dense labeled information.

VisualMediumContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Group
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Heading + name/title/location/hours paragraphs; phone/email as usable links; preserve multiple contacts with groups/columns and social links.

What still needs attention

No dedicated Contact Info ACF block is documented. Reusable/sidebar placement needs a synced pattern and agreed page composition.

Source fields and implementation reference

Headline Contacts repeater: name, title, location, office, hours, mailing, phone, fax, email, social/web links

csu-chhs-parent-theme/twig-components/organisms/callout-contact.twig , molecules/contact-list.twig

AdaptSidebar content · CHHS + RDC / shared child themes · sb-teasers

Sidebar Teasers block

One-column CTA cards preserve image, heading, summary and destination. Image List offers a more compact alternative when summaries are short.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Call to Action: Cards | Traditional (Oval Green)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Set CTA columns=1; map each teaser image/heading/summary/link; retain sidebar heading separately.

What still needs attention

Block availability does not create a sidebar region. Confirm card sizing inside the chosen column and move content into the page flow on mobile.

Source fields and implementation reference

Headline Teasers repeater: image, headline, summary, link

csu-chhs-parent-theme/twig-components/organisms/sidebar-teaser-block.twig

ComposeAtoms & widgets · CHHS + RDC / shared child themes · p-headline

Headline group

Heading plus kicker/subhead paragraphs preserves the three-level information hierarchy. Callout Heading offers a stylized superhead + display-title alternative.

VisualMediumContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Heading
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Use semantic heading for headline; separate small paragraph for superhead and paragraph for subhead; add icon or Separator only where needed.

What still needs attention

core/heading alone omits superhead, subhead and stroke/icon. The Callout Heading starter’s oversized italic type suits special features rather than every section.

Source fields and implementation reference

Superhead + headline + subhead (+ optional icon / stroke).

csu-chhs-parent-theme/twig-components/molecules/headline-group.twig

ReuseAtoms & widgets · CHHS + RDC / shared child themes · p-buttons

Buttons & links

Suggested: Button / Buttons

FYE Buttons support primary/outline actions and brand colors, retaining the action hierarchy with a different rounded/arrow treatment.

VisualMediumContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Button / Buttons
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Transfer label, URL, target and relationship; choose filled/outline styles and keep plain/fancy text links as inline links.

What still needs attention

Exact legacy arrow, sizes and fancy-link appearance are not guaranteed by core/button.

Source fields and implementation reference

Primary button, large arrow button, fancy text link, plain link.

csu-chhs-parent-theme/twig-components/atoms/button.twig , atoms/link.twig , atoms/link-fancy.twig , molecules/cta-group.twig

AdaptAtoms & widgets · CHHS + RDC / shared child themes · p-teaser

Teaser / teaser collection

CTA cards keep manually authored teaser image/title/summary/link content; Content Query is for teasers derived from local posts.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Call to Action: Cards | Traditional (Energy Green)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Manual items → CTA repeater with 1–4 columns. Dynamic local-post items → Content Query with a defined post type and filter.

What still needs attention

Legacy featured/unequal cards need deliberate layout work; do not turn manual destinations into queries unless matching content exists.

Source fields and implementation reference

Card with headline, summary and image/icon; collections arrange 1–4 per row, optional feature.

csu-chhs-parent-theme/twig-components/molecules/teaser.twig , organisms/teaser-collection.twig

ReuseAtoms & widgets · CHHS + RDC / shared child themes · p-media

Media / figure / image

Image with figcaption retains the basic figure, caption and image purpose. The caption ACF switch applies separately to header featured images.

VisualHighContent structureHighFunctionHigh
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Image
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Map media to Image, preserve alt text/caption/citation and choose aspect ratio; use image_caption for featured-image display where relevant.

What still needs attention

Retain credit/citation links explicitly; header caption toggle is not a global replacement for all figure captions.

Source fields and implementation reference

Responsive image with caption and optional citation, aspect-ratio control.

csu-chhs-parent-theme/twig-components/molecules/media.twig , atoms/figure.twig , atoms/image.twig

BuildAtoms & widgets · CHHS + RDC / shared child themes · p-tabs

Tabs / modal / accordion widgets

Details is a good match only for accordion disclosure. Tabs and modal dialogs have different interaction contracts and need separate decisions.

VisualLowContent structureMediumFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
Open this comparison to load the example.
Suggested destination · Details (Default + Outline)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Accordion → Details. Inspect Sticky Nav Item’s documented layout options before adopting tab-like layouts; retain/custom-build a tabs or dialog component when those interactions are required.

What still needs attention

The destination visual guide demonstrates neither full legacy tab behavior nor a modal equivalent. Focus management, keyboard navigation and dialog dismissal require live verification.

Source fields and implementation reference

Interactive widgets available to templates (js/tabs.js, modals.js, accordion.js). Not exposed as slabs.

csu-chhs-parent-theme/twig-components/molecules/tabs.twig , modal.twig , accordion.twig

IntegrateScripts & integrations · CHHS + RDC / shared child themes · sc-trumbacalend

Trumba calendars / event submission

Upcoming-event teasers fit Trumba Events. Full calendar views and submission widgets have additional controls and workflows.

VisualUnverifiedContent structureMediumFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
No rendered example: this entry documents fields, a script integration or a composition recipe. The notes describe the suggested replacement.
Suggested destination · Trumba Events
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Use Trumba Events only for list/teaser feeds. Inventory the ten named calendar/submission scripts and retain their calendar identities through a maintained embed/integration.

What still needs attention

Custom HTML is a container, not a script loader or full calendar replacement. Event submission, multiple calendar filters and custom spuds require separate testing.

Source fields and implementation reference

Custom page-level JavaScript loaded with [local_script script="name"] (plugin newcity-wp-shortcodes) from local-scripts/ .

IntegrateScripts & integrations · CHHS + RDC / shared child themes · sc-peopledirect

People directory / bio pages

The filterable Content Query resembles directory browsing, but the four script files provide external data and bio pages.

VisualUnverifiedContent structureHighFunctionGap
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
No rendered example: this entry documents fields, a script integration or a composition recipe. The notes describe the suggested replacement.
Suggested destination · Content Query (default)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Choose external-directory integration or local people post type/taxonomy migration; map person detail fields and bio routes.

What still needs attention

Theme-switching can remove the shortcode’s script paths. Verify data refresh, filters, contact links and direct bio URLs before migration.

Source fields and implementation reference

Custom page-level JavaScript loaded with [local_script script="name"] (plugin newcity-wp-shortcodes) from local-scripts/ .

IntegrateScripts & integrations · CHHS + RDC / shared child themes · sc-rdcbuildlabe

RDC build-lab equipment forms

Equipment booking and submission are application workflows, not content cards or an event-feed listing.

VisualUnverifiedContent structureLowFunctionGap
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
No rendered example: this entry documents fields, a script integration or a composition recipe. The notes describe the suggested replacement.
Suggested destination · Embed (placeholder)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Inventory all 42 equipment/calendar scripts; preserve equipment IDs, booking/submission destinations and required script initialization in a maintained plugin/block. Use a supported embed only if the service permits it.

What still needs attention

No FYE/Stalwart booking or equipment-form block is evidenced. Avoid mapping these to Trumba Events or CTA cards. Test actual submissions and confirmations in a test environment.

Source fields and implementation reference

Custom page-level JavaScript loaded with [local_script script="name"] (plugin newcity-wp-shortcodes) from local-scripts/ .

rdc-build-labs-3D-apollo-submit.js rdc-build-labs-3D-bear-submit.js rdc-build-labs-3D-harvey.js rdc-build-labs-3D-joey-submit.js rdc-build-labs-3D-mars.js rdc-build-labs-3D-samwise.js rdc-build-labs-3D-taz-submit.js rdc-build-labs-3D-xander-submit.js rdc-build-labs-all-calendars-updated-11-19-24.js rdc-build-labs-all-calendars-updated-8-28-25.js rdc-build-labs-all-calendars.js rdc-build-labs-baby-g-submit.js rdc-build-labs-big-red-submit.js rdc-build-labs-blue-submit.js rdc-build-labs-cnc-mill-submit.js rdc-build-labs-cnc-router-submit.js rdc-build-labs-design-thinking-laptop-cart-submit.js rdc-build-labs-direct-to-fabric-or-dye-sublimation-submit.js rdc-build-labs-direct-to-fabric-submit.js rdc-build-labs-dye-sublimation-submit.js rdc-build-labs-embroidery-submit.js rdc-build-labs-exposure-unit-submit.js rdc-build-labs-metal-lathe-submit.js rdc-build-labs-mig-welder-submit.js rdc-build-labs-oxy-fuel-torch-submit.js rdc-build-labs-plasma-cutter-submit.js rdc-build-labs-prototype-lab-demo-space-submit.js rdc-build-labs-quilter-submit.js rdc-build-labs-screen-preparation-and-reclamation-submit.js rdc-build-labs-screen-printing-press-submit.js rdc-build-labs-seam-welder-submit.js rdc-build-labs-spray-booth-submit.js rdc-build-labs-standalone-vr-equipment-submit.js rdc-build-labs-tig-welder-submit.js rdc-build-labs-training-submit.js rdc-build-labs-uv-printer-submit.js rdc-build-labs-vinyl-cutter-and-printer-submit.js rdc-build-labs-welding-booth-1-mig-tig-submit.js rdc-build-labs-welding-booth-2-mig-submit.js rdc-build-labs-welding-cart-1-mig-submit.js …

IntegrateScripts & integrations · CHHS + RDC / shared child themes · sc-other

Other

This group mixes news, announcements, course/catalog data, software checkout and lab widgets; it cannot have one reliable replacement.

VisualUnverifiedContent structureLowFunctionGap
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
No rendered example: this entry documents fields, a script integration or a composition recipe. The notes describe the suggested replacement.
Suggested destination · SOURCE Stories (default)
Open this comparison to load the example.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

news-feed.js → SOURCE Stories. Review each remaining script independently: content-only material may become core blocks; service widgets need a supported embed or integration.

What still needs attention

Fourteen listed entries include .gitkeep, which is not a component. The guide does not demonstrate runtime behavior or all data contracts; classify each executable file before conversion.

Source fields and implementation reference

Custom page-level JavaScript loaded with [local_script script="name"] (plugin newcity-wp-shortcodes) from local-scripts/ .

IntegrateScripts & integrations · CHHS + RDC / shared child themes · sc-shortcodes

Other shortcodes

Inline media and blockquote shortcodes have clear core-block equivalents. Gravity Forms and local_script depend on retained plugins/integrations.

VisualUnverifiedContent structureHighFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
No rendered example: this entry documents fields, a script integration or a composition recipe. The notes describe the suggested replacement.
Suggested destination · All Other WordPress Core Blocks
No rendered example: this entry documents fields, a script integration or a composition recipe. The notes describe the suggested replacement.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

inline_media → Image; custom_blockquote → Quote; gravityform → Gravity Forms block if installed, otherwise core/shortcode with the plugin active; local_script → maintained loader/integration.

What still needs attention

core/html does not implement arbitrary legacy shortcodes. Preserve form IDs, entry routing, notifications and script dependencies; counts in the guide cover post_content only.

Source fields and implementation reference

Shortcodes registered by network plugins.

[local_script] (newcity-wp-shortcodes), [inline_media] , [custom_blockquote] , [gravityform] (Gravity Forms)

AdaptACF groups · CHHS + RDC / shared child themes · acf-groups

All ACF field groups

ACF is the data layer, not a visual component. Legacy flexible slabs become blocks/patterns while header and site options map into a smaller set of destination groups.

VisualNot visualContent structureMediumFunctionPartial
Compare previews & migration notes
Source · CHHS + RDC / shared child themes
No rendered example: this entry documents fields, a script integration or a composition recipe. The notes describe the suggested replacement.
Suggested destination · ACF: Theme: Page Header
No rendered example: this entry documents fields, a script integration or a composition recipe. The notes describe the suggested replacement.

Component examples, not converted pages. Configure image placement, colors and fields as described below. Sample images replace damaged FPO assets. Full examples are available below each preview.

What to carry over

Use the separate ACF crosswalk for individual groups and field transfer rules; preserve shared content as synced patterns where appropriate.

What still needs attention

Do not copy legacy group keys or flex_slabs metadata into new fields. No complete automatic conversion or runtime compatibility is claimed.

Source fields and implementation reference

CHHS: Navigation Settings : Show Breadcrumbs; Sidebar Nav Settings (display, reset to this page) Page Header (Reusable Slabs) : Header Text, Header Image, Button, Secondary Link, Header Style, Color Scheme, Background Texture, Overlay Style Homepage Header : Header Text, Header Image, Header Facts (fact collection) Flexible Landing Page Content : flex_slabs — 8 layouts (see group C) Standard Page Content : flex_slabs (6 layouts) + sidebar (Contact, Teasers) Academic Unit Content : flex_slabs, sidebar, flex_slabs_wide Filtered Directory Listing : directory template settings Footer Content (options) : address, contact name/link Site Title Link (options) : header title/link Sitewide Alerts (options) : headline, body, icon, severity Reusable Sidebar Blocks / Table Slab (options "acf-components") : shared reusable components Menu Fields / Menu Item Fields : menu extras (icons, social) | RDC: Navigation Settings : Show Breadcrumbs; Sidebar Nav Settings (display, reset to this page) Page Header (Reusable Slabs) : Header Text, Header Image, Button, Secondary Link, Header Style, Color Scheme, Background Texture, Overlay Style Homepage Header : Header Text, Header Image, Header Facts (fact collection) Flexible Landing Page Content : flex_slabs — 8 layouts (see group C) Standard Page Content : flex_slabs (6 layouts) + sidebar (Contact, Teasers) Academic Unit Content : flex_slabs, sidebar, flex_slabs_wide Filtered Directory Listing : directory template settings Footer Content (options) : address, contact name/link Site Title Link (options) : header title/link Sitewide Alerts (options) : headline, body, icon, severity Reusable Sidebar Blocks / Table Slab (options "acf-components") : shared reusable components Menu Fields / Menu Item Fields : menu extras (icons, social) RDC Home Page Header / Content : RDC homepage hero + flex_slabs