The Challenge
Friend Family Health Center operates 6 clinic locations with 36 providers spanning 10 medical specialties. Their website needed to help patients, many of whom don't speak English as a first language, find the right provider at the right location. Patients needed to search by clinic or specialty, view each clinic's location on a map, and access the entire site in their preferred language. The organization also needed to manage all of this content independently, without calling a developer every time a new provider joined the practice or a clinic changed its hours.
Our Solution
FatLab built a focused, purpose-built platform centered on three things patients care about most: finding a provider, locating a clinic, and accessing information in their own language. A filterable provider directory lets patients narrow results by clinic location or medical specialty, displaying provider cards with photos, credentials, and bios. Interactive Google Maps show all 6 clinic locations with three different viewing options. Every page on the site is instantly available in 100+ languages through a translator built right into the header. The content system links providers, services, and locations together so information only needs to be entered once and stays consistent everywhere it appears.
What We Built
- A provider directory patients can filter by location and specialty to find the right care
- Interactive Google Maps showing all 6 clinic locations in 3 viewing modes
- 100+ language translation available on every page for diverse patient communities
- A content system linking providers, services, and locations so updates flow everywhere automatically
- 13 flexible page layouts for building and updating content without developer help
- Built-in analytics tracking which content drives the most patient engagement
Project Overview
Friend Family Health Center is a community health organization that provides primary care, behavioral health, dental services, and other essential medical care across multiple locations. The organization serves a diverse patient population, many of whom speak languages other than English as their primary language. For a community health center, the website is not a marketing asset; it is a patient access tool. People need to find a provider who offers the service they need, at a location they can get to, in a language they understand.
When Friend Family Health Center engaged FatLab, they needed a website that could accomplish three things: help patients find the right provider by filtering by location and specialty, show each clinic's location on an interactive map, and present all this information in over 100 languages. The organization also needed the ability to manage providers, services, and locations independently, without calling a developer whenever a new provider joined the practice or a clinic adjusted its hours.
FatLab built a purpose-built WordPress platform designed around those requirements. The site runs on a custom theme with no page builders and no starter themes. Every component was built specifically for how a multi-location community health center operates, from the provider directory to map integration to the language switcher in the site header.
The Provider Directory
How It Works
The provider directory is the primary tool patients use to find care. Two filter dropdowns sit at the top of the directory page: one for location (populated from the Location custom post type) and one for specialty (populated from the Service custom post type). When a patient selects a filter, the directory queries providers using WP_Query with ACF meta queries on relationship fields, returning only those that match the selected criteria.
Results display as a responsive card grid, with each card showing the provider's photo, name, title, and associated locations. Selecting a provider opens a Bootstrap modal containing a full bio, credentials, and links to their practice locations and service specialties. The modals include proper ARIA attributes for accessibility, ensuring that screen readers and keyboard navigation work correctly through the overlay content.
The dual-filter approach means a patient can narrow the directory from 36 providers down to just those at a specific clinic, or just those in a specific specialty, or both. This turns what could be an overwhelming list into a focused result set that answers the question every patient is asking: who can I see, and where.
The Content Model
The directory is powered by three custom post types that form an interconnected content model:
| Custom Post Type | Count | Purpose |
|---|---|---|
| Personnel | 36 | Individual providers with bios, credentials, and photos |
| Service | 10 | Medical specialties offered across the organization |
| Location | 6 | Physical clinic locations with addresses and maps |
These three post types are linked through ACF relationship fields. Each Personnel record connects to one or more Service entries (the specialties that the provider offers) and one or more Location entries (the clinics where they practice). Each Location connects back to its providers, and each Service connects back to the providers who offer it.
This relational structure means content only needs to be entered once. When a new provider is added, the administrator creates a single Personnel entry and uses relationship fields to associate that provider with their locations and specialties. The directory, location pages, and service pages all pull from the same data, so there is no duplication and no risk of information falling out of sync.
Technical Implementation
Custom Theme Architecture
The Friend Family Health Center theme is built entirely from scratch on Bootstrap 5 with an SMACSS-inspired SCSS architecture spanning over 50 source files. There are no page builders, starter themes, or jQuery. Bootstrap 5's vanilla JavaScript handles all interactive components, keeping the total JavaScript payload to 76.9KB.
The theme's functions.php follows a modular loading pattern, importing 11 separate include modules that each handle a discrete area of functionality. This keeps individual files focused and maintainable rather than piling all theme logic into a single file that grows unwieldy over time.
Gutenberg is disabled globally across the site, with the Classic Editor providing the content editing interface. All structured content is managed through ACF field groups rather than block-based editing, providing administrators with a consistent, predictable editing experience. Navigation uses both a custom ARIA-compliant walker for accessibility and a Bootstrap 5 nav walker for responsive menu behavior.
An ACF Options Page provides centralized theme settings, giving administrators a single location to manage site-wide configuration without touching template files.
Google Maps Integration
Each Location custom post type includes an ACF Google Maps field that stores a geocoded address. When an administrator enters or updates a clinic address, the field geocodes it automatically and stores the latitude and longitude alongside the formatted address.
These geocoded locations power three distinct display modes across the site:
| Display Mode | Description |
|---|---|
| Grid | Location cards with embedded individual maps |
| List | Compact location listing with address details |
| Full Map | Interactive map showing all 6 clinic locations with markers |
The maps integration is handled through a dedicated google-maps.php module within the theme's include structure, keeping all Maps API configuration and rendering logic separated from the rest of the theme code. Each display mode reads from the same ACF field, so location information remains consistent whether a patient is browsing the grid view or interacting with the full map.
Multilingual Support
GTranslate provides automatic translation into over 100 languages, with the language switcher embedded directly in the site header. Every page on the site is immediately available in a patient's preferred language without requiring separately maintained translated content.
For a community health center, multilingual support is not optional. Friend Family Health Center serves patient populations that include Spanish-, Polish-, Arabic-, Mandarin-, and dozens of other-language speakers. A patient who cannot read English needs to find a provider, understand available services, and locate the nearest clinic just as easily as an English-speaking patient. The header-embedded language switcher means the translation option is visible on every page from the moment of arrival, not buried in a footer or settings menu.
Flexible Content System
The site uses 13 flexible content layouts built with ACF Pro, allowing administrators to create unique page layouts without developer involvement. Each layout includes global configuration options for background color, full-width or contained display, vertical spacing, and anchor IDs for in-page navigation.
These layouts cover the full range of content patterns a healthcare organization needs: hero sections, media-rich content blocks, staff grids, location displays, call-to-action bands, FAQ accordions, and more. The combination of 13 layouts with configurable options allows administrators to build pages that look distinct while maintaining visual consistency across the site.
A custom CTA tracking system measures the performance of content blocks across the site. The system uses custom database tables to record impressions and clicks on call-to-action elements, providing analytics on which content blocks drive the most patient engagement. This gives the organization data-driven insight into how its content performs without relying on third-party analytics tools for block-level measurement.
Plugin Stack
The site runs 18 active plugins plus the FatLab managed hosting MU-plugin:
| Category | Plugin | Role |
|---|---|---|
| Content Management | ACF Pro (117 fields, 7 field groups) | Flexible content layouts, relationship fields, Google Maps, options page |
| Forms | Gravity Forms | Contact forms, appointment requests, patient communication |
| Translation | GTranslate | Automatic translation into 100+ languages with header switcher |
| Maps | Google Maps API | Geocoded clinic locations in 3 display modes |
| Elastic Email | Transactional email delivery with SPF/DKIM authentication | |
| Performance | Breeze | Page caching with Varnish integration |
| Performance | Imagify | Image optimization for provider photos and content images |
| Analytics | Custom CTA Tracking | Impression and click tracking with custom database tables |
| Managed Hosting | FLWS MU-Plugin (868 lines) | Chart.js admin dashboard, uptime monitoring, backup status |
Security and Infrastructure
FatLab hosts the site on managed cloud infrastructure, delivering the uptime and reliability that a healthcare organization demands. When website downtime means patients cannot find a provider or locate a clinic, hosting is not a commodity. It is part of the care continuum. FatLab's managed security services ensure the platform stays protected and available around the clock.
Cloudflare Enterprise provides WAF protection, CDN distribution, and DDoS mitigation at the edge. Patient-facing web properties need defense against automated attacks and data harvesting, and Cloudflare's enterprise-tier WAF delivers that protection without adding latency to the patient experience.
Breeze handles server-side page caching with Varnish integration, ensuring that the provider directory and location pages load quickly even under traffic spikes. Imagify optimizes uploaded images, keeping page weights manageable across the provider's photo galleries and content imagery.
The FatLab managed hosting MU-plugin provides an administrative dashboard with Chart.js-powered visualizations for uptime monitoring and backup status. At 868 lines, the plugin gives both FatLab and the client direct visibility into hosting health from within the WordPress admin.
Results and Impact
The Friend Family Health Center platform demonstrates what a lean, purpose-built WordPress site looks like when every feature serves a specific need. There are no page builders adding hundreds of kilobytes of unused CSS and JavaScript, no jQuery library loaded alongside Bootstrap 5's native vanilla JavaScript, and no premium theme frameworks with dozens of features the site will never use. The entire front-end JavaScript payload is 76.9KB.
What the site does have is a provider directory that lets patients filter 36 providers across 6 locations and 10 specialties, interactive Google Maps that show clinic locations in three display modes, translation into over 100 languages accessible from every page, and 13 flexible content layouts that let the organization build and update pages independently. A custom CTA tracking system provides content performance analytics through purpose-built database tables, giving the organization insight into which content blocks drive patient engagement.
The content model is the foundation that makes all of this work together. Three custom post types connected through ACF relationship fields mean that provider, service, and location data live in one place and flow consistently throughout the site. When a new provider joins the organization, a single content entry automatically populates the directory, the relevant location pages, and the associated service pages. That is the practical value of a content architecture built for how a community health center actually operates rather than adapted from a generic template.
Results
- 36 providers across 6 locations searchable by specialty and location
- Interactive Google Maps with 3 display modes for clinic discovery
- 100+ language translations available on every page
- 13 flexible content layouts enabling self-service page management
- Custom CTA tracking providing content performance analytics
- Zero jQuery dependency with Bootstrap 5 vanilla JavaScript