Roteiro de Viagem – Classic to FSE Migration & Refactoring

This project started as a standard PHP theme and evolved into a technical showcase of a Classic to FSE Migration. Roteiro de Viagem is a minimalist travel blog designed with a “Mobile-First” approach, focusing on speed and reading experience.

VISIT LIVE WEBSITE ↗ HIRE ME / CONTACT
Classic to FSE Migration PHP Refactoring Git & GitHub HTML5 & CSS3 Mobile First

Project Overview

Initially, I built this project using the traditional WordPress structure (Classic Theme) to solidify my PHP and loop manipulation skills. However, as the ecosystem evolved, I decided to refactor the entire codebase, converting it into a Block Theme. This exercise was crucial to understanding the bridge between legacy code and modern block architecture.

The Challenge: Conducting a Classic to FSE Migration

The main challenge was not just building a blog, but completely changing the engine running it.

  • Phase 1 (Legacy): Built with pure PHP, style.css, and standard template hierarchy (index.php, single.php).
  • Phase 2 (Modernization): The goal was to remove the reliance on PHP templates for the layout and delegate control to the Site Editor, requiring a complete Classic to FSE Migration strategy.

Technical Execution: How the Migration was Done

To achieve a successful Classic to FSE Migration, I followed strict development steps:

  • HTML & CSS Refactoring: I cleaned up the hardcoded HTML and converted layout parts into flexible Block Patterns.
  • Adopting theme.json: I replaced the massive CSS stylesheets with a structured theme.json file to control typography, palette, and layout settings globally.
  • Template Conversion: I retired the PHP templates and rebuilt the Single Post and Home layouts using HTML block markup, giving the user full control to change logos, links, and banners via the editor.

Why No Page Builders?

This project strictly avoids page builders like Elementor or Divi. By using native WordPress core functions and Git for version control, I ensured the code remained lightweight. The Classic to FSE Migration resulted in a site that scores high on performance tests because it loads zero unnecessary external libraries.

Conclusion

“Roteiro de Viagem” serves as a proof of concept. It demonstrates my ability to navigate complex refactoring tasks and confirms that I can handle both legacy systems and the latest Classic to FSE Migration workflows required by modern agencies.

FAQ

What is a Classic to FSE Migration?

It is the process of converting a traditional PHP-based WordPress theme into a modern Block Theme (FSE). This involves moving logic from PHP files to HTML templates and theme.json, giving the user full editing control.

Why migrate from Classic to FSE?

A Classic to FSE Migration reduces code complexity (“spaghetti code”), improves site performance by loading fewer scripts, and empowers the client to edit headers and footers without needing a developer for every small change.