brianhansonxyz/homeproz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardize interior page heroes with ACF customization

Browse Source 
- 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>
This commit is contained in:
Hanson.xyz Dev
2025-11-30 22:51:04 -06:00
parent 4be4edb4ad
commit 837b3219fb
10 changed files with 263 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wp-content/themes/homeproz/archive-property.php
+14 -3
View File
@@ -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>
<p class="archive-hero-subtitle">Browse our selection of homes, land, and commercial properties in southern Minnesota.</p>
<h1 class="archive-hero-title"><?php echo esc_html($hero_title); ?></h1>
<p class="archive-hero-subtitle"><?php echo esc_html($hero_subtitle); ?></p>
</div>
</section>
wp-content/themes/homeproz/dist/assets/main.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-content/themes/homeproz/inc/acf-fields.php
+91
View File
@@ -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
+18 -6
View File
@@ -17,13 +17,25 @@ get_header();
<main id="primary" class="site-main about-page-main">
<?php
// Hero Section
get_template_part('template-parts/components/hero-section', null, array(
'title' => 'About HomeProz',
'subtitle' => 'Your trusted real estate partner in Albert Lea and surrounding Minnesota communities.',
'size' => 'small',
));
// Get hero content from ACF (Page Hero fields) or defaults
$hero_title = get_field('hero_title') ?: 'About HomeProz';
$hero_subtitle = get_field('hero_subtitle') ?: 'Your trusted real estate partner in Albert Lea and surrounding Minnesota communities.';
$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) . ');"' : '';
?>
<!-- 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
+18 -6
View File
@@ -24,13 +24,25 @@ $communities = get_terms(array(
<main id="primary" class="site-main communities-page-main">
<?php
// Hero Section
get_template_part('template-parts/components/hero-section', null, array(
'title' => 'Communities We Serve',
'subtitle' => 'Explore neighborhoods and find your perfect location in Southern Minnesota',
'size' => 'small',
));
// Get hero content from ACF (Page Hero fields) or defaults
$hero_title = get_field('hero_title') ?: 'Communities We Serve';
$hero_subtitle = get_field('hero_subtitle') ?: 'Explore neighborhoods and find your perfect location in Southern Minnesota';
$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) . ');"' : '';
?>
<!-- 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
+18 -6
View File
@@ -29,13 +29,25 @@ if ($property_inquiry) {
<main id="primary" class="site-main contact-page-main">
<?php
// Hero Section
get_template_part('template-parts/components/hero-section', null, array(
'title' => 'Get in Touch',
'subtitle' => 'We\'re here to help with all your real estate needs.',
'size' => 'small',
));
// Get hero content from ACF (Page Hero fields) or defaults
$hero_title = get_field('hero_title') ?: 'Get in Touch';
$hero_subtitle = get_field('hero_subtitle') ?: 'We\'re here to help with all your real estate needs.';
$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) . ');"' : '';
?>
<!-- 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
+18 -6
View File
@@ -23,13 +23,25 @@ $resource_pages = get_pages(array(
<main id="primary" class="site-main resources-page-main">
<?php
// Hero Section
get_template_part('template-parts/components/hero-section', null, array(
'title' => 'Resources & Guides',
'subtitle' => 'Everything you need to navigate the home buying and selling process',
'size' => 'small',
));
// Get hero content from ACF (Page Hero fields) or defaults
$hero_title = get_field('hero_title') ?: 'Resources & Guides';
$hero_subtitle = get_field('hero_subtitle') ?: 'Everything you need to navigate the home buying and selling process';
$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) . ');"' : '';
?>
<!-- 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
+20
View File
@@ -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
+43 -1
View File
@@ -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
+22 -8
View File
@@ -18,15 +18,29 @@ get_header();
<main id="primary" class="site-main resource-page-main">
<?php
// Hero Section
$featured_image = get_the_post_thumbnail_url(get_the_ID(), 'full');
get_template_part('template-parts/components/hero-section', null, array(
'title' => get_the_title(),
'subtitle' => get_the_excerpt() ?: 'A comprehensive guide from HomeProz Real Estate',
'background_image' => $featured_image,
'size' => 'small',
));
// 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') ?: get_the_excerpt() ?: 'A comprehensive guide from HomeProz Real Estate';
$hero_bg = get_field('hero_background');
// Fall back to featured image if no ACF background set
if (!$hero_bg) {
$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">