← Back to Documentation

Documentation

WordPress workflow Fullstack development with Docker

Animmaster Vite Template includes a ready-to-run fullstack mode for building interfaces directly on top of CMS WordPress. The build starts a local server via Docker, so you can develop and test the theme in a real WP environment.

Download Animmaster Vite Template Save your time — start now

What you need

To run a full local WordPress server on your machine, you need Docker. Docker is free for personal use. After installation, just keep Docker turned on — you don’t need to configure anything manually for the template.

Important
Docker must be running before you use any WordPress commands (npm run wp, npm run wpbuild).

Start WordPress mode

After installing Animmaster Vite Template and Docker, start the WordPress environment with:

Terminal
npm run wp

On the first run, the system will create a backend/ folder in your project root. It contains: database/ (DB data) and wordpress/ (WP core).

Do not edit
Do not edit backend/ or its contents unless you clearly understand what you’re doing.

Then the browser opens http://localhost:8080/. If it’s your first run, WordPress will show the installation screen. After WP is installed, the environment is ready for development.

If you already ran WP mode before, npm run wp will open http://localhost:8080/ directly (your site homepage).

Where to develop

For WordPress development, go to: src/components/wordpress/

  • src/components/wordpress/anim-theme/ — the installed WordPress theme. This is where you edit theme files for your tasks.
  • src/components/wordpress/anim-plugin/ — a folder to create your own custom plugin.
Editing styles
General styles are edited in src/styles/ and inside relevant components in src/components/.

Scripts in WordPress mode

In dev mode, scripts are edited inside components (src/components) and, if you need global WP theme logic, here: src/components/wordpress/anim-theme/assets/app.js

Don’t remove this import
In src/components/wordpress/anim-theme/assets/app.js do not delete: import '../anim-wp-includes.js'. It’s required for correct WP integration.

After the build, the file assets/app.js is no longer used directly. Final JS/CSS is compiled into: src/components/wordpress/anim-theme/build/assets

After a build you can also apply quick manual edits directly in the WordPress theme output: /wp-content/themes/anim-theme/build/assets/css/custom.css and /wp-content/themes/anim-theme/build/assets/js/custom.js

Keep core WP scripts safe
Do not edit other JS files inside src/components/wordpress unless you understand them.

Images outside the WP admin panel

If you need to use static images from src/assets/img directly in code (not via the WP media library), reference them via the theme path.

Examples: CSS + PHP

// In styles
.some {
  background: url('/wp-content/themes/anim-theme/assets/img/image.jpg') 0 0 no-repeat;
}

// In PHP templates
<img src="/wp-content/themes/anim-theme/assets/img/image.jpg" alt="Image">

Build the project for WordPress

When you finish development, run:

Terminal
npm run wpbuild

During npm run wpbuild, SCSS and JS are processed and placed into: src/components/wordpress/anim-theme/build/assets. Local fonts and static images (used outside the WP admin) are also included there.

To migrate the site to a remote server, install a WordPress migration plugin (choose one yourself), then create an export/dump of the site and database and deploy it to your hosting.

Stop the Docker server

Because wp / wpbuild starts a Docker server, you should stop it during breaks or after finishing work:

Terminal
npm run wpstop
Tip
If WP doesn’t open or commands fail — first check that Docker is running.

Download

Want a ready WordPress workflow with Docker, theme structure, and a predictable build pipeline? Download Animmaster Vite Template and start faster.

Download Animmaster Vite Template Save your time — start now