Custom WordPress Theme & Gutenberg Blocks Development
About the Project
A complete frontend modernization for a leading IT knowledgebase. Executed in partnership with Enlivy, I translated complex Figma designs into a high-performance, custom WordPress theme. By leveraging the in-house Enlivy Kit, I engineered bespoke Gutenberg blocks and global settings, delivering pixel-perfect accuracy, lightning-fast load times, and total content control for the editorial team.
Tech Stack
WordpressGutenbergPHPHTML5SCSS
Industry: IT Knowledgebase & Enterprise Tech Media
Services: Frontend Engineering, Custom Gutenberg Blocks, WordPress Theme Development
Partner: Enlivy (Strategy, UI/UX Design, Backend Architecture)
The Challenge: Empowering a High-Volume Editorial Team
The client is a highly respected IT knowledgebase, publishing a massive volume of technical articles, tutorials, and enterprise tech news. However, their legacy platform was becoming a bottleneck. The editorial team was restricted by a rigid backend that made creating diverse, engaging layouts difficult without developer intervention.
Furthermore, the site needed a visual and performance overhaul. The challenge was twofold:
- Deliver a fast, modern, and highly readable frontend for millions of IT professionals.
- Build a modular, highly flexible backend that empowers the editorial team to create dynamic pages without writing code.
The Solution & Collaborative Approach
This project was a seamless collaboration with Enlivy. While the agency handled the broader project strategy, backend migration, and provided the comprehensive Figma designs, my role was focused purely on the frontend execution and CMS integration.
My core contributions included:
- Pixel-Perfect Theme Development: I translated the high-fidelity Figma designs into a lightweight, custom WordPress theme, ensuring strict adherence to the new brand guidelines, typography, and responsive breakpoints across all devices.
- Bespoke Gutenberg Blocks: Moving away from rigid page templates, I utilized the in-house Enlivy Kit to engineer a library of custom Gutenberg blocks. This provided the editorial team with a "Lego-like" system to build out articles, landing pages, and resource hubs dynamically.
- Global Settings Implementation: I developed a custom global settings panel within the WordPress dashboard. This allowed site administrators to easily manage global styling, typography adjustments, and site-wide UI elements without touching the codebase.
- Speed Optimization: Because the platform is heavily text and resource-driven, I optimized the SCSS and JavaScript delivery to ensure the new custom blocks didn't bloat the DOM, resulting in a highly performant frontend.