Custom WordPress Theme Development with Elementor
About the Project
Frontend engineering for a high-traffic media site. Key achievements: Figma to HTML/SCSS conversion, implementation of a custom dark mode, and optimization of core web vitals, resulting in under 1.6s load time for logged-in users.
Tech Stack
WordpressElementorFrontendPHPHTML
Industry: Tech News & Media
Services: Frontend Development, WordPress Custom Theme, Responsive Design
Collaboration: Enlivy (Strategy, UI/UX Design, Backend & Project Management)
The Challenge
The client's platform is a leading source for personal technology news, led by Paul Thurrott. Despite its massive content library and premium subscription model, the legacy website was struggling with significant technical debt:
- Poor Performance: Logged-in user experience was slow, with load times reaching up to 3 seconds.
- Outdated UX: The design did not reflect the brand’s modern identity and lacked proper mobile responsiveness.
- Editorial Friction: The editorial team faced difficulties managing content layouts without relying on developers.
- Visual Requirement: The client specifically requested a "Windows App" aesthetic to resonate with their core audience.
The Objective: To rebuild the platform from the ground up, delivering a fast, modern, and highly responsive website that empowers editors while maintaining strict data integrity.
The Solution & Collaborative Approach
This project was executed in partnership with Enlivy. While the partner agency handled the high-level strategy, backend architecture, data migration, and the Figma UI/UX design, my role was to bridge the gap between design and functionality.
My Contribution (Frontend Engineering):
I was responsible for the full frontend implementation, translating complex Figma designs into a pixel-perfect, mobile-responsive WordPress theme.
- Custom Theme Development: I built a highly optimized theme from scratch, writing over 11,000 lines of SCSS and 7,000 lines of JavaScript to ensure a fluid user interface.
- Figma to Code: I converted the static "Windows App-style" designs into functional HTML/CSS, ensuring strict layout fidelity across all viewports.
- Responsive & Dark Mode: I implemented advanced responsive logic for mobile/tablet optimization and integrated a seamless Dark Mode toggle, a highly requested feature by the community.
- Dynamic Templates: Using PHP and core WordPress functions, I built fully editable page templates. This gave the editorial team a custom settings panel to manage layouts and feature premium content dynamically, without touching a single line of code.