Skip to main content

Project Structure

Root Layout​

reactwp-v3/
|-- configs/
|-- dist/
|-- docs/
`-- src/

configs/​

configs/ contains the build system:

  • package.json
  • webpack configuration
  • build scripts
  • installed Node dependencies

See Build Tooling.

dist/​

dist/ is the generated WordPress install.

This is the directory your local server should point to.

Treat it as build output. The project is normally authored in src/, not in dist/.

src/​

src/ contains the editable project source:

  • src/core/ for core-related project files such as wp-config.php
  • src/mu-plugins/ for the shared ReactWP runtime
  • src/plugins/ for bundled standard plugins
  • src/themes/ for themes

Mu-Plugin Layout​

The ReactWP mu-plugin is the application runtime.

Important areas include:

  • template/init.php
  • template/inc/runtime/
  • template/inc/routes/
  • template/inc/admin.php
  • template/inc/firstload.php

This is where the starter defines the bootstrap payload, route resolver, menu normalization, admin settings pages, and first boot behavior.

Bundled Plugin Layout​

src/plugins/ contains opinionated environment plugins such as:

  • reactwp-frontend
  • reactwp-images
  • reactwp-backend
  • reactwp-seo
  • reactwp-accept-svg
  • reactwp-acf-local-json

These plugins shape the starter defaults around frontend output, media handling, backend cleanup, SEO, SVG uploads, and ACF JSON storage.

Theme Layout​

Inside the default theme:

  • js/inc/ contains runtime code
  • js/inc/config/ contains the intended project-level runtime overrides
  • js/components/ contains reusable React components
  • js/templates/ contains page templates
  • scss/ contains styling source files
  • template/ contains the PHP shell and theme hooks
  • datas/acf/ stores ACF local JSON

Inside scss/, the project keeps the permanent base separate from template-owned screen styles so shipped starter visuals can be replaced without touching the runtime-safe base.

For the component layer, see Components.

Theme Runtime Layout​

The runtime code in js/inc/ is intentionally split by responsibility:

  • Runtime.js reads the bootstrap payload
  • Loader.js owns first-load and critical asset preparation
  • PageTransition.js owns route transition animation
  • RouteService.js fetches and caches route payloads
  • TemplateRegistry.js resolves lazy templates
  • Scroller.js owns the smooth scrolling layer
  • useRouteTransition.js coordinates navigation, preload, swap, and reveal

PHP Theme Shell​

The PHP theme shell lives mostly in:

  • template/header.php
  • template/footer.php
  • template/functions.php

Those files define:

  • the shell markup IDs used by the runtime
  • the bootstrap JSON script
  • the initial loader node
  • critical inline shell styles
  • theme-level filters

See Theme Shell and Scroll.

Safe Runtime Configuration Files​

Projects are expected to customize a few dedicated files instead of patching runtime internals directly:

  • js/inc/config/configureLoader.js
  • js/inc/config/configurePageTransition.js
  • js/inc/config/configureTemplateRegistry.js

Those files run after the starter restores its default runtime state, so a project can override behavior without rebuilding the runtime architecture first.