English
English繁中

Rebuilding My WordPress Site with Vibe Coding

By /

Using Astra Child Themes, VS Code, and AI-Assisted Development

A strange shift is happening in web development.

Not long ago, customizing a WordPress site usually meant:

  • digging through documentation
  • searching forums for snippets
  • manually debugging CSS
  • repeatedly refreshing the browser

But recently, while rebuilding parts of my personal website, the process started feeling completely different.

Instead of writing every line manually, I found myself collaborating with an AI coding agent inside Visual Studio Code — describing intentions, iterating visually, and refining behavior through conversation.

People have started calling this style of development:

Vibe Coding.

This article documents how I customized an Astra-based WordPress site using:

  • a child theme architecture
  • VS Code
  • AI-assisted coding workflows
  • iterative frontend experimentation

I also documented parts of the implementation process on my own site:

Why I Used a Child Theme

One thing I wanted to avoid was directly modifying the Astra parent theme.

Updating the parent theme later could overwrite everything.

So instead, I built the entire customization layer through a child theme structure.

astra-theme/
└── astra-child/
    ├── style.css
    ├── functions.php
    ├── assets/
    ├── template-parts/
    └── custom-js/

This gave me:

  • safer updates
  • cleaner separation
  • easier experimentation
  • rollback flexibility
  • better maintainability

Ironically, it also made the project easier for AI tools to understand.

The clearer the structure became, the better the collaboration felt.

The Workflow Felt More Like Directing Than Coding

Traditional WordPress customization often feels fragmented.

But the workflow here evolved into something closer to:

The interesting part wasn’t simply “speed.”

It was the shift in mindset.

I spent less time thinking:

“How do I write this code?”

…and more time thinking:

“How should this experience feel?”

That subtle difference changes the entire development atmosphere.

AI Worked Surprisingly Well Inside WordPress

Inside Visual Studio Code, the AI agent became surprisingly effective once the project context stabilized.

It handled:

  • PHP + CSS + JS modifications
  • Astra layout adjustments
  • component styling
  • responsive tweaks
  • repetitive frontend tasks
  • quick visual iteration

But it definitely wasn’t flawless.

Some problems still appeared:

  • incorrect WordPress hook assumptions
  • CSS conflicts across templates
  • over-modified layouts
  • responsive fixes creating new issues elsewhere

The important realization was this:

AI reduced friction.
It did not replace judgment.

You still need:

  • structure
  • taste
  • visual sense
  • debugging intuition
  • architectural decisions

The AI accelerated implementation.

But the direction still came from the human side.

What I Actually Customized

Some of the things I implemented included:

  • custom homepage sections
  • Astra header modifications
  • responsive spacing refinements
  • dark-style visual tuning
  • custom typography hierarchy
  • code block styling
  • article layout optimization
  • cleaner visual rhythm for long-form reading

The full implementation notes and experiments are documented here:

Full WordPress Build Notes

What interested me most wasn’t any single feature.

It was how quickly the site started feeling less like a template…

…and more like an environment.

Vibe Coding Feels Different

I don’t think this workflow means developers disappear.

But I do think the role changes.

The developer becomes less like:

someone continuously typing syntax

…and more like:

  • a system designer
  • a reviewer
  • an editor
  • a visual architect
  • a creative director for software behavior

Especially in frontend development, branding systems, and creative tooling, that shift already feels very real.

Final Thoughts

I originally started this project simply wanting to customize a WordPress site.

But somewhere during the process, it stopped feeling like “theme modification.”

Instead, it started feeling like a new interaction model between humans and software creation.

Not fully manual.
Not fully automated.
Something hybrid.

A process driven by:

  • language
  • iteration
  • aesthetics
  • feedback
  • system design

And honestly, that may be the most interesting part of AI-assisted development right now.

Scroll to Top