Custom WordPress FSE Website for a Tech Startup
Building a fully custom WordPress FSE website with custom blocks, CI pipeline, and performance optimization for a growing tech startup.
Due to client NDA restrictions, project visuals are represented with simplified illustrations. The architecture and metrics reflect the actual implementation.
Chapters
Project Overview
A growing technology startup needed a modern website built from the ground up that would accurately reflect their brand while remaining easy for their small team to maintain.
The design for the website had already been prepared in detailed Illustrator files, and the goal was to translate these designs into a fully custom WordPress website while preserving the exact visual structure.
Another important requirement was that the startup team should be able to manage and update the website themselves without needing ongoing developer support.
To achieve this, the site was built using WordPress Full Site Editing (FSE) and the block editor, allowing flexible content management while keeping the theme architecture clean and lightweight.
Establishing the Design System
The first step was building a robust design system using theme.json.
This centralized configuration defined:
• global typography settings
• color palette
• spacing scale
• layout widths
By establishing the design system early, all components across the website could remain visually consistent while simplifying long-term maintenance.
Custom Block Development
Because the design required precise layouts and UI elements, several custom Gutenberg blocks were developed.
These blocks allowed the design to be reproduced accurately while giving the client flexible content controls inside the editor.
The custom blocks ensured that the startup team could create new content sections without breaking the design structure.
Custom Theme Development
The website was built as a fully custom WordPress theme designed specifically for the project requirements.
The theme architecture focused on:
• lightweight front-end code
• minimal backend complexity
• maintainable template structures
• performance-first development
Modern WordPress hooks and filters were used to implement dynamic features and ensure the interface displayed the exact data required by the design.
Content Architecture
To manage structured content across the site, Custom Post Types and custom fields were implemented using the ACF plugin.
This allowed the client to easily manage different types of content while keeping the WordPress dashboard organized and intuitive.
Custom taxonomies and field groups were used to support various sections of the website.
Development Workflow
To support long-term development and collaboration, a modern development workflow was established.
This included:
• Docker-based local development environment
• Git version control
• GitHub repository management
• GitHub Actions CI pipeline
This workflow allowed the project to remain structured, maintainable, and ready for future development.
Plugin Strategy
Instead of installing many plugins, a curated list of essential plugins was selected to keep the system stable and maintainable.
Examples include:
• ACF for structured content management
• Fluent Forms for project intake and contact forms
• LiteSpeed Cache for performance optimization
This approach reduces plugin conflicts and simplifies long-term maintenance.
Performance Optimization
Because the site was hosted on Hostinger’s LiteSpeed infrastructure, caching was implemented using LiteSpeed Cache.
The caching configuration included:
• page caching
• asset optimization
• lazy loading
• cache preloading
These settings were carefully tuned to maximize performance while maintaining stability.
The final results achieved excellent performance metrics.
Desktop PageSpeed score: 100
Mobile PageSpeed score: 95
Best Practices score: 100
Responsive Testing
Each page was carefully tested across multiple screen sizes to ensure the design remained consistent and usable.
Testing included:
• mobile devices
• tablets
• laptops
• desktop screens
Spacing, typography scaling, and layout behavior were adjusted where necessary to maintain visual balance.
Results
The completed website provides the startup with a modern, fast, and maintainable platform that closely matches the original design.
Key outcomes included:
• 15 custom-designed pages implemented
• custom Gutenberg blocks for flexible content editing
• modern development workflow with CI pipeline
• excellent performance scores
Long-Term Impact
The final website gives the startup team full control over their content while maintaining the design structure and performance quality.
Because the theme is lightweight and built using modern WordPress features, the site remains easy to maintain and ready for future growth.
The founder expressed strong satisfaction with the final result and plans to continue working together on upcoming projects.
