Resolve Foundation WordPress Theme
A fully custom WordPress theme built entirely with Gutenberg blocks, designed to support a bilingual (English/Chinese) nonprofit organization website. The theme was developed from scratch without relying on page builders, emphasizing modern WordPress development practices, SEO optimization, and progressive enhancement.
The Problem
Bilingual Website Requirements
Resolve Foundation needed a fully bilingual website (English/Chinese) to serve their diverse community in Hong Kong. Existing WordPress solutions either lacked proper multilingual support or relied on page builders that created technical debt and limited customization.
Modern WordPress Development
The organization required a theme built with modern WordPress practices—using Gutenberg blocks instead of page builders, with server-side rendering for SEO, and progressive enhancement for performance. The solution needed to be maintainable and extensible for a nonprofit with limited technical resources.
Content Management Flexibility
With multiple content types (news, programs, people, resources) and complex filtering needs, the theme required a flexible block-based architecture that could handle dynamic content queries, pagination, and multilingual filtering without compromising performance or SEO.
Constraints & Considerations
- Built from Ground Up — No page builders allowed. The theme had to be built entirely with Gutenberg blocks, requiring custom block development with React for the editor experience and PHP for server-side rendering.
- Bilingual Support — Full English/Chinese support required deep integration with the Bogo multilingual plugin, including language switchers, REST API filtering, and translation-aware content delivery.
- SEO Optimization — All dynamic content needed server-side rendering for search engine visibility, while maintaining progressive enhancement for interactive features like AJAX pagination and filtering.
- Performance Requirements — The theme needed to handle complex queries, multiple post types, and dynamic filtering without compromising page load times or user experience.
- Content Management Complexity — Support for 9+ custom post types, multiple taxonomies, ACF fields, and extensive block patterns required a well-organized, maintainable codebase with comprehensive documentation.
Approach & Execution
Developed a comprehensive WordPress theme from scratch using modern block-based architecture. The theme combines React-powered editor experiences with PHP server-side rendering, ensuring both excellent developer experience and optimal SEO performance.
Block-Based Architecture
Built 13 custom Gutenberg blocks with React for the editor interface and PHP for server-side rendering. The hybrid rendering approach ensures SEO-friendly initial page loads while providing rich interactive experiences through progressive enhancement. Blocks include header, footer, banner, stats counter, marquee, post query blocks, testimonials, buttons, headings, and conditional rendering blocks.
Multilingual Features
Deeply integrated the Bogo multilingual plugin for full English/Chinese support. Implemented language switchers in header (desktop dropdown) and mobile menu (footer), REST API language filtering, bilingual block patterns, and translation-aware content delivery. All dynamic content queries automatically filter by locale, and tag searches support both original and translated tag names.
REST API Enhancements
Extended WordPress REST API with custom endpoints and query parameters. Created a tag search endpoint with Bogo translation support, custom resolver year filtering, match-all-categories logic, and automatic language detection. All ACF fields are automatically exposed in the REST API, enabling seamless AJAX pagination and filtering without page reloads.
Pattern Library & Templates
Developed 56+ block patterns organized into categories (theme-specific, static blocks, dynamic blocks, page templates, post templates, query loops). Created custom page templates for careers, internships, donations, media coverage, news, people directory, and resources. Each template uses block patterns for consistency and maintainability.
Advanced Features
Integrated ACF with custom field rendering functions and shortcodes. Enhanced YouTube embed handling with comprehensive oEmbed fixes. Built a bilingual subscribe modal with Mailchimp integration. Created a flexible navigation system with custom menu walkers, dropdown support, and mobile menu animations. All features follow progressive enhancement principles.
Outcome & Impact
Technical Excellence
Delivered a fully block-based theme with no page builders, ensuring maintainability and future-proofing. Server-side rendering for all dynamic content ensures excellent SEO performance, while progressive enhancement provides optimal user experience. The theme achieved WCAG 2.1 AA accessibility compliance and responsive design across all devices.
Multilingual Implementation
Successfully implemented full bilingual support with seamless language switching, REST API language filtering, and translation-aware content delivery. The Bogo plugin integration enables content editors to manage translations efficiently, while users experience consistent bilingual navigation and content across all pages and post types.
Developer Experience
Created a modern development workflow using @wordpress/scripts, SCSS, and ES6+ JavaScript. Comprehensive documentation includes setup guides, block architecture documentation, and multilingual setup instructions. The modular codebase with 13 reusable blocks and 56+ patterns enables rapid content creation while maintaining design consistency.
Modern WordPress development with Gutenberg blocks enables powerful, maintainable themes that combine the best of React's developer experience with PHP's SEO advantages. By building from scratch with progressive enhancement, we created a bilingual nonprofit website that balances flexibility, performance, and ease of use—proving that custom block development can deliver enterprise-grade solutions without page builder dependencies.