truBody
Custom WordPress Theme & Gutenberg Block Plugin Development
Tools Used
Challenges
- Building custom blocks using Gutenberg instead of ACF.
- Maintaining accurate design and responsiveness in both the Gutenberg editor and the live front end.
- Making the theme scalable and ready for multi-site use.
Solutions
- Researched and implemented WordPress’s @wordpress/create-block system to develop a custom block plugin. Structured the plugin for scalability, modular block management, and easy future extension.
- Created dual SCSS structures to style each block for both environments, ensuring pixel-perfect fidelity and a seamless editing experience.
- Structured the theme and plugin architecture with shared components, reusable logic, and dynamic content registration to support future site expansions across different markets.
My Role
This project focused on building a sleek, scalable, and performance-optimized WordPress website for truBody, a wellness brand offering noninvasive body-sculpting treatments. The site was designed to deliver a smooth, modern experience while maintaining flexibility for future content growth and multi-site expansion.
Unlike traditional builds using Advanced Custom Fields (ACF), this project leveraged the native WordPress Gutenberg block editor. To meet the client’s request for a fully block-based editing experience, I developed a custom Gutenberg block plugin from scratch, providing reusable and branded content blocks that empowered editors to manage complex layouts intuitively.
As the Front-End Developer, I built a custom WordPress theme and block-based content architecture using React-driven Gutenberg components. I utilized @wordpress/create-block and @wordpress/scripts — official WordPress packages — to scaffold and compile custom blocks, integrating PHP, JavaScript (ES6), and SCSS into a unified workflow.
Each block was engineered to be fully responsive and visually consistent in both the editor and the live front end, maintaining a true WYSIWYG editing experience. I also optimized site performance, accessibility (WCAG 2.0), and scalability to ensure the foundation could support multi-regional expansion.