16 KiB
16 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, delegation
| phase | plan | type | wave | depends_on | files_modified | autonomous | delegation | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 01-acf-migration-2707 | 01 | execute | 1 |
|
false | off |
Purpose
Currently all content is hardcoded in PHP — any change requires developer intervention. After migration, the client can edit headings, texts, images, and section order directly in WP admin.
Output
page-2707.phprewritten to use ACF Flexible Content viasections.php- Missing layouts added to
sections.phpdispatcher - New
section-collaboration-steps.phppartial for the numbered steps section migrate-2707.phpone-time script to populate ACF content programmatically
Source Files
@wp-content/themes/ostal_WP/page-2707.php @wp-content/themes/ostal_WP/sections.php @wp-content/themes/ostal_WP/template-parts/sections/section-hero-with-form.php @wp-content/themes/ostal_WP/template-parts/sections/section-two-col.php @wp-content/themes/ostal_WP/template-parts/sections/section-two-col-with-bg.php @wp-content/themes/ostal_WP/template-parts/sections/section-gallery.php @wp-content/themes/ostal_WP/template-parts/sections/section-boxes_repeater_img_title_text_cta.php
<acceptance_criteria>
AC-1: Flexible Content dispatcher complete
Given sections.php is loaded on page 2707
When the ACF flexible content field "sections" contains layouts
Then hero_with_form, gallery, and collaboration_steps layouts are dispatched to correct template-parts
AC-2: Collaboration steps layout works
Given a "collaboration_steps" layout is added in ACF admin
When a repeater with step titles is filled in
Then the page renders numbered steps with connecting lines matching the current design
AC-3: Page 2707 uses Flexible Content
Given page-2707.php is loaded
When the page renders
Then all content comes from ACF fields (no hardcoded text/images remain)
And the visual output matches the current hardcoded version when same content is entered in ACF
AC-4: Migration script populates ACF content
Given migrate-2707.php is executed once (via browser or WP-CLI)
When the script runs with WordPress and ACF loaded
Then all 10 flexible content layouts are created for page 2707
And all text, headings, classes, shortcodes, and image URLs are populated
And the page renders with full content without manual data entry
</acceptance_criteria>
Task 1: Add missing layouts to sections.php dispatcher wp-content/themes/ostal_WP/sections.php Add three missing layout dispatchers to the flexible content loop in sections.php:1. `hero_with_form` → loads `template-parts/sections/section-hero-with-form`
2. `gallery` → loads `template-parts/sections/section-gallery`
3. `collaboration_steps` → loads `template-parts/sections/section-collaboration-steps`
Follow the exact same pattern as existing entries (get_row_layout() check + get_template_part).
Do NOT modify any existing layout dispatchers.
ACF sub-fields to use (will need to be registered in ACF admin):
- `section_heading` (text) — section title, e.g. "Jak wygląda współpraca?"
- `steps` (repeater) with sub-field:
- `step_title` (text) — step name
- `bottom_text` (textarea) — text below the steps
HTML structure must match the current hardcoded version exactly:
- Outer: `<section id="collaboration" class="section-boxes-repeater">`
- Inner: `.wrapper.wrapper--inner` > `h2.section-heading.heading--md`
- Steps container: `.collaboration-steps` with max-width 900px, margin auto, padding 20px 0
- Each step: `.collaboration-step` with flex layout, gap 20px, margin-bottom 40px (except last)
- Step number: `.step-number` — circular green gradient (#88b14b → #6a8f3a), 60x60, white text
- Connector line: `.step-connector` — 2px wide, gradient green to gray, between steps (not after last)
- Step content: `.step-content` — gray bg (#f8f9fa), 4px green left border, rounded
- Bottom text: `.col-text-content.mt-4.text-center` > `<p>`
Move inline styles to classes where possible, but keep them if removing would break existing CSS dependencies.
Include the existing hover/responsive CSS from page-2707.php as a <style> block in the partial.
New page-2707.php should contain only:
```php
<?php get_header(); ?>
<?php include( locate_template( 'sections.php' ) ); ?>
<?php get_footer(); ?>
```
This delegates all section rendering to sections.php which dispatches based on ACF layouts.
The user will then need to configure the following layouts in WP admin for page 2707:
1. hero_with_form — heading, text (wysiwyg for multiple paragraphs + bold), form shortcode, bg image
2. two_col_section — "Nasze ogrody zimowe..." (imageLeft, bg-light)
3. two_col_section — "Co wyróżnia nasze ogrody zimowe" (imageLeft, bg-light)
4. collaboration_steps — 5 steps + bottom text
5. two_col_section — "Doświadczenie w systemach aluminiowych" (imageLeft, bg-light)
6. two_col_section — "Planowanie realizacji bez pośpiechu" (imageLeft, bg-light)
7. two_col_section — "Porozmawiajmy o twoim projekcie" (imageLeft, bg-light)
8. two_col_section_with_bg — CTA "Sprawdź orientacyjny budżet" (bg-dark)
9. two_col_section — "Funkcje ogrodów zimowych" (imageLeft, bg-light)
10. gallery — "Nasze realizacje ogrodów zimowych" (6 images)
NOTE on hero_with_form: Current template only outputs one <p> for text field.
The hardcoded page has 3 paragraphs (regular + strong/specs + CTA text).
If the ACF text field is wysiwyg type, all 3 paragraphs can be entered there.
If it's textarea, the template needs modification — check and adapt section-hero-with-form.php
to use wysiwyg or wrap text output in wpautop().
Script structure:
1. WordPress bootstrap: require wp-load.php (relative path from theme dir)
2. Safety check: only run if GET param `?run=migrate-2707` is present
3. Safety check: abort if page 2707 already has sections data
4. Define $page_id = 2707
5. Build $sections array matching ACF Flexible Content structure
The $sections array must contain 10 layouts in this order:
Layout 1: hero_with_form
- acf_fc_layout: "hero_with_form"
- heading: "Całoroczne ogrody zimowe klasy premium"
- text: full HTML with 3 paragraphs (regular text, strong specs with <br>, CTA text)
- form_shortcode: '[contact-form-7 id="21a1143" title="Formularz kontaktowy"]'
- background_image: "/wp-content/uploads/2023/10/ogrody-zimowe.jpg"
- section_id: "hero_box"
Layout 2: two_col_section
- section_heading: "Nasze ogrody zimowe powstają z myślą o klientach, którzy szukają trwałego,<br>elastycznego i bezpiecznego rozwiązania na lata, a nie tymczasowej zabudowy."
- text: "<p>Każda realizacja jest projektowana indywidualnie...</p><p>Realizacje całorocznych ogrodów zimowych rozpoczynają się od około 100 000 zł netto.</p>"
- image: "https://ostal.pl/wp-content/uploads/2026/01/IMG_2832-scaled.jpg"
- additional_class: "imageLeft"
- additional_section_class: "bg-light"
- heading_position: "textRight"
- choose_heading: "h2"
Layout 3: two_col_section
- section_heading: "Co wyróżnia nasze ogrody zimowe"
- text: HTML <ul> list with 5 items + closing paragraph
- image: "https://ostal.pl/wp-content/uploads/2026/01/199-f27gxxl.jpg"
- additional_class: "imageLeft"
- additional_section_class: "bg-light"
- heading_position: "textRight"
- choose_heading: "h2"
Layout 4: collaboration_steps
- section_heading: "Jak wygląda współpraca?"
- steps: repeater with 5 rows:
1. "Rozmowa i analiza potrzeb."
2. "Koncepcja i dobór rozwiązań"
3. "Indywidualna oferta i harmonogram"
4. "Umowa i zaliczka rezerwująca termin"
5. "Produkcja i montaż"
- bottom_text: "Prowadzimy klienta przez cały proces - spokojnie krok po kroku."
Layout 5: two_col_section
- section_heading: "Doświadczenie w systemach aluminiowych"
- text: 2 paragraphs about aluminum systems experience
- image: "/wp-content/uploads/2026/02/att_698c47679eb9b4.14191582.jpeg"
- additional_class: "imageLeft", additional_section_class: "bg-light"
Layout 6: two_col_section
- section_heading: "Planowanie realizacji bez pośpiechu"
- text: paragraph about advance planning
- image: "/wp-content/uploads/2026/02/att_698c4767a04c46.41417006.jpg"
- additional_class: "imageLeft", additional_section_class: "bg-light"
Layout 7: two_col_section
- section_heading: "Porozmawiajmy o twoim projekcie"
- text: paragraph inviting contact
- image: "/wp-content/uploads/2026/02/att_698c47679ad0a0.33546122.jpeg"
- additional_class: "imageLeft", additional_section_class: "bg-light"
Layout 8: two_col_section_with_bg
- section_heading: "Sprawdź orientacyjny budżet projektu"
- cta: "#hero_box"
- cta_text: "Umów rozmowę"
- background_image: "https://ostal.pl/wp-content/uploads/2021/05/hero-about.jpg"
- additional_section_class: "bg-dark"
Layout 9: two_col_section
- section_heading: "Funkcje ogrodów zimowych"
- text: full paragraph about winter garden functions (preserve entities)
- image: "https://ostal.pl/wp-content/uploads/2023/10/DECORATION-PHOTO-1.jpg"
- additional_class: "imageLeft", additional_section_class: "bg-light"
Layout 10: gallery
- section_heading: "Nasze realizacje ogrodów zimowych"
- section_id: "galeria"
- gallery: For images, use helper function to find attachment IDs by URL:
function get_attachment_id_by_url($url) {
global $wpdb;
$path = parse_url($url, PHP_URL_PATH);
$path = preg_replace('/-\d+x\d+(?=\.\w+$)/', '', $path);
$sql = $wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid LIKE %s", '%' . $wpdb->esc_like(basename($path)) . '%');
return (int) $wpdb->get_var($sql);
}
Gallery images (6 URLs from hardcoded page):
- https://ostal.pl/wp-content/uploads/2023/10/202-4c7gxxl.jpg
- https://ostal.pl/wp-content/uploads/2023/10/199-f27gxxl.jpg
- https://ostal.pl/wp-content/uploads/2023/10/20170608_142315-1024x576.jpg
- https://ostal.pl/wp-content/uploads/2023/10/IMG_0535-1-1024x768.jpg
- https://ostal.pl/wp-content/uploads/2023/10/IMG_3754-1-1-1024x768.jpg
- https://ostal.pl/wp-content/uploads/2023/10/Frame-36-1-1024x728.jpg
6. Call update_field('sections', $sections, $page_id)
7. Output success message with count of layouts created
8. Add prominent reminder at end: "DELETE THIS FILE after migration!"
IMPORTANT: Use exact text content from the hardcoded page-2707.php. Copy text verbatim
including HTML tags, <br>, entities, and <strong> formatting.
Script must be idempotent — if sections already exist, show warning and exit.
DO NOT CHANGE
- wp-content/themes/ostal_WP/template-parts/sections/section-hero-with-form.php (only modify if text field needs wpautop — minimal change)
- wp-content/themes/ostal_WP/template-parts/sections/section-two-col.php
- wp-content/themes/ostal_WP/template-parts/sections/section-two-col-with-bg.php
- wp-content/themes/ostal_WP/template-parts/sections/section-gallery.php
- wp-content/themes/ostal_WP/functions.php
- Any other page-*.php files
- wp-content/themes/ostal_WP/page-templates/*
SCOPE LIMITS
- This plan only migrates page-2707.php
- ACF field group for "sections" Flexible Content must already exist in WP (it does — used by other pages)
- New layouts (hero_with_form, gallery, collaboration_steps) must be added to the field group in ACF admin
- No CSS/JS file changes — all existing styles continue to work
- No new dependencies
- migrate-2707.php must be DELETED after successful migration
<success_criteria>
- All 4 auto tasks completed
- Human verification checkpoint approved
- Page 2707 renders identically from ACF content as it did hardcoded
- No regressions on other pages </success_criteria>