Hatu Public Services

A Cornerstone / Pro Theme Demo
Screenshot of the Hatu Public Services website demo
Go To Project ↗

Leveraging a Powerful Builder To Solve Real Production Problems

The Challenge

This project started as a design and accessibility replication effort, but quickly became a deeper test of adaptability and technical troubleshooting. I set out to recreate the look and behavior of a government agency's existing website entirely within the Cornerstone/Pro ecosystem. However, this time I was working outside my usual Bootstrap-style, class-driven workflow.


Along the way, I encountered unexpected challenges: corrupted files, crashing builder behavior caused by custom code, and the need to recover work without losing momentum. At the same time, the site still needed to meet modern expectations for responsiveness, accessible features, and maintainability.

My Solution

I leaned into Cornerstone’s atomic design philosophy rather than fighting it, restructuring my approach to layout, styling, and component reuse. Global headers, footers, and page templates allowed me to populate content quickly while keeping the design consistent across screen sizes.


When custom Global CSS caused the Cornerstone editor to crash entirely, I diagnosed the issue by tracing the problem through my code editor and directly into the WordPress database. By identifying and correcting the problematic CSS via SQL queries, I restored access to the builder and avoided losing hours of work.


Throughout development, I maintained frequent backups, which proved critical when files became unrecoverable. I also used AI strategically to audit custom code for syntax issues, generate common boilerplate structures, and accelerate repetitive tasks without sacrificing quality or control.

Results & Impact

The final result is a fully responsive, accessible WordPress demo that closely mirrors the original design while remaining flexible and easy to extend. Dropdown menus, custom button effects, global styling controls, and a modal search interface with auto-focus all work seamlessly across devices.


Most importantly, the project reinforced production-ready habits: defensive backups, calm debugging under pressure, and the ability to recover from critical failures without starting over. What could have been a blocker became a valuable demonstration of real-world resilience.


Remember: Always backup your work while you develop!

Key Takeaways

  • Adapting to a page builder’s design philosophy is often more effective than forcing familiar patterns.
  • Frequent backups are not optional: they are time insurance.
  • When coding within an all-inclusive application, debugging sometimes requires stepping outside the GUI and into the database itself.
  • AI can be a powerful support tool when used for validation and acceleration, not decision-making.
  • Accessibility audits should be treated as a core development step, not a final checklist item.
← return to case studies