Add dev_commit.sh helper and no-emoji mandate
This commit is contained in:
Hanson.xyz Dev
@@ -0,0 +1,807 @@
|
||||
# HomeProz WordPress Website Design Document
|
||||
## Draft v1.0 - For Review
|
||||
|
||||
---
|
||||
|
||||
## 1. Executive Summary
|
||||
|
||||
This document outlines the recommended design approach for the new HomeProz WordPress website. The design will maintain the client's established brand identity while modernizing the presentation and improving user experience through better organization, clearer hierarchy, and enhanced property listing functionality.
|
||||
|
||||
---
|
||||
|
||||
## 2. Current Site Analysis
|
||||
|
||||
### 2.1 Existing Site Overview
|
||||
- **Platform**: GoDaddy Website Builder 8.0
|
||||
- **URL**: https://homeprozrealestate.com/
|
||||
- **Structure**: Single-page scrolling site with sections
|
||||
|
||||
### 2.2 Current Sections (in order)
|
||||
1. Header with logo and hamburger menu
|
||||
2. Hero section - "Find Your Dream Home Today"
|
||||
3. Current Listings carousel (circular images)
|
||||
4. Our Mission statement
|
||||
5. Meet Our Agents (team profiles)
|
||||
6. Testimonials
|
||||
7. Contact form
|
||||
8. Office location & phone numbers
|
||||
9. Social media links (Facebook, TikTok)
|
||||
10. Photo gallery
|
||||
11. Footer with legal/copyright
|
||||
|
||||
### 2.3 Current Brand Elements
|
||||
|
||||
#### Color Palette
|
||||
| Color | Hex Code | Usage |
|
||||
|-------|----------|-------|
|
||||
| Primary Dark | `#000000` | Background |
|
||||
| Accent Red/Rust | `#9F3730` | Buttons, accents |
|
||||
| Accent Light | `#BF524B` | Links |
|
||||
| Hover State | `#EA9491` | Link hover |
|
||||
| Text Light | `#E2E2E2` | Body text |
|
||||
| White | `#FFFFFF` | Headings, highlights |
|
||||
|
||||
#### Typography
|
||||
| Element | Font | Weight |
|
||||
|---------|------|--------|
|
||||
| Headlines | Abril Fatface | 400 |
|
||||
| Body Text | Droid Sans | 400, 700 |
|
||||
|
||||
### 2.4 Current Strengths
|
||||
- Clean, minimalist dark aesthetic
|
||||
- Clear brand colors (rust/terracotta accent)
|
||||
- Professional team photos
|
||||
- Mobile responsive
|
||||
- Contact information prominent
|
||||
|
||||
### 2.5 Current Weaknesses
|
||||
- Property listings link to external sites (Zillow, HomeFinder)
|
||||
- No internal property detail pages
|
||||
- Limited search/filter functionality
|
||||
- Circular crop on property images loses context
|
||||
- No MLS integration or property management
|
||||
- Cookie consent popup needs styling improvement
|
||||
- Footer is cluttered with legal text
|
||||
- Limited SEO capabilities
|
||||
|
||||
---
|
||||
|
||||
## 3. Recommended Design Direction
|
||||
|
||||
### 3.1 Design Philosophy
|
||||
**"Modern Minimalist Real Estate"** - Retain the sophisticated dark theme while adding:
|
||||
- Better visual hierarchy
|
||||
- Improved property presentation
|
||||
- Professional real estate conventions
|
||||
- Enhanced usability
|
||||
|
||||
### 3.2 Refined Color Palette
|
||||
|
||||
| Color | Hex Code | CSS Variable | Usage |
|
||||
|-------|----------|--------------|-------|
|
||||
| Background Dark | `#0A0A0A` | `--color-bg-dark` | Primary background (slightly softer than pure black) |
|
||||
| Background Card | `#161616` | `--color-bg-card` | Card backgrounds, elevated surfaces |
|
||||
| Accent Primary | `#9F3730` | `--color-accent` | CTAs, buttons, highlights |
|
||||
| Accent Hover | `#C8473F` | `--color-accent-hover` | Button hover states |
|
||||
| Accent Light | `#BF524B` | `--color-accent-light` | Links, secondary accents |
|
||||
| Text Primary | `#F5F5F5` | `--color-text` | Headlines, primary text |
|
||||
| Text Secondary | `#B0B0B0` | `--color-text-muted` | Body text, descriptions |
|
||||
| Border | `#2A2A2A` | `--color-border` | Subtle borders, dividers |
|
||||
| Success | `#2E7D32` | `--color-success` | Active listings |
|
||||
| Warning | `#F9A825` | `--color-pending` | Pending listings |
|
||||
| Muted | `#757575` | `--color-sold` | Sold listings |
|
||||
|
||||
### 3.3 Typography System
|
||||
|
||||
```css
|
||||
/* Headings */
|
||||
--font-display: 'Abril Fatface', Georgia, serif;
|
||||
|
||||
/* Body */
|
||||
--font-body: 'Inter', 'Droid Sans', Arial, sans-serif;
|
||||
|
||||
/* Scale */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
--text-3xl: 1.875rem; /* 30px */
|
||||
--text-4xl: 2.25rem; /* 36px */
|
||||
--text-5xl: 3rem; /* 48px */
|
||||
--text-6xl: 3.75rem; /* 60px */
|
||||
```
|
||||
|
||||
**Recommendation**: Consider upgrading from Droid Sans to Inter for body text - it's more modern, has excellent readability, and better web optimization. Abril Fatface remains perfect for display headings.
|
||||
|
||||
---
|
||||
|
||||
## 4. Page Structure & Layout
|
||||
|
||||
### 4.1 Site Architecture
|
||||
|
||||
```
|
||||
Homepage
|
||||
├── Properties (Listings Archive)
|
||||
│ ├── Property Detail Page (single-property.php)
|
||||
│ └── ...
|
||||
├── About Us
|
||||
│ └── Individual Agent Pages (optional)
|
||||
├── Services (optional)
|
||||
├── Blog/News (archive + single posts)
|
||||
│ └── Blog Post (single.php)
|
||||
├── Contact
|
||||
└── Legal Pages (Privacy Policy, Terms)
|
||||
```
|
||||
|
||||
### 4.2 WordPress Template Hierarchy
|
||||
|
||||
The theme will include the following template files:
|
||||
|
||||
| Template File | Purpose |
|
||||
|---------------|---------|
|
||||
| `front-page.php` | Homepage (static front page) |
|
||||
| `page.php` | Default page template |
|
||||
| `page-contact.php` | Contact page with form + map |
|
||||
| `page-about.php` | About/Team page |
|
||||
| `single.php` | Blog post template |
|
||||
| `single-property.php` | Property detail page |
|
||||
| `archive.php` | Blog archive (news/articles) |
|
||||
| `archive-property.php` | Property listings archive |
|
||||
| `search.php` | Search results |
|
||||
| `404.php` | Not found page |
|
||||
| `header.php` | Global header |
|
||||
| `footer.php` | Global footer |
|
||||
|
||||
### 4.3 Page Templates (User-Selectable)
|
||||
|
||||
These templates will be available in the WordPress page editor:
|
||||
|
||||
| Template Name | File | Use Case |
|
||||
|---------------|------|----------|
|
||||
| Default | `page.php` | Standard content pages |
|
||||
| Full Width | `template-full-width.php` | Pages without sidebar |
|
||||
| Landing Page | `template-landing.php` | Marketing/campaign pages (no header/footer nav) |
|
||||
| Blank Canvas | `template-blank.php` | Full control with block editor |
|
||||
| Content + Sidebar | `template-sidebar.php` | Blog-style layout |
|
||||
|
||||
### 4.2 Homepage Layout (Top to Bottom)
|
||||
|
||||
#### Section 1: Header (Sticky)
|
||||
- Logo (left)
|
||||
- Navigation: Properties | About | Contact (center/right)
|
||||
- Phone number CTA button (right)
|
||||
- Mobile: Hamburger menu
|
||||
|
||||
#### Section 2: Hero
|
||||
- Full-width background image/video
|
||||
- Headline: "Find Your Dream Home Today" (Abril Fatface)
|
||||
- Subheadline: "Expert Real Estate Services for Buyers and Sellers"
|
||||
- Primary CTA: "View Properties" button
|
||||
- Secondary CTA: "Contact Us" button
|
||||
|
||||
#### Section 3: Featured Properties
|
||||
- Section title: "Current Listings"
|
||||
- Filter tabs: All | Residential | Commercial | Land
|
||||
- Property cards in grid (3 columns desktop, 2 tablet, 1 mobile)
|
||||
- "View All Properties" link
|
||||
|
||||
#### Section 4: Why Choose HomeProz
|
||||
- Section title: "Our Mission" or "Why HomeProz"
|
||||
- 3-column feature blocks with icons:
|
||||
- Local Expertise
|
||||
- Personalized Service
|
||||
- Results-Driven
|
||||
- Mission statement text
|
||||
|
||||
#### Section 5: Meet the Team
|
||||
- Section title: "Meet Our Agents"
|
||||
- Agent cards in grid (4 columns desktop)
|
||||
- Each card: Photo, Name, Title, Phone, Email
|
||||
- Hover effect reveals bio snippet
|
||||
|
||||
#### Section 6: Testimonials
|
||||
- Section title: "What Our Clients Say"
|
||||
- Testimonial carousel/slider
|
||||
- Client name and transaction type
|
||||
|
||||
#### Section 7: Contact CTA
|
||||
- Split layout: Form (left) | Map + Info (right)
|
||||
- Contact form fields: Name, Email, Phone, Message
|
||||
- Office address, phone numbers
|
||||
- Embedded Google Map
|
||||
|
||||
#### Section 8: Footer
|
||||
- Logo
|
||||
- Quick links
|
||||
- Contact info
|
||||
- Social media icons
|
||||
- Legal text (copyright, DBA, broker info)
|
||||
|
||||
### 4.3 Properties Archive Page
|
||||
|
||||
- Hero with search bar
|
||||
- Filter sidebar (desktop) / Filter modal (mobile)
|
||||
- Property Type
|
||||
- Price Range
|
||||
- Bedrooms
|
||||
- Status (Active, Pending, Sold)
|
||||
- Location/City
|
||||
- Property grid with pagination
|
||||
- Sort options (Price, Date, etc.)
|
||||
|
||||
### 4.4 Property Detail Page
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ [Breadcrumb: Home > Properties > Address] │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ ┌─────────────────────┐ ┌─────────────────────┐ │
|
||||
│ │ │ │ $XXX,XXX │ │
|
||||
│ │ Main Photo │ │ 123 Main Street │ │
|
||||
│ │ Gallery │ │ City, MN 56007 │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ │ 🛏 3 Beds | 🛁 2 Bath │ │
|
||||
│ │ │ │ 📐 1,500 sq ft │ │
|
||||
│ │ │ │ MLS# 12345 │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ [Thumbnail strip] │ │ [Contact Agent] │ │
|
||||
│ └─────────────────────┘ │ [Schedule Showing] │ │
|
||||
│ └─────────────────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Property Description │
|
||||
│ ──────────────────── │
|
||||
│ Lorem ipsum dolor sit amet... │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Features & Amenities │
|
||||
│ ──────────────────── │
|
||||
│ • Feature 1 • Feature 4 • Feature 7 │
|
||||
│ • Feature 2 • Feature 5 • Feature 8 │
|
||||
│ • Feature 3 • Feature 6 • Feature 9 │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Location │
|
||||
│ ──────────────────── │
|
||||
│ [Embedded Google Map] │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Listed By │
|
||||
│ ──────────────────── │
|
||||
│ [Agent Photo] Agent Name | Phone | Email │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Detailed Template Specifications
|
||||
|
||||
### 5.1 Homepage Template (`front-page.php`)
|
||||
|
||||
A modular homepage built with reusable sections. Each section can be toggled on/off via theme options.
|
||||
|
||||
**Sections (in order):**
|
||||
1. Hero Section (full-width image/video + headline + CTAs)
|
||||
2. Featured Properties Grid (3 most recent active listings)
|
||||
3. Value Proposition / Why Choose Us (3-column icon blocks)
|
||||
4. About Preview (brief intro + link to About page)
|
||||
5. Team Preview (agent cards grid)
|
||||
6. Testimonials Carousel
|
||||
7. Contact CTA Section (form + map)
|
||||
8. Footer
|
||||
|
||||
### 5.2 Default Page Template (`page.php`)
|
||||
|
||||
Standard content page with consistent structure:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ HEADER │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Page Hero (optional) │
|
||||
│ ┌─────────────────────────────────────────────┐ │
|
||||
│ │ Page Title (h1) │ │
|
||||
│ │ Optional subtitle/breadcrumb │ │
|
||||
│ └─────────────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Content Area │
|
||||
│ ┌─────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ Block Editor Content │ │
|
||||
│ │ (constrained width: 800px max) │ │
|
||||
│ │ │ │
|
||||
│ └─────────────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ FOOTER │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- Clean, readable content width (65-75 characters per line)
|
||||
- Supports all core WordPress blocks
|
||||
- Optional featured image as page hero
|
||||
- Breadcrumb navigation
|
||||
|
||||
### 5.3 Full Width Template (`template-full-width.php`)
|
||||
|
||||
For pages that need edge-to-edge content:
|
||||
|
||||
**Use Cases:**
|
||||
- Image galleries
|
||||
- Portfolio pages
|
||||
- Pages with custom layouts via blocks
|
||||
- Wide comparison tables
|
||||
|
||||
**Differences from Default:**
|
||||
- No max-width constraint on content
|
||||
- Full-bleed image support
|
||||
- Better for Gutenberg group blocks with backgrounds
|
||||
|
||||
### 5.4 Landing Page Template (`template-landing.php`)
|
||||
|
||||
Distraction-free template for marketing campaigns:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ Minimal Header (logo only, no nav) │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ FULL CONTENT AREA │
|
||||
│ (no sidebar, focused design) │
|
||||
│ │
|
||||
│ Designed for conversion: │
|
||||
│ - Hero with single CTA │
|
||||
│ - Benefits list │
|
||||
│ - Social proof │
|
||||
│ - Form or contact CTA │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Minimal Footer (legal links only) │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Use Cases:**
|
||||
- Property-specific landing pages
|
||||
- Seasonal promotions ("Spring Listings!")
|
||||
- Buyer/Seller guides with lead capture
|
||||
- Ad campaign destinations
|
||||
|
||||
### 5.5 About/Team Page Template (`page-about.php`)
|
||||
|
||||
Specialized template for company and team information:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ HEADER │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Page Hero with Company Photo │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Company Story Section │
|
||||
│ (Block editor content area) │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Our Values / Mission │
|
||||
│ (3-column layout with icons) │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Meet the Team │
|
||||
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
|
||||
│ │Agent│ │Agent│ │Agent│ │Agent│ │
|
||||
│ │Card │ │Card │ │Card │ │Card │ │
|
||||
│ └─────┘ └─────┘ └─────┘ └─────┘ │
|
||||
│ (Auto-populated from Team CPT or ACF) │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Broker Information │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Contact CTA │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ FOOTER │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5.6 Contact Page Template (`page-contact.php`)
|
||||
|
||||
Dedicated contact page with form and location info:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ HEADER │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ "Get In Touch" Hero │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ ┌───────────────────┐ ┌───────────────────────┐ │
|
||||
│ │ │ │ │ │
|
||||
│ │ Contact Form │ │ Contact Info │ │
|
||||
│ │ │ │ - Address │ │
|
||||
│ │ Name │ │ - Phone │ │
|
||||
│ │ Email │ │ - Email │ │
|
||||
│ │ Phone │ │ - Hours │ │
|
||||
│ │ Message │ │ │ │
|
||||
│ │ │ │ [Google Map] │ │
|
||||
│ │ [Send Message] │ │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ └───────────────────┘ └───────────────────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Additional Content (optional) │
|
||||
│ (Block editor area for FAQs, etc.) │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ FOOTER │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5.7 Property Archive Template (`archive-property.php`)
|
||||
|
||||
Listings page with search and filters:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ HEADER │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Hero: "Browse Our Properties" │
|
||||
│ [Search Bar] │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Filter Bar │
|
||||
│ [Type ▼] [Price ▼] [Beds ▼] [Status ▼] [Clear] │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Results: XX Properties Found [Sort: Recent ▼]│
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||
│ │Property │ │Property │ │Property │ │
|
||||
│ │ Card │ │ Card │ │ Card │ │
|
||||
│ └─────────┘ └─────────┘ └─────────┘ │
|
||||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||
│ │Property │ │Property │ │Property │ │
|
||||
│ │ Card │ │ Card │ │ Card │ │
|
||||
│ └─────────┘ └─────────┘ └─────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Pagination: [< Prev] [1] [2] [3] [Next >] │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ FOOTER │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Filter Options:**
|
||||
- Property Type: Residential, Commercial, Land, Multi-Family
|
||||
- Price Range: Slider or preset ranges
|
||||
- Bedrooms: Any, 1+, 2+, 3+, 4+
|
||||
- Bathrooms: Any, 1+, 2+, 3+
|
||||
- Status: Active, Pending, Sold, All
|
||||
- Location/City: Dropdown of available cities
|
||||
|
||||
### 5.8 Single Property Template (`single-property.php`)
|
||||
|
||||
Detailed property view (see Section 4.6 for layout).
|
||||
|
||||
**Key Features:**
|
||||
- Photo gallery with lightbox
|
||||
- Property details sidebar (sticky on scroll)
|
||||
- Tabbed content: Description | Features | Location
|
||||
- Agent contact card
|
||||
- Related/Similar properties
|
||||
- Share buttons
|
||||
- Print-friendly version option
|
||||
|
||||
### 5.9 Blog Archive Template (`archive.php`)
|
||||
|
||||
Blog/News listing page:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ HEADER │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Hero: "News & Insights" │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ ┌──────────────────────┐ ┌──────────────────┐ │
|
||||
│ │ │ │ Sidebar │ │
|
||||
│ │ Post Cards Grid │ │ - Search │ │
|
||||
│ │ ┌──────┐ ┌──────┐ │ │ - Categories │ │
|
||||
│ │ │ Post │ │ Post │ │ │ - Recent Posts │ │
|
||||
│ │ └──────┘ └──────┘ │ │ - Contact CTA │ │
|
||||
│ │ ┌──────┐ ┌──────┐ │ │ │ │
|
||||
│ │ │ Post │ │ Post │ │ │ │ │
|
||||
│ │ └──────┘ └──────┘ │ │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ └──────────────────────┘ └──────────────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Pagination │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ FOOTER │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Post Card Design:**
|
||||
- Featured image (16:9)
|
||||
- Category tag
|
||||
- Post title
|
||||
- Excerpt (2-3 lines)
|
||||
- Date + Read time
|
||||
- "Read More" link
|
||||
|
||||
### 5.10 Blog Post Template (`single.php`)
|
||||
|
||||
Blog/news article page:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ HEADER │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Featured Image (full-width) │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────────────────┐ │
|
||||
│ │ Post Title (h1) │ │
|
||||
│ │ Date | Author | Category │ │
|
||||
│ └─────────────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ ┌──────────────────────┐ ┌──────────────────┐ │
|
||||
│ │ │ │ Sidebar │ │
|
||||
│ │ Post Content │ │ - Search │ │
|
||||
│ │ (Block editor) │ │ - Categories │ │
|
||||
│ │ │ │ - Recent Posts │ │
|
||||
│ │ │ │ - Contact CTA │ │
|
||||
│ │ │ │ │ │
|
||||
│ └──────────────────────┘ └──────────────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Author Bio Box │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Related Posts (3 cards) │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ FOOTER │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5.11 404 Page Template (`404.php`)
|
||||
|
||||
User-friendly error page:
|
||||
|
||||
- Friendly message: "Oops! Page not found"
|
||||
- Search bar
|
||||
- Quick links to: Home, Properties, Contact
|
||||
- Recent/Featured properties
|
||||
- Maintains brand styling
|
||||
|
||||
### 5.12 Search Results Template (`search.php`)
|
||||
|
||||
- Shows results from all searchable content
|
||||
- Filters by content type (Pages, Properties, Posts)
|
||||
- Property results show as cards
|
||||
- Page/Post results show as list items
|
||||
|
||||
---
|
||||
|
||||
## 6. Block Patterns (Reusable Layouts)
|
||||
|
||||
Pre-built block patterns for the client to easily create consistent content:
|
||||
|
||||
### 6.1 Content Patterns
|
||||
|
||||
| Pattern Name | Description |
|
||||
|--------------|-------------|
|
||||
| Hero with CTA | Full-width hero with heading, text, and buttons |
|
||||
| Feature Grid (3-col) | Three columns with icons, headings, and text |
|
||||
| Feature Grid (4-col) | Four columns with icons, headings, and text |
|
||||
| Team Member Card | Single agent/team member display |
|
||||
| Testimonial | Quote with attribution |
|
||||
| Testimonial Carousel | Multiple testimonials in slider |
|
||||
| Stats/Numbers Row | Key statistics with large numbers |
|
||||
| Split Content | Image on one side, text on other |
|
||||
| CTA Banner | Full-width call-to-action section |
|
||||
| FAQ Accordion | Expandable question/answer pairs |
|
||||
| Contact Info Block | Address, phone, email, hours |
|
||||
| Image Gallery | Grid of images with lightbox |
|
||||
| Price Table | Compare service tiers (if needed) |
|
||||
|
||||
### 6.2 Property-Specific Patterns
|
||||
|
||||
| Pattern Name | Description |
|
||||
|--------------|-------------|
|
||||
| Featured Property | Single property highlight |
|
||||
| Property Grid (3) | Three property cards in a row |
|
||||
| Property Carousel | Scrollable property showcase |
|
||||
| Property Search Bar | Search input with filters |
|
||||
|
||||
---
|
||||
|
||||
## 7. Component Design Specifications
|
||||
|
||||
### 7.1 Property Card
|
||||
|
||||
```
|
||||
┌──────────────────────────────┐
|
||||
│ [STATUS BADGE: ACTIVE] │
|
||||
│ ┌──────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ Property Image │ │
|
||||
│ │ (16:10 ratio) │ │
|
||||
│ │ │ │
|
||||
│ └──────────────────────────┘ │
|
||||
│ $XXX,XXX │
|
||||
│ 123 Main Street │
|
||||
│ City, MN 56007 │
|
||||
│ │
|
||||
│ 🛏 3 🛁 2 📐 1,500 sqft │
|
||||
│ │
|
||||
│ [View Details →] │
|
||||
└──────────────────────────────┘
|
||||
```
|
||||
|
||||
**Specifications:**
|
||||
- Card background: `#161616`
|
||||
- Border radius: 8px
|
||||
- Image aspect ratio: 16:10 (better for real estate)
|
||||
- Hover effect: Slight scale (1.02) + shadow
|
||||
- Status badge colors:
|
||||
- Active: Green (`#2E7D32`)
|
||||
- Pending: Yellow (`#F9A825`)
|
||||
- Sold: Gray (`#757575`)
|
||||
|
||||
### 7.2 Agent Card
|
||||
|
||||
```
|
||||
┌──────────────────────────────┐
|
||||
│ ┌──────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ Agent Photo │ │
|
||||
│ │ (Square, rounded) │ │
|
||||
│ │ │ │
|
||||
│ └──────────────────────────┘ │
|
||||
│ │
|
||||
│ Agent Name │
|
||||
│ REALTOR® │
|
||||
│ │
|
||||
│ 📞 507-XXX-XXXX │
|
||||
│ ✉️ email@homeproz.com │
|
||||
└──────────────────────────────┘
|
||||
```
|
||||
|
||||
### 7.3 Buttons
|
||||
|
||||
**Primary Button:**
|
||||
- Background: `#9F3730`
|
||||
- Text: `#FFFFFF`
|
||||
- Padding: 16px 32px
|
||||
- Border radius: 4px
|
||||
- Hover: `#C8473F`
|
||||
- Transition: 0.3s ease
|
||||
|
||||
**Secondary Button:**
|
||||
- Background: transparent
|
||||
- Border: 2px solid `#9F3730`
|
||||
- Text: `#9F3730`
|
||||
- Hover: Fill with `#9F3730`, text white
|
||||
|
||||
### 7.4 Form Fields
|
||||
|
||||
- Background: `#161616`
|
||||
- Border: 1px solid `#2A2A2A`
|
||||
- Border on focus: `#9F3730`
|
||||
- Text color: `#F5F5F5`
|
||||
- Placeholder: `#757575`
|
||||
- Border radius: 4px
|
||||
- Padding: 16px
|
||||
|
||||
---
|
||||
|
||||
## 6. Responsive Breakpoints
|
||||
|
||||
```css
|
||||
/* Mobile First */
|
||||
--breakpoint-sm: 640px; /* Large phones */
|
||||
--breakpoint-md: 768px; /* Tablets */
|
||||
--breakpoint-lg: 1024px; /* Desktop */
|
||||
--breakpoint-xl: 1280px; /* Large desktop */
|
||||
--breakpoint-2xl: 1536px; /* Extra large */
|
||||
```
|
||||
|
||||
### Layout Behavior
|
||||
|
||||
| Element | Mobile | Tablet | Desktop |
|
||||
|---------|--------|--------|---------|
|
||||
| Property Grid | 1 col | 2 col | 3 col |
|
||||
| Agent Grid | 1 col | 2 col | 4 col |
|
||||
| Nav | Hamburger | Hamburger | Full |
|
||||
| Hero CTA | Stacked | Side-by-side | Side-by-side |
|
||||
| Contact Section | Stacked | Split | Split |
|
||||
|
||||
---
|
||||
|
||||
## 7. Imagery Guidelines
|
||||
|
||||
### 7.1 Property Photos
|
||||
- Aspect ratio: 16:10 for cards, flexible for galleries
|
||||
- Minimum resolution: 1200px wide
|
||||
- Format: WebP with JPEG fallback
|
||||
- Optimization: Lazy loading, responsive srcset
|
||||
|
||||
### 7.2 Agent Photos
|
||||
- Aspect ratio: 1:1 (square)
|
||||
- Style: Professional headshot, neutral background
|
||||
- Minimum resolution: 400x400px
|
||||
- Treatment: Slight rounded corners (8px) or circular
|
||||
|
||||
### 7.3 Hero Images
|
||||
- Full-width, high-resolution
|
||||
- Consider: Local landmarks, beautiful homes, team photos
|
||||
- Overlay: Dark gradient for text readability
|
||||
|
||||
---
|
||||
|
||||
## 8. Animation & Interaction
|
||||
|
||||
### 8.1 Micro-interactions
|
||||
- Button hover: Color transition (0.3s)
|
||||
- Card hover: Scale (1.02) + shadow
|
||||
- Link hover: Color transition + underline
|
||||
- Form focus: Border color change
|
||||
|
||||
### 8.2 Page Transitions
|
||||
- Fade in on scroll (intersection observer)
|
||||
- Stagger effect for card grids
|
||||
- Smooth scroll for anchor links
|
||||
|
||||
### 8.3 Loading States
|
||||
- Skeleton screens for property cards
|
||||
- Spinner for form submission
|
||||
- Progressive image loading
|
||||
|
||||
---
|
||||
|
||||
## 9. Accessibility Considerations
|
||||
|
||||
- Minimum contrast ratio: 4.5:1 for text
|
||||
- Focus states: Visible outline on all interactive elements
|
||||
- Skip to content link
|
||||
- Proper heading hierarchy (h1 > h2 > h3)
|
||||
- Alt text for all images
|
||||
- ARIA labels where needed
|
||||
- Keyboard navigation support
|
||||
|
||||
---
|
||||
|
||||
## 10. SEO & Performance
|
||||
|
||||
### 10.1 Technical SEO
|
||||
- Semantic HTML structure
|
||||
- Schema.org markup for:
|
||||
- RealEstateAgent
|
||||
- RealEstateListing
|
||||
- LocalBusiness
|
||||
- XML sitemap
|
||||
- Optimized meta tags per page
|
||||
- Open Graph tags for social sharing
|
||||
|
||||
### 10.2 Performance Targets
|
||||
- Lighthouse score: 90+ (Performance)
|
||||
- First Contentful Paint: < 1.5s
|
||||
- Largest Contentful Paint: < 2.5s
|
||||
- Cumulative Layout Shift: < 0.1
|
||||
|
||||
---
|
||||
|
||||
## 11. Design Mockup References
|
||||
|
||||
Screenshots of current site saved to:
|
||||
- `site_analysis/homepage-full.png` - Full page capture
|
||||
- `site_analysis/homepage-viewport.png` - Above the fold
|
||||
|
||||
---
|
||||
|
||||
## 12. Open Questions for Client Discussion
|
||||
|
||||
1. **Hero Media**: Prefer static image or video background?
|
||||
2. **Team Page**: Individual agent bio pages, or keep on single page?
|
||||
3. **Blog/News**: Future consideration for content marketing?
|
||||
4. **Testimonials**: Have text testimonials ready, or need to collect?
|
||||
5. **Photo Gallery**: Keep existing gallery section, or integrate into properties?
|
||||
6. **Logo**: Current logo is from business card - do you have vector/high-res version?
|
||||
|
||||
---
|
||||
|
||||
## 13. Approval
|
||||
|
||||
This design document is a draft for review. Please provide feedback on:
|
||||
- Color palette refinements
|
||||
- Page structure and sections
|
||||
- Component designs
|
||||
- Any missing elements
|
||||
|
||||
---
|
||||
|
||||
*Document Version: 1.0*
|
||||
*Date: November 28, 2025*
|
||||
*Prepared by: Hanson.xyz Development Team*
|
||||
@@ -0,0 +1,679 @@
|
||||
# HomeProz WordPress Website Implementation Plan
|
||||
## Draft v1.0 - For Review
|
||||
|
||||
---
|
||||
|
||||
## 1. Executive Summary
|
||||
|
||||
This document outlines the implementation approach for building the HomeProz WordPress website. The project will deliver a custom WordPress theme with Advanced Custom Fields (ACF) integration for property management, following modern WordPress development best practices.
|
||||
|
||||
**Estimated Development Time:** 40 hours (as per contract)
|
||||
**Approach:** Custom theme development with ACF Pro for property listings
|
||||
|
||||
---
|
||||
|
||||
## 2. Technology Stack
|
||||
|
||||
### 2.1 Core Platform
|
||||
| Component | Technology | Version |
|
||||
|-----------|------------|---------|
|
||||
| CMS | WordPress | 6.x (latest stable) |
|
||||
| PHP | PHP | 8.1+ |
|
||||
| Database | MySQL/MariaDB | 8.0+ / 10.6+ |
|
||||
| Web Server | Nginx or Apache | Latest |
|
||||
|
||||
### 2.2 Theme Development
|
||||
| Component | Technology | Notes |
|
||||
|-----------|------------|-------|
|
||||
| Base Theme | Custom theme from scratch | No parent theme dependency |
|
||||
| CSS | Modern CSS with CSS Variables | No preprocessor needed |
|
||||
| JavaScript | Vanilla JS + Alpine.js | Lightweight interactivity |
|
||||
| Build Tools | None required | Keep it simple |
|
||||
| Block Editor | Full support | theme.json configuration |
|
||||
|
||||
### 2.3 Required Plugins
|
||||
| Plugin | Purpose | License |
|
||||
|--------|---------|---------|
|
||||
| Advanced Custom Fields Pro | Property fields & flexible content | Paid ($49/yr) |
|
||||
| Contact Form 7 or WPForms Lite | Contact forms | Free |
|
||||
| Yoast SEO or Rank Math | SEO management | Free |
|
||||
| WP Super Cache or LiteSpeed Cache | Caching | Free |
|
||||
| Wordfence or Sucuri | Security | Free tier |
|
||||
| UpdraftPlus | Backups | Free |
|
||||
|
||||
### 2.4 Optional/Recommended Plugins
|
||||
| Plugin | Purpose | When to Add |
|
||||
|--------|---------|-------------|
|
||||
| Imagify or ShortPixel | Image optimization | At launch |
|
||||
| Redirection | URL redirects | If migrating |
|
||||
| Google Site Kit | Analytics integration | Post-launch |
|
||||
|
||||
---
|
||||
|
||||
## 3. Project Structure
|
||||
|
||||
### 3.1 Theme File Structure
|
||||
|
||||
```
|
||||
themes/homeproz/
|
||||
├── assets/
|
||||
│ ├── css/
|
||||
│ │ ├── style.css # Main compiled styles
|
||||
│ │ ├── editor-style.css # Block editor styles
|
||||
│ │ └── components/
|
||||
│ │ ├── buttons.css
|
||||
│ │ ├── cards.css
|
||||
│ │ ├── forms.css
|
||||
│ │ └── navigation.css
|
||||
│ ├── js/
|
||||
│ │ ├── main.js # Main scripts
|
||||
│ │ ├── navigation.js # Mobile menu
|
||||
│ │ └── property-filter.js # AJAX filtering
|
||||
│ ├── images/
|
||||
│ │ ├── logo.svg
|
||||
│ │ └── placeholder.jpg
|
||||
│ └── fonts/ # If self-hosting
|
||||
│
|
||||
├── inc/
|
||||
│ ├── acf-fields.php # ACF field group definitions
|
||||
│ ├── custom-post-types.php # Property CPT registration
|
||||
│ ├── enqueue.php # Script/style enqueuing
|
||||
│ ├── theme-setup.php # Theme supports, menus, etc.
|
||||
│ ├── template-functions.php # Helper functions
|
||||
│ ├── block-patterns.php # Custom block patterns
|
||||
│ └── customizer.php # Theme options (if needed)
|
||||
│
|
||||
├── template-parts/
|
||||
│ ├── header/
|
||||
│ │ ├── site-header.php
|
||||
│ │ └── navigation.php
|
||||
│ ├── footer/
|
||||
│ │ ├── site-footer.php
|
||||
│ │ └── footer-widgets.php
|
||||
│ ├── content/
|
||||
│ │ ├── content-page.php
|
||||
│ │ ├── content-post.php
|
||||
│ │ └── content-none.php
|
||||
│ ├── property/
|
||||
│ │ ├── property-card.php
|
||||
│ │ ├── property-gallery.php
|
||||
│ │ ├── property-details.php
|
||||
│ │ ├── property-filters.php
|
||||
│ │ └── property-agent.php
|
||||
│ ├── components/
|
||||
│ │ ├── agent-card.php
|
||||
│ │ ├── testimonial.php
|
||||
│ │ ├── cta-section.php
|
||||
│ │ └── hero-section.php
|
||||
│ └── blocks/ # Custom block templates
|
||||
│
|
||||
├── patterns/ # Block patterns (WP 6.0+)
|
||||
│ ├── hero-cta.php
|
||||
│ ├── feature-grid.php
|
||||
│ └── team-grid.php
|
||||
│
|
||||
├── templates/ # Full Site Editing templates (optional)
|
||||
│
|
||||
├── 404.php
|
||||
├── archive.php
|
||||
├── archive-property.php
|
||||
├── footer.php
|
||||
├── front-page.php
|
||||
├── functions.php
|
||||
├── header.php
|
||||
├── index.php
|
||||
├── page.php
|
||||
├── page-about.php
|
||||
├── page-contact.php
|
||||
├── search.php
|
||||
├── single.php
|
||||
├── single-property.php
|
||||
├── sidebar.php
|
||||
├── template-full-width.php
|
||||
├── template-landing.php
|
||||
├── template-blank.php
|
||||
├── screenshot.png
|
||||
├── style.css
|
||||
└── theme.json # Block editor config
|
||||
```
|
||||
|
||||
### 3.2 ACF Field Structure
|
||||
|
||||
#### Property Fields Group
|
||||
```
|
||||
Property Details
|
||||
├── Basic Information
|
||||
│ ├── property_status (select: Active, Pending, Sold)
|
||||
│ ├── property_type (select: Residential, Commercial, Land, Multi-Family)
|
||||
│ ├── price (number)
|
||||
│ ├── price_display (text) - for "Call for Price" etc.
|
||||
│ └── mls_number (text)
|
||||
│
|
||||
├── Address
|
||||
│ ├── street_address (text)
|
||||
│ ├── city (text)
|
||||
│ ├── state (text, default: MN)
|
||||
│ ├── zip_code (text)
|
||||
│ └── google_maps_embed (textarea) - or use lat/lng
|
||||
│
|
||||
├── Property Specs
|
||||
│ ├── bedrooms (number)
|
||||
│ ├── bathrooms (number)
|
||||
│ ├── square_feet (number)
|
||||
│ ├── lot_size (text)
|
||||
│ ├── year_built (number)
|
||||
│ └── garage (select: None, 1-car, 2-car, 3+car)
|
||||
│
|
||||
├── Media
|
||||
│ ├── featured_image (uses WP featured image)
|
||||
│ ├── gallery (gallery field)
|
||||
│ └── virtual_tour_url (url) - optional
|
||||
│
|
||||
├── Description
|
||||
│ ├── short_description (textarea) - for cards
|
||||
│ └── full_description (wysiwyg)
|
||||
│
|
||||
├── Features & Amenities
|
||||
│ └── features (checkbox or repeater)
|
||||
│
|
||||
└── Agent Assignment
|
||||
└── listing_agent (post object -> Agent CPT or user select)
|
||||
```
|
||||
|
||||
#### Agent/Team Member Fields
|
||||
```
|
||||
Agent Details
|
||||
├── agent_title (text) - "REALTOR®"
|
||||
├── agent_phone (text)
|
||||
├── agent_email (email)
|
||||
├── agent_bio (wysiwyg)
|
||||
├── agent_photo (image)
|
||||
└── agent_social (repeater: platform, url)
|
||||
```
|
||||
|
||||
#### Testimonials Fields
|
||||
```
|
||||
Testimonial Details
|
||||
├── testimonial_text (textarea)
|
||||
├── client_name (text)
|
||||
├── client_location (text)
|
||||
├── transaction_type (select: Buyer, Seller, Both)
|
||||
└── rating (number 1-5) - optional
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Implementation Phases
|
||||
|
||||
### Phase 1: Foundation (Day 1-2)
|
||||
**Estimated: 8 hours**
|
||||
|
||||
- [ ] Set up local development environment
|
||||
- [ ] Create theme folder structure
|
||||
- [ ] Set up `functions.php` with includes
|
||||
- [ ] Configure `theme.json` for block editor
|
||||
- [ ] Create `style.css` with CSS variables (colors, typography)
|
||||
- [ ] Build `header.php` with navigation
|
||||
- [ ] Build `footer.php` with widgets areas
|
||||
- [ ] Create basic `index.php`, `page.php`
|
||||
- [ ] Register menus (Primary, Footer)
|
||||
- [ ] Set up theme supports (thumbnails, title-tag, etc.)
|
||||
|
||||
**Deliverable:** Basic theme framework with header/footer
|
||||
|
||||
### Phase 2: Property System (Day 3-4)
|
||||
**Estimated: 10 hours**
|
||||
|
||||
- [ ] Register Property custom post type
|
||||
- [ ] Install and configure ACF Pro
|
||||
- [ ] Create Property field groups
|
||||
- [ ] Build `archive-property.php` (listings page)
|
||||
- [ ] Build `single-property.php` (detail page)
|
||||
- [ ] Create `property-card.php` template part
|
||||
- [ ] Create `property-gallery.php` template part
|
||||
- [ ] Create `property-filters.php` template part
|
||||
- [ ] Implement AJAX filtering (property-filter.js)
|
||||
- [ ] Add property status badges
|
||||
- [ ] Test property CRUD in admin
|
||||
|
||||
**Deliverable:** Fully functional property listing system
|
||||
|
||||
### Phase 3: Page Templates (Day 4-5)
|
||||
**Estimated: 8 hours**
|
||||
|
||||
- [ ] Build `front-page.php` (homepage sections)
|
||||
- [ ] Build `page-about.php` (about/team page)
|
||||
- [ ] Build `page-contact.php` (contact page)
|
||||
- [ ] Build `archive.php` (blog listing)
|
||||
- [ ] Build `single.php` (blog post)
|
||||
- [ ] Create `template-full-width.php`
|
||||
- [ ] Create `template-landing.php`
|
||||
- [ ] Build `404.php`
|
||||
- [ ] Build `search.php`
|
||||
- [ ] Create reusable template parts:
|
||||
- [ ] Hero section
|
||||
- [ ] CTA section
|
||||
- [ ] Testimonial component
|
||||
- [ ] Agent card component
|
||||
- [ ] Post card component
|
||||
- [ ] Sidebar widgets
|
||||
- [ ] Set up Contact Form 7 / form plugin
|
||||
|
||||
**Deliverable:** All page templates functional (including blog)
|
||||
|
||||
### Phase 4: Block Patterns & Polish (Day 5-6)
|
||||
**Estimated: 6 hours**
|
||||
|
||||
- [ ] Create block patterns:
|
||||
- [ ] Hero with CTA
|
||||
- [ ] Feature grid (3-col)
|
||||
- [ ] Team grid
|
||||
- [ ] Testimonial
|
||||
- [ ] Split content
|
||||
- [ ] CTA banner
|
||||
- [ ] Add editor styles (`editor-style.css`)
|
||||
- [ ] Ensure block editor matches frontend
|
||||
- [ ] Add responsive styles (mobile, tablet)
|
||||
- [ ] Implement animations/transitions
|
||||
- [ ] Cross-browser testing
|
||||
|
||||
**Deliverable:** Polished theme with reusable patterns
|
||||
|
||||
### Phase 5: Content & SEO (Day 6-7)
|
||||
**Estimated: 4 hours**
|
||||
|
||||
- [ ] Install and configure Yoast/Rank Math
|
||||
- [ ] Add Schema.org markup:
|
||||
- [ ] RealEstateAgent
|
||||
- [ ] RealEstateListing
|
||||
- [ ] LocalBusiness
|
||||
- [ ] Set up XML sitemap
|
||||
- [ ] Configure Open Graph meta tags
|
||||
- [ ] Add favicon and touch icons
|
||||
- [ ] Enter initial content:
|
||||
- [ ] Homepage content
|
||||
- [ ] About page content
|
||||
- [ ] Contact info
|
||||
- [ ] Sample properties (for testing)
|
||||
- [ ] Add team member data
|
||||
|
||||
**Deliverable:** SEO-ready site with initial content
|
||||
|
||||
### Phase 6: Performance & Security (Day 7)
|
||||
**Estimated: 2 hours**
|
||||
|
||||
- [ ] Install caching plugin
|
||||
- [ ] Configure image optimization
|
||||
- [ ] Enable GZIP compression
|
||||
- [ ] Set up lazy loading
|
||||
- [ ] Install security plugin
|
||||
- [ ] Configure SSL/HTTPS
|
||||
- [ ] Set up automated backups
|
||||
- [ ] Run Lighthouse audit
|
||||
- [ ] Address any performance issues
|
||||
|
||||
**Deliverable:** Optimized, secure site
|
||||
|
||||
### Phase 7: Testing & Training (Day 7-8)
|
||||
**Estimated: 2 hours**
|
||||
|
||||
- [ ] Full QA testing:
|
||||
- [ ] All pages render correctly
|
||||
- [ ] Forms submit properly
|
||||
- [ ] Properties filter/search works
|
||||
- [ ] Mobile responsiveness
|
||||
- [ ] Cross-browser (Chrome, Firefox, Safari, Edge)
|
||||
- [ ] Create documentation
|
||||
- [ ] Conduct training session (1-2 hours)
|
||||
- [ ] Client review on staging
|
||||
|
||||
**Deliverable:** Tested site ready for launch
|
||||
|
||||
---
|
||||
|
||||
## 5. Custom Post Types & Taxonomies
|
||||
|
||||
### 5.1 Property CPT
|
||||
|
||||
```php
|
||||
// Registration in custom-post-types.php
|
||||
register_post_type('property', [
|
||||
'labels' => [
|
||||
'name' => 'Properties',
|
||||
'singular_name' => 'Property',
|
||||
'add_new' => 'Add New Property',
|
||||
'add_new_item' => 'Add New Property',
|
||||
'edit_item' => 'Edit Property',
|
||||
'view_item' => 'View Property',
|
||||
'search_items' => 'Search Properties',
|
||||
'not_found' => 'No properties found',
|
||||
],
|
||||
'public' => true,
|
||||
'has_archive' => true,
|
||||
'rewrite' => ['slug' => 'properties'],
|
||||
'menu_icon' => 'dashicons-building',
|
||||
'supports' => ['title', 'editor', 'thumbnail', 'excerpt'],
|
||||
'show_in_rest' => true, // Enable block editor
|
||||
]);
|
||||
```
|
||||
|
||||
### 5.2 Property Taxonomies
|
||||
|
||||
```php
|
||||
// Property Type
|
||||
register_taxonomy('property_type', 'property', [
|
||||
'labels' => ['name' => 'Property Types'],
|
||||
'hierarchical' => true,
|
||||
'rewrite' => ['slug' => 'property-type'],
|
||||
'show_in_rest' => true,
|
||||
]);
|
||||
|
||||
// Property Status (or use ACF field)
|
||||
register_taxonomy('property_status', 'property', [
|
||||
'labels' => ['name' => 'Status'],
|
||||
'hierarchical' => true,
|
||||
'rewrite' => ['slug' => 'status'],
|
||||
'show_in_rest' => true,
|
||||
]);
|
||||
|
||||
// Location/City
|
||||
register_taxonomy('property_location', 'property', [
|
||||
'labels' => ['name' => 'Locations'],
|
||||
'hierarchical' => true,
|
||||
'rewrite' => ['slug' => 'location'],
|
||||
'show_in_rest' => true,
|
||||
]);
|
||||
```
|
||||
|
||||
### 5.3 Agent CPT (Optional)
|
||||
|
||||
If managing agents as posts rather than ACF options:
|
||||
|
||||
```php
|
||||
register_post_type('agent', [
|
||||
'labels' => ['name' => 'Agents', 'singular_name' => 'Agent'],
|
||||
'public' => true,
|
||||
'has_archive' => true,
|
||||
'rewrite' => ['slug' => 'agents'],
|
||||
'menu_icon' => 'dashicons-id-alt',
|
||||
'supports' => ['title', 'thumbnail'],
|
||||
'show_in_rest' => true,
|
||||
]);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Key Features Implementation
|
||||
|
||||
### 6.1 Property Search & Filter
|
||||
|
||||
**Approach:** AJAX-based filtering without page reload
|
||||
|
||||
```javascript
|
||||
// property-filter.js (simplified)
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const filterForm = document.querySelector('.property-filters');
|
||||
|
||||
filterForm.addEventListener('change', function() {
|
||||
const formData = new FormData(filterForm);
|
||||
formData.append('action', 'filter_properties');
|
||||
|
||||
fetch(ajaxurl, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.querySelector('.property-grid').innerHTML = data.html;
|
||||
document.querySelector('.results-count').textContent = data.count;
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### 6.2 Property Gallery
|
||||
|
||||
**Approach:** Lightbox gallery using Fancybox or similar
|
||||
|
||||
- Thumbnail grid below main image
|
||||
- Click to open lightbox
|
||||
- Swipe support on mobile
|
||||
- Lazy loading for performance
|
||||
|
||||
### 6.3 Agent Assignment
|
||||
|
||||
Properties link to agents for "Listed By" section:
|
||||
- ACF relationship field connecting Property -> Agent
|
||||
- Display agent card on single property page
|
||||
- Click to contact or view agent profile
|
||||
|
||||
### 6.4 Contact Form
|
||||
|
||||
Using Contact Form 7 or WPForms:
|
||||
- Standard contact form (Name, Email, Phone, Message)
|
||||
- Property inquiry form (includes property reference)
|
||||
- Email notifications to appropriate agent
|
||||
|
||||
### 6.5 Map Integration
|
||||
|
||||
Options:
|
||||
1. **Google Maps Embed** (simple, free) - paste embed code per property
|
||||
2. **Google Maps API** (interactive) - requires API key, more setup
|
||||
3. **Leaflet/OpenStreetMap** (free, no API key) - good alternative
|
||||
|
||||
Recommendation: Start with embed codes, upgrade to API if needed.
|
||||
|
||||
---
|
||||
|
||||
## 7. Theme Customization Options
|
||||
|
||||
### 7.1 theme.json Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/theme.json",
|
||||
"version": 2,
|
||||
"settings": {
|
||||
"color": {
|
||||
"palette": [
|
||||
{ "slug": "primary", "color": "#9F3730", "name": "Primary" },
|
||||
{ "slug": "primary-dark", "color": "#0A0A0A", "name": "Background" },
|
||||
{ "slug": "text", "color": "#F5F5F5", "name": "Text" },
|
||||
{ "slug": "text-muted", "color": "#B0B0B0", "name": "Text Muted" }
|
||||
]
|
||||
},
|
||||
"typography": {
|
||||
"fontFamilies": [
|
||||
{
|
||||
"fontFamily": "'Abril Fatface', Georgia, serif",
|
||||
"slug": "display",
|
||||
"name": "Display"
|
||||
},
|
||||
{
|
||||
"fontFamily": "'Inter', 'Droid Sans', Arial, sans-serif",
|
||||
"slug": "body",
|
||||
"name": "Body"
|
||||
}
|
||||
]
|
||||
},
|
||||
"spacing": {
|
||||
"units": ["px", "rem", "%"]
|
||||
},
|
||||
"layout": {
|
||||
"contentSize": "800px",
|
||||
"wideSize": "1200px"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 7.2 Customizer Options (if needed)
|
||||
|
||||
- Logo upload
|
||||
- Contact information (phone, email, address)
|
||||
- Social media links
|
||||
- Footer text
|
||||
- Google Analytics ID
|
||||
|
||||
---
|
||||
|
||||
## 8. Content Migration
|
||||
|
||||
### 8.1 From Existing Site
|
||||
|
||||
Content to migrate from homeprozrealestate.com:
|
||||
- [ ] Logo image
|
||||
- [ ] Team member photos and bios
|
||||
- [ ] Property photos (if available)
|
||||
- [ ] Testimonial text
|
||||
- [ ] Company description/mission
|
||||
- [ ] Contact information
|
||||
|
||||
### 8.2 Content Client Must Provide
|
||||
|
||||
- [ ] High-resolution logo (vector preferred)
|
||||
- [ ] Team headshots (professional quality)
|
||||
- [ ] Property listings data
|
||||
- [ ] Property photos
|
||||
- [ ] Written content for About page
|
||||
- [ ] Testimonials with permissions
|
||||
|
||||
---
|
||||
|
||||
## 9. Testing Checklist
|
||||
|
||||
### 9.1 Functionality
|
||||
- [ ] All pages load without errors
|
||||
- [ ] Navigation works (desktop and mobile)
|
||||
- [ ] Property archive displays correctly
|
||||
- [ ] Property filters work
|
||||
- [ ] Single property page displays all fields
|
||||
- [ ] Contact forms submit and send emails
|
||||
- [ ] Search returns relevant results
|
||||
- [ ] 404 page displays for invalid URLs
|
||||
- [ ] Links to external sites work (new tab)
|
||||
|
||||
### 9.2 Responsiveness
|
||||
- [ ] Mobile (320px - 767px)
|
||||
- [ ] Tablet (768px - 1023px)
|
||||
- [ ] Desktop (1024px+)
|
||||
- [ ] Large screens (1440px+)
|
||||
|
||||
### 9.3 Browser Compatibility
|
||||
- [ ] Chrome (latest)
|
||||
- [ ] Firefox (latest)
|
||||
- [ ] Safari (latest)
|
||||
- [ ] Edge (latest)
|
||||
- [ ] iOS Safari
|
||||
- [ ] Android Chrome
|
||||
|
||||
### 9.4 Performance
|
||||
- [ ] Lighthouse Performance score > 90
|
||||
- [ ] Images optimized
|
||||
- [ ] Caching enabled
|
||||
- [ ] No render-blocking resources
|
||||
- [ ] Core Web Vitals pass
|
||||
|
||||
### 9.5 SEO
|
||||
- [ ] All pages have unique titles
|
||||
- [ ] Meta descriptions set
|
||||
- [ ] Schema markup validates
|
||||
- [ ] XML sitemap generated
|
||||
- [ ] robots.txt configured
|
||||
- [ ] Canonical URLs set
|
||||
|
||||
---
|
||||
|
||||
## 10. Documentation Deliverables
|
||||
|
||||
### 10.1 User Documentation
|
||||
- Adding/editing properties guide
|
||||
- Managing property photos
|
||||
- Updating team information
|
||||
- Using the contact form
|
||||
- Basic WordPress admin guide
|
||||
|
||||
### 10.2 Developer Documentation
|
||||
- Theme structure overview
|
||||
- ACF field reference
|
||||
- Custom functions reference
|
||||
- Deployment notes
|
||||
|
||||
---
|
||||
|
||||
## 11. Post-Launch Support
|
||||
|
||||
### 11.1 Included in Warranty (60 days)
|
||||
- Bug fixes for custom code
|
||||
- Functionality not working as designed
|
||||
- Critical issues
|
||||
|
||||
### 11.2 Not Included (quoted separately)
|
||||
- New features
|
||||
- Design changes
|
||||
- Third-party plugin issues
|
||||
- Content updates
|
||||
- Training beyond initial session
|
||||
|
||||
### 11.3 Ongoing Hosting Support (2 hrs/month)
|
||||
- WordPress core updates
|
||||
- Plugin updates
|
||||
- Security monitoring
|
||||
- Backup verification
|
||||
- Minor content assistance
|
||||
|
||||
---
|
||||
|
||||
## 12. Risk Mitigation
|
||||
|
||||
| Risk | Mitigation |
|
||||
|------|------------|
|
||||
| ACF Pro license expiration | Included in hosting; developer manages renewal |
|
||||
| Plugin conflicts | Minimal plugin approach; test thoroughly |
|
||||
| Performance issues | Build lightweight; optimize images; use caching |
|
||||
| Content delays | Clear client responsibilities; content deadline |
|
||||
| Scope creep | Defined deliverables; change order process |
|
||||
| Browser compatibility | Test on all major browsers before launch |
|
||||
|
||||
---
|
||||
|
||||
## 13. Timeline Summary
|
||||
|
||||
| Phase | Duration | Deliverable |
|
||||
|-------|----------|-------------|
|
||||
| 1. Foundation | 2 days | Theme framework |
|
||||
| 2. Property System | 2 days | Property CPT + templates |
|
||||
| 3. Page Templates | 2 days | All page templates |
|
||||
| 4. Block Patterns | 1 day | Reusable patterns |
|
||||
| 5. Content & SEO | 0.5 day | SEO setup + content |
|
||||
| 6. Performance | 0.5 day | Optimized site |
|
||||
| 7. Testing & Training | 1 day | Launch-ready |
|
||||
| **Total** | **~8-9 days** | **Complete website** |
|
||||
|
||||
*Note: Actual calendar time may vary based on client feedback cycles.*
|
||||
|
||||
---
|
||||
|
||||
## 14. Open Questions / Decisions Needed
|
||||
|
||||
1. **Agent Management:** Use ACF options page or separate Agent CPT?
|
||||
2. **Testimonials:** Static content or Testimonial CPT for easy management?
|
||||
3. **Maps:** Google Maps embed or full API integration?
|
||||
4. **Property Images:** Max file size / dimensions requirements?
|
||||
5. **Email Notifications:** Which email(s) receive form submissions?
|
||||
|
||||
---
|
||||
|
||||
## 15. Approval
|
||||
|
||||
This implementation plan is a draft for review. Please confirm:
|
||||
- Technology stack is acceptable
|
||||
- Phase breakdown makes sense
|
||||
- All required features are covered
|
||||
- Any adjustments needed
|
||||
|
||||
---
|
||||
|
||||
*Document Version: 1.0*
|
||||
*Date: November 28, 2025*
|
||||
*Prepared by: Hanson.xyz Development Team*
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 429 KiB |
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user