Organisation von Dateien und Funktionen in einem WordPress-Theme – mein aktueller Stand

Die gute Organisation der Dateien und Funktionen in einem WordPress-Theme (beziehungsweise natürlich ganz allgemein einem Code-Projekt) hilft dabei, das ganze übersichtlich zu halten. Hier stelle ich kurz meinen aktuellen Stand in Sachen Organisation der Dateien und Funktionen eines WordPress-Themes vor.

Die folgende Struktur ist von meinem Photographus-Theme. Ich führe hier nicht komplett alle Dateien und Ordner auf (im GitHub-Repo findet ihr alles), es fehlen:

• die einzelnen SCSS-Dateien, die importiert werden.
• Dateien und Ordner für Build-Skripte und andere Dev-Tools.

Hier die Datei- und Ordner-Struktur des Themes (Format übernommen von der Jekyll-Doku):

.
├── assets/ # all JS, CSS, images
|   ├── css/
|      └── scss/
|         ├── abstracts/
|         ├── base/
|         ├── components/
|         ├── conditionals/
|         ├── layout/
|         ├── templates/
|         ├── editor-style.scss
|         └── photographus.scss
|   ├── images/
|      └── starter-content/
|         └── featured-image-about-page.jpg
|   └── js/
|      ├── customize-controls.js
|      ├── customize-preview.js
|      ├── functions.js
|      └── masonry.js
├── inc/ # files with functions
|   ├── customizer/
|      ├── callbacks.php
|      ├── register.php
|      └── scripts-and-styles.php
|   ├── actions.php
|   ├── cache-functions.php
|   ├── filter-functions.php
|   ├── filters.php
|   ├── front-page-panel-functions.php
|   ├── template-functions.php
|   ├── template-tags.php
|   └── theme-updates.php
├── languages/ # language files folder (if not on W.org)
├── partials # template parts
|   ├── attachment/
|      └── content-image.php
|   ├── footer/
|      ├── nav.php
|      ├── theme-author.php
|      └── widget-area.php
|   ├── front-page/
|      ├── content-latest-posts-panel-short-version.php
|      ├── content-latest-posts-panel.php
|      ├── content-post-and-page-panel.php
|      └── content-post-grid-panel.php
|   ├── header/
|      ├── branding.php
|      └── nav.php
|   └── post/
|      ├── content-none.php
|      ├── content-single.php
|      └── content.php
├── templates/ # page templates
|   ├── large-featured-image-no-sidebar.php
|   ├── large-featured-image.php
|   ├── large-portrait-featured-image-no-sidebar.php
|   ├── large-portrait-featured-image.php
|   └── no-sidebar.php
├── archive.php
├── comments.php
├── footer.php
├── front-page.php
├── functions.php
├── header.php
├── image.php
├── index.php
├── page.php
├── readme.md
├── screenshot.png
├── search.php
├── sidebar.php
├── single.php
└── style.cssCode-Sprache: PHP (php)

Erklärung der Struktur

Auf der obersten Ebene befinden sich lediglich die Dateien, die sich nicht in einen Unterordner verschieben lassen.

Der assets-Ordner

Im assets-Ordner finden die SCSS-, JavaScript- und Bild-Dateien Platz. Im scss-Ordner befinden sich weitere Ordner mit Dateien, die in die editor-style.scss und photographus.scss importiert werden:

• abstracts/ ist für die Dateien mit Variablen, Mixins und Funktionen.
• base/ für das Styling der grundlegenden HTML-Elemente.
• components/ für die Dateien, die das Styling von Komponenten übernehmen (etwa einen Beitrag, Kommentar und ein Grid-Item).
• conditionals/ für Browser-spezifische Styles.
• layout/ für Layout-Styles (Grids, Header, Footer et cetera).
• templates/ für Template-spezifische Styles (Front-Page-Template-Styles, Regeln für Seiten ohne Sidebar …).

Die Organisation des SCSS ist von verschiedenen Ansätzen inspiriert – spontan fällt mir Atomic Design und RSCSS ein.

Der inc-Ordner

Im inc-Ordner sind alle PHP-Funktionen des Themes zu finden. Die functions.php besteht lediglich aus Aufrufen, um diese Dateien einzubinden. Die Funktionen sind – wenn möglich und sinnvoll – je nach Aufgabenbereich in unterschiedliche Dateien gruppiert.

• actions.php – alle add_action()-Aufrufe.
• cache-functions.php – alle Funktionen rund um Transients.
• filter-functions.php – Funktionen, die über add_filter() aufgerufen werden.
• filters.php – alle add_filter()-Aufrufe.
• front-page-panel-functions.php – alle Funktionen, die die Front-Page-Panels-Funktion des Themes betreffen.
• template-functions.php – alle Funktionen, die nicht direkt aus den Template-Dateien aufgerufen werden und sich nicht mehr sinnvoll in andere Dateien gruppieren lassen.
• template-tags.php – alle Funktionen, die direkt aus den Template-Dateien aufgerufen werden.
• theme-updates.php – Funktionen für die Theme-Update-Funktion.

Da ich die Customizer-Funktionalitäten in drei Dateien unterteilt habe, gibt es dafür einen eigenen Unterordner customizer.

• callbacks.php – alle Customizer-Callback-Funktionen.
• register.php – Funktion zur Erstellung von Settings, Controls und Sections.
• scripts-and-styles.php – Funktionen um Skripte und Stylesheets in den Customizer einzubinden.

Der partials-Ordner

Der partials-Ordner ist für Dateien, die sich um die Anzeige von Theme-Teilen kümmern und in andere Dateien eingebunden werden. So gibt es hier beispielsweise die Datei header/branding.php, die den Website-Titel und die Beschreibung anzeigt, und die post/content*-Dateien für die Anzeige des Beitragsinhalts.

Der templates-Ordner

Im Ordner templates sind alle Post-Type-Templates-Dateien zu finden.

Soweit zu meinem aktuellen Stand, der natürlich nur genau das ist: mein aktueller Stand und vermutlich eher nicht die eleganteste oder beste Lösung. Habt ihr Anmerkungen, Fragen und/oder Verbesserungsvorschläge? Dann schreibt einen Kommentar 🙂