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.

SaaS / Tech
3 weeks
Custom WordPress FSE Website for a Tech Startup

Due to client NDA restrictions, project visuals are represented with simplified illustrations. The architecture and metrics reflect the actual implementation.

Chapters

Tech stack

  • WordPress
  • Gutenberg
  • ACF Blocks
  • Block Patterns
  • Full Site Editing (FSE)
  • Dynamic Blocks
  • LiteSpeed Cache
  • Image Optimization
  • Docker Environment
  • GitHub Actions
  • CI/CD Pipeline
  • Third-Party Integration

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.

100
/100
Google PageSpeed score
15
pages
Built from custom design
2.5
sec
Average page load time
100
/100
Best Practices score

Ready for results like this?

Let’s build something that performs and scales with your growth.

No pressure. Just a focused conversation about your goals — and how to turn them into measurable growth.

Response time: within 24 hours.

Privacy & Cookies

We use cookies to improve site performance and understand how visitors use the site. You can choose what to allow.