praktyczna, zalecana i często spotykana struktura katalogów dla WordPress custom theme

Poniżej struktura katalogów dla custom theme WordPress, zgodna z dobrymi praktykami i gotowa zarówno na klasyczne WP, jak i Gutenberga.

W my-theme-wp zamieszczamy:

• assets
  • src – źródła (przed buildem)
  • dist – wynik kompilacji (enqueue w WP)
• inc – logika PHP
  • setup.php – theme support, menus
  • enqueue.php – wp_enqueue_style/script
  • acf.php – ACF (local JSON, hooks)
  • blocks.php – rejestracja bloków
  • helpers.php – funkcje pomocnicze, utils
  • admin.php – zmiany w panelu
• templates
  • parts
    • header
    • footer
    • components
  • page
• template-parts
  • content.php
  • hero.php
  • card.php
• blocks – custom Gutenberg blocks (PHP render)
  • hero
    • block.json
    • render.php
    • style.css
• functions.php – główne hooki WP, tylko include
• header.php
• footer.php
• index.php
• single.php
• page.php
• archive.php
• 404.php
• style.css
• screenshot.png (1200x900px)

Wskazówki

functions.php

powinien być krótki, tylko include

require_once get_template_directory() . '/inc/setup.php';
require_once get_template_directory() . '/inc/enqueue.php';

style CSS/SASS

• SCSS źródłowy -> assets/src/scss/
• główny plik -> main.scss
• CSS do enqueue -> assets/dist/css/main.css
• style edytora editor.scss → editor.css
• style.css w root – tylko nagłówek theme, nie trzymamy tam realnych styli

JavaScript

• JS źródłowy assets/src/js/
• Frontend main.js
• Admin admin/
• Bloki blocks/
• JS enqueue assets/dist/js/main.js

Gutenberg blocks

zalecane w katalogu Blocks

a JS / SASS do nich odpowiednio:

• assets/src/js/blocks/hero.js
• assets/src/scss/blocks/_hero.scss