Standardize interior page heroes with ACF customization

- Enhance archive-hero to support optional background images
- Add Page Hero ACF fields (title, subtitle, background) for all pages
- Add Properties Page hero settings in Theme Options
- Update all page templates to use consistent archive-hero style
- Resource pages now use archive-hero with featured image fallback

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

wp-content/themes/homeproz/archive-property.php

@@ -19,11 +19,22 @@ $show_map = isset($_GET['view']) && $_GET['view'] === 'map';
 ?>
 
 <main id="primary" class="site-main property-archive-main">
+    <?php
+    // Get hero content from Theme Options
+    $hero_title = get_field('properties_hero_title', 'option') ?: 'Find Your Perfect Property';
+    $hero_subtitle = get_field('properties_hero_subtitle', 'option') ?: 'Browse our selection of homes, land, and commercial properties in southern Minnesota.';
+    $hero_bg = get_field('properties_hero_background', 'option');
+    $has_bg_class = $hero_bg ? 'has-background' : '';
+    $bg_style = $hero_bg ? 'style="background-image: url(' . esc_url($hero_bg) . ');"' : '';
+    ?>
     <!-- Archive Hero -->
-    <section class="archive-hero">
+    <section class="archive-hero <?php echo esc_attr($has_bg_class); ?>" <?php echo $bg_style; ?>>
+        <?php if ($hero_bg) : ?>
+            <div class="archive-hero-overlay"></div>
+        <?php endif; ?>
         <div class="container">
-            <h1 class="archive-hero-title">Find Your Perfect Property</h1>
+            <h1 class="archive-hero-title"><?php echo esc_html($hero_title); ?></h1>
-            <p class="archive-hero-subtitle">Browse our selection of homes, land, and commercial properties in southern Minnesota.</p>
+            <p class="archive-hero-subtitle"><?php echo esc_html($hero_subtitle); ?></p>
         </div>
     </section>
 

wp-content/themes/homeproz/inc/acf-fields.php

@@ -340,6 +340,41 @@ function homeproz_register_acf_fields() {
                 'default_value' => '111 E Clark St, Albert Lea, MN 56007',
             ),
 
+            // Properties Archive Hero
+            array(
+                'key' => 'field_theme_tab_properties',
+                'label' => 'Properties Page',
+                'name' => '',
+                'type' => 'tab',
+                'placement' => 'left',
+            ),
+            array(
+                'key' => 'field_properties_hero_title',
+                'label' => 'Hero Title',
+                'name' => 'properties_hero_title',
+                'type' => 'text',
+                'default_value' => 'Find Your Perfect Property',
+            ),
+            array(
+                'key' => 'field_properties_hero_subtitle',
+                'label' => 'Hero Subtitle',
+                'name' => 'properties_hero_subtitle',
+                'type' => 'textarea',
+                'rows' => 2,
+                'default_value' => 'Browse our selection of homes, land, and commercial properties in southern Minnesota.',
+            ),
+            array(
+                'key' => 'field_properties_hero_background',
+                'label' => 'Hero Background Image',
+                'name' => 'properties_hero_background',
+                'type' => 'image',
+                'instructions' => 'Optional background image. Recommended size: 1920x400 or larger.',
+                'return_format' => 'url',
+                'preview_size' => 'medium',
+                'library' => 'all',
+                'mime_types' => 'jpg, jpeg, png, webp',
+            ),
+
             // Social Media
             array(
                 'key' => 'field_theme_tab_social',
@@ -389,6 +424,62 @@ function homeproz_register_acf_fields() {
         'instruction_placement' => 'label',
         'active' => true,
     ));
+    // Page Hero Field Group (for all pages except homepage)
+    acf_add_local_field_group(array(
+        'key' => 'group_page_hero',
+        'title' => 'Page Hero',
+        'fields' => array(
+            array(
+                'key' => 'field_page_hero_title',
+                'label' => 'Hero Title',
+                'name' => 'hero_title',
+                'type' => 'text',
+                'instructions' => 'Override the page title in the hero section. Leave empty to use the page title.',
+            ),
+            array(
+                'key' => 'field_page_hero_subtitle',
+                'label' => 'Hero Subtitle',
+                'name' => 'hero_subtitle',
+                'type' => 'textarea',
+                'instructions' => 'Short description shown below the title.',
+                'rows' => 2,
+                'maxlength' => 200,
+            ),
+            array(
+                'key' => 'field_page_hero_background',
+                'label' => 'Hero Background Image',
+                'name' => 'hero_background',
+                'type' => 'image',
+                'instructions' => 'Upload a background image for the hero section. Recommended size: 1920x600 or larger.',
+                'return_format' => 'url',
+                'preview_size' => 'medium',
+                'library' => 'all',
+                'mime_types' => 'jpg, jpeg, png, webp',
+            ),
+        ),
+        'location' => array(
+            // All pages except front page
+            array(
+                array(
+                    'param' => 'post_type',
+                    'operator' => '==',
+                    'value' => 'page',
+                ),
+                array(
+                    'param' => 'page_type',
+                    'operator' => '!=',
+                    'value' => 'front_page',
+                ),
+            ),
+        ),
+        'menu_order' => -1,
+        'position' => 'acf_after_title',
+        'style' => 'default',
+        'label_placement' => 'top',
+        'instruction_placement' => 'label',
+        'active' => true,
+    ));
+
     // Agent Details Field Group
     acf_add_local_field_group(array(
         'key' => 'group_agent_details',

wp-content/themes/homeproz/page-about.php

@@ -17,13 +17,25 @@ get_header();
 <main id="primary" class="site-main about-page-main">
 
     <?php
-    // Hero Section
+    // Get hero content from ACF (Page Hero fields) or defaults
-    get_template_part('template-parts/components/hero-section', null, array(
+    $hero_title = get_field('hero_title') ?: 'About HomeProz';
-        'title' => 'About HomeProz',
+    $hero_subtitle = get_field('hero_subtitle') ?: 'Your trusted real estate partner in Albert Lea and surrounding Minnesota communities.';
-        'subtitle' => 'Your trusted real estate partner in Albert Lea and surrounding Minnesota communities.',
+    $hero_bg = get_field('hero_background');
-        'size' => 'small',
+    $has_bg_class = $hero_bg ? 'has-background' : '';
-    ));
+    $bg_style = $hero_bg ? 'style="background-image: url(' . esc_url($hero_bg) . ');"' : '';
     ?>
+    <!-- Archive Hero -->
+    <section class="archive-hero <?php echo esc_attr($has_bg_class); ?>" <?php echo $bg_style; ?>>
+        <?php if ($hero_bg) : ?>
+            <div class="archive-hero-overlay"></div>
+        <?php endif; ?>
+        <div class="container">
+            <h1 class="archive-hero-title"><?php echo esc_html($hero_title); ?></h1>
+            <?php if ($hero_subtitle) : ?>
+                <p class="archive-hero-subtitle"><?php echo esc_html($hero_subtitle); ?></p>
+            <?php endif; ?>
+        </div>
+    </section>
 
     <!-- Company Story Section -->
     <section class="about-story-section">

wp-content/themes/homeproz/page-communities.php

@@ -24,13 +24,25 @@ $communities = get_terms(array(
 <main id="primary" class="site-main communities-page-main">
 
     <?php
-    // Hero Section
+    // Get hero content from ACF (Page Hero fields) or defaults
-    get_template_part('template-parts/components/hero-section', null, array(
+    $hero_title = get_field('hero_title') ?: 'Communities We Serve';
-        'title' => 'Communities We Serve',
+    $hero_subtitle = get_field('hero_subtitle') ?: 'Explore neighborhoods and find your perfect location in Southern Minnesota';
-        'subtitle' => 'Explore neighborhoods and find your perfect location in Southern Minnesota',
+    $hero_bg = get_field('hero_background');
-        'size' => 'small',
+    $has_bg_class = $hero_bg ? 'has-background' : '';
-    ));
+    $bg_style = $hero_bg ? 'style="background-image: url(' . esc_url($hero_bg) . ');"' : '';
     ?>
+    <!-- Archive Hero -->
+    <section class="archive-hero <?php echo esc_attr($has_bg_class); ?>" <?php echo $bg_style; ?>>
+        <?php if ($hero_bg) : ?>
+            <div class="archive-hero-overlay"></div>
+        <?php endif; ?>
+        <div class="container">
+            <h1 class="archive-hero-title"><?php echo esc_html($hero_title); ?></h1>
+            <?php if ($hero_subtitle) : ?>
+                <p class="archive-hero-subtitle"><?php echo esc_html($hero_subtitle); ?></p>
+            <?php endif; ?>
+        </div>
+    </section>
 
     <!-- Communities Grid Section -->
     <section class="communities-grid-section">

wp-content/themes/homeproz/page-contact.php

@@ -29,13 +29,25 @@ if ($property_inquiry) {
 <main id="primary" class="site-main contact-page-main">
 
     <?php
-    // Hero Section
+    // Get hero content from ACF (Page Hero fields) or defaults
-    get_template_part('template-parts/components/hero-section', null, array(
+    $hero_title = get_field('hero_title') ?: 'Get in Touch';
-        'title' => 'Get in Touch',
+    $hero_subtitle = get_field('hero_subtitle') ?: 'We\'re here to help with all your real estate needs.';
-        'subtitle' => 'We\'re here to help with all your real estate needs.',
+    $hero_bg = get_field('hero_background');
-        'size' => 'small',
+    $has_bg_class = $hero_bg ? 'has-background' : '';
-    ));
+    $bg_style = $hero_bg ? 'style="background-image: url(' . esc_url($hero_bg) . ');"' : '';
     ?>
+    <!-- Archive Hero -->
+    <section class="archive-hero <?php echo esc_attr($has_bg_class); ?>" <?php echo $bg_style; ?>>
+        <?php if ($hero_bg) : ?>
+            <div class="archive-hero-overlay"></div>
+        <?php endif; ?>
+        <div class="container">
+            <h1 class="archive-hero-title"><?php echo esc_html($hero_title); ?></h1>
+            <?php if ($hero_subtitle) : ?>
+                <p class="archive-hero-subtitle"><?php echo esc_html($hero_subtitle); ?></p>
+            <?php endif; ?>
+        </div>
+    </section>
 
     <!-- Contact Section -->
     <section class="contact-section">

wp-content/themes/homeproz/page-resources.php

@@ -23,13 +23,25 @@ $resource_pages = get_pages(array(
 <main id="primary" class="site-main resources-page-main">
 
     <?php
-    // Hero Section
+    // Get hero content from ACF (Page Hero fields) or defaults
-    get_template_part('template-parts/components/hero-section', null, array(
+    $hero_title = get_field('hero_title') ?: 'Resources & Guides';
-        'title' => 'Resources & Guides',
+    $hero_subtitle = get_field('hero_subtitle') ?: 'Everything you need to navigate the home buying and selling process';
-        'subtitle' => 'Everything you need to navigate the home buying and selling process',
+    $hero_bg = get_field('hero_background');
-        'size' => 'small',
+    $has_bg_class = $hero_bg ? 'has-background' : '';
-    ));
+    $bg_style = $hero_bg ? 'style="background-image: url(' . esc_url($hero_bg) . ');"' : '';
     ?>
+    <!-- Archive Hero -->
+    <section class="archive-hero <?php echo esc_attr($has_bg_class); ?>" <?php echo $bg_style; ?>>
+        <?php if ($hero_bg) : ?>
+            <div class="archive-hero-overlay"></div>
+        <?php endif; ?>
+        <div class="container">
+            <h1 class="archive-hero-title"><?php echo esc_html($hero_title); ?></h1>
+            <?php if ($hero_subtitle) : ?>
+                <p class="archive-hero-subtitle"><?php echo esc_html($hero_subtitle); ?></p>
+            <?php endif; ?>
+        </div>
+    </section>
 
     <!-- Main Resources Section -->
     <section class="resources-featured-section">

wp-content/themes/homeproz/page.php

@@ -11,9 +11,29 @@ if (!defined('ABSPATH')) {
 }
 
 get_header();
+
+// Get hero content from ACF (Page Hero fields) or defaults
+$hero_title = get_field('hero_title') ?: get_the_title();
+$hero_subtitle = get_field('hero_subtitle');
+$hero_bg = get_field('hero_background');
+$has_bg_class = $hero_bg ? 'has-background' : '';
+$bg_style = $hero_bg ? 'style="background-image: url(' . esc_url($hero_bg) . ');"' : '';
 ?>
 
 <main id="primary" class="site-main">
+    <!-- Archive Hero -->
+    <section class="archive-hero <?php echo esc_attr($has_bg_class); ?>" <?php echo $bg_style; ?>>
+        <?php if ($hero_bg) : ?>
+            <div class="archive-hero-overlay"></div>
+        <?php endif; ?>
+        <div class="container">
+            <h1 class="archive-hero-title"><?php echo esc_html($hero_title); ?></h1>
+            <?php if ($hero_subtitle) : ?>
+                <p class="archive-hero-subtitle"><?php echo esc_html($hero_subtitle); ?></p>
+            <?php endif; ?>
+        </div>
+    </section>
+
     <div class="container">
         <?php
         while (have_posts()) :

wp-content/themes/homeproz/template-parts/property/property-filters.scss

@@ -4,16 +4,52 @@
  * @package HomeProz
  */
 
-// Archive Hero
+// Archive Hero - Used across all interior pages
 .archive-hero {
+    position: relative;
     background-color: var(--color-bg-card);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     padding: 3rem 0;
     border-bottom: 1px solid var(--color-border);
     margin-bottom: 2rem;
+
+    // When has background image
+    &.has-background {
+        padding: 4rem 0;
+
+        @media (max-width: 768px) {
+            padding: 3rem 0;
+        }
+    }
+
+    .container {
+        position: relative;
+        z-index: 2;
+    }
+}
+
+.archive-hero-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+        to bottom,
+        rgba(10, 10, 10, 0.75) 0%,
+        rgba(10, 10, 10, 0.65) 100%
+    );
+    z-index: 1;
 }
 
 .archive-hero-title {
     margin-bottom: 0.5rem;
+
+    .has-background & {
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
 }
 
 .archive-hero-subtitle {
@@ -21,6 +57,12 @@
     color: var(--color-text-muted);
     margin-bottom: 0;
     max-width: 600px;
+
+    .has-background & {
+        color: var(--color-text);
+        opacity: 0.9;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    }
 }
 
 // View Toggle (Grid/Map)

wp-content/themes/homeproz/template-resource.php

@@ -18,15 +18,29 @@ get_header();
 <main id="primary" class="site-main resource-page-main">
 
     <?php
-    // Hero Section
+    // Get hero content from ACF (Page Hero fields) or defaults
-    $featured_image = get_the_post_thumbnail_url(get_the_ID(), 'full');
+    $hero_title = get_field('hero_title') ?: get_the_title();
-    get_template_part('template-parts/components/hero-section', null, array(
+    $hero_subtitle = get_field('hero_subtitle') ?: get_the_excerpt() ?: 'A comprehensive guide from HomeProz Real Estate';
-        'title' => get_the_title(),
+    $hero_bg = get_field('hero_background');
-        'subtitle' => get_the_excerpt() ?: 'A comprehensive guide from HomeProz Real Estate',
+    // Fall back to featured image if no ACF background set
-        'background_image' => $featured_image,
+    if (!$hero_bg) {
-        'size' => 'small',
+        $hero_bg = get_the_post_thumbnail_url(get_the_ID(), 'full');
-    ));
+    }
+    $has_bg_class = $hero_bg ? 'has-background' : '';
+    $bg_style = $hero_bg ? 'style="background-image: url(' . esc_url($hero_bg) . ');"' : '';
     ?>
+    <!-- Archive Hero -->
+    <section class="archive-hero <?php echo esc_attr($has_bg_class); ?>" <?php echo $bg_style; ?>>
+        <?php if ($hero_bg) : ?>
+            <div class="archive-hero-overlay"></div>
+        <?php endif; ?>
+        <div class="container">
+            <h1 class="archive-hero-title"><?php echo esc_html($hero_title); ?></h1>
+            <?php if ($hero_subtitle) : ?>
+                <p class="archive-hero-subtitle"><?php echo esc_html($hero_subtitle); ?></p>
+            <?php endif; ?>
+        </div>
+    </section>
 
     <!-- Resource Content Section -->
     <section class="resource-content-section">