Here begins my little journey toward modernizing and redesigning my blog — a process full of experiments, missteps, and small victories.
I felt like the visual side of my blog theme needed a serious overhaul. Why? Because I had started experimenting with blogging itself—not just as a developer, but as a content manager, an SEO apprentice, and a humble blogger. I wanted to explore all the sides of WordPress content work. Back then, I didn’t have the time to design a flashy theme from scratch, and honestly, my soul just didn’t allow me to borrow or buy a ready-made one.
This is a screen of an old design (in case if you read it with a new one).
Originally, the backend was built on the Sage framework. It’s powerful, sure, but after a while I decided to simplify. So I switched to the legendary (and slightly outdated) Underscores (_s) starter theme. Yes, it may be aging, but it’s simple, straightforward, and does the job.
I chose it over Sage because, at the time, I felt Sage was a bit too heavy for my needs. Don’t get me wrong—Sage is a fantastic tool with a modern workflow and cool features. I’ll probably use it again for a big project someday. But for now, I didn’t want to spend too much time climbing that learning curve.
As for the blog theme, I’ve decided that someday I’ll move it to Next.js for a fully headless experience. That’s my dream. But until then, it was facelift time. And hey—why not clean out all the old, dusty code while I’m at it?
Before diving into the technical suggestions, I actually documented the full process of how I generated the new design for this blog—from moodboards to UI tweaks—in a separate post. You can read that here.
So I started with an AI-powered evaluation using Claude AI, which generously offered the following advice:
Modern WordPress Theme Development Proposals (a.k.a. Claude’s TED Talk)
1. Build System & Tooling Modernization
Current issues:
- Only basic SASS compilation
- No modern bundling or optimization
- Manual CSS/JS concatenation
Proposals: - Use Vite or Webpack
- Add PostCSS
- Implement Babel for ES6+
- Image optimization pipeline
- Hot module replacement
2. CSS Architecture Improvements
Current issues:
- Bloated Bootstrap import
- Manual overrides
- Old-school SCSS comments
Proposals: - Use CSS custom properties
- Switch to CSS Grid/Flex utilities
- Remove unused Bootstrap code
- Implement design tokens
3. JavaScript Modernization
Current issues:
- IIFE-based vanilla JS
- No modules or TypeScript
Proposals: - Use ES modules
- Add TypeScript
- Event delegation and Web Components
4. PHP Structure & Performance
Current issues:
- No autoloading
- No namespaces
- Minimal caching
Proposals: - OOP with namespaces
- Service containers
- Dependency injection
- Fragment caching and lazy loading
5. Dev Experience
Current issues:
- No hot reload
- No automated testing
- Manual deployment
Proposals: - Docker setup
- GitHub Actions for CI/CD
- Pre-commit hooks
- Component-driven approach
6. Modern WP Features
Current issues:
- No block editor
- No REST API use
Proposals: - Custom Gutenberg blocks
- Full Site Editing support
- REST API integrations
7. File Structure Reorganization
(No comments. Just… do it.)
Let’s start with Build System
Okay, yes—it took me a while to get to this point. I’d been focused on content strategy, SEO, and blogging workflow. The frontend suffered, I admit.
But when I got to Proposal #1 (Build System & Tooling Modernization), something clicked: Vite. I thought, “Hmm… why not?” I gave it a try, and boom—it just worked. Mostly.
So I dove into integrating Vite with WordPress. Because it’s 2025 and we’re living in the AI era, I asked my new coding buddy Claude Code AI (console edition) to help out. It was going okay-ish… errors, experiments, failed live reloads—until I realized Claude had overengineered the whole thing.
Eventually, even he admitted it: “Overcomplicated Vite configuration”.
What I really needed was the wisdom of an old friend: Google. After a bit of digging, I found a clean template on GitHub: wp-vite-bootstrap. I installed it, tested it, loved it. I showed it to Claude and said, “Take notes, my friend.”
We fixed things up. Clean, simple, and finally working properly. This wasn’t the first time AI tripped over its own cleverness, but hey—it’s still an amazing tool. I had to study Vite configs a bit more, but that’s part of the journey.
In the end, the setup may not have been revolutionary, but it was meaningful. Sometimes, you just need to blend old tricks with new tools and keep dancing through the bugs.