WordPress Custom Theme
A fully customizable classic WordPress theme built for a real daycare client — from Figma mockup to live CMS, with zero-code content updates.
Overview
Sunshine Nest Daycare needed a website that reflected their warm, community-focused identity — but more importantly, one their non-technical team could actually update themselves. No developers on call, no code required.
I designed and built a complete classic WordPress theme from scratch, using the WordPress Customizer API and Advanced Custom Fields (ACF) to give the client full control over images, text, and layout — all from the WordPress admin dashboard.
The Challenge
Build a theme that's powerful enough for a developer to build, simple enough for a daycare owner to maintain.
The core tension: maximum design control during development, maximum content flexibility after handoff. Every image on the homepage needed to be replaceable by the client without touching a single line of code.
- Client had no technical background — no FTP, no code editor
- Homepage had multiple image sections that would need regular updates
- Gallery needed drag-and-drop management
- Footer required dynamic contact info including an embedded Google Map
From Design to Dynamic CMS
Starting in Figma
I started with a full Figma mockup before writing a single line of PHP. This let me get client sign-off on the visual direction first — layout, color, typography, and component design — before tackling the technical implementation.
WordPress Customizer Integration
The biggest technical challenge was letting the client upload their own images for
each homepage section. I used WP_Customize_Image_Control
to add image upload fields for every section directly in the WordPress Customizer panel. At first I didn't
know this API existed — with some research I learned how it works and applied it across the entire
homepage.
ACF Integration
Advanced Custom Fields handled everything the Customizer couldn't — footer contact
details, program descriptions, and an embedded Google Map on the Contact page. ACF fields were added to
the
page.php template using get_field(),
keeping
the admin interface clean and intuitive.
Key Features Delivered
- Custom image upload controls for all homepage sections via WordPress Customizer API
- Responsive card layouts with consistent sizing — solved card height inconsistency using
-webkit-line-clampon post excerpts - Dynamic gallery system with drag-and-drop image management through WordPress admin
- ACF integration for footer contact info, program details, and Google Maps embed
- Clean PHP template organization — separate files for header, footer, front-page, single, and page templates
- Fully responsive across desktop, tablet, and mobile
Challenges & Learning
What didn't go smoothly
My PHP knowledge was the biggest constraint. I only implemented functions I fully understood — which meant some features I wanted, like individual child pages for each program card, had to be simplified. The gallery grid also went through several iterations before the layout was right.
Overriding Bootstrap
Bootstrap provided a fast foundation for responsive layout, but customizing its defaults required significant additional CSS. Getting the navbar to look exactly how I wanted took the most time — multiple rounds of custom overrides until it matched the Figma design.
The card height problem
News blog cards were breaking the grid because some posts had more text than others,
making cards uneven heights. The fix was -webkit-line-clamp: 3
on post excerpts — limiting all excerpts to exactly three lines and locking every card to the same height.
Outcome
Zero-code content updates. Fully responsive. Easy maintenance.
The client can now log into WordPress and update any image, text block, program description, or contact detail without touching the codebase. The theme is structured so future developers could easily extend it — clean template separation, documented ACF fields, and commented PHP throughout.
This project taught me how to balance design vision with technical constraints in a real client context — and how to make decisions based on what I actually understand rather than overreaching and shipping something broken.