Für WordPress-Newbies: Die WordPress-Theme Dateien im Überblick

Gerade wenn man zum ersten mal eine Webseite mit WordPress umsetzten möchte, kann die Fülle an Dateien im Theme-Ordner ganz schön verwirrend sein. Welche Datei ist eigentlich für welchen Bereich der Webseite zuständig? Und wo muss der HTML-Code eingefügt werden, damit das Layout korrekt angezeigt wird? Jede Menge Fragen tauchen auf. Um einen ersten Überblick über die Theme-Dateien zur Einarbeitung in WordPress anzubieten, habe ich mir das Toolbox-Themes (ein modernes Blank-Theme, dass sich sehr gut als Grundlage zur Entwicklung eines eigenen WordPress-Themes eignet) einmal genauer angeschaut und einen Überblick über die Theme-Dateien vorbereitet.

Die Theme-Dateien im Überblick

header.php

In die header.php befindet sich der Code des head-tags der Webseite, sowie der Beginn des body-tags. Hier kommt außerdem der Code für deine Webseiten-Überschrift, den Header und die Header-Navigation hinein. Dieser Code wird dann von jeder Seite deiner Webseite immer wieder aufgerufen.

footer.php

Die footer.php Datei ist quasi das Gegenstück zur header.php. Hier schließt sich der body-tag wieder. Außerdem kannst du in der footer.php Datei den Code für den Footerbereich deiner Webseite unterbringen. Eventuell kannst du dazu auch die praktische Widget-Funktion von WordPress nutzen.

sidebar.php

Meist werden auf einem WordPress-Blog eine oder auch mehrere Sidebars genutzt. Der Inhalt der Sidebars wird über die sidebar.php Datei aufgerufen. Natürlich kannst du deinen Code für den Sidebar-Inhalt direkt in die sidebar.php Datei schreiben. Viel praktischer ist es aber von Widgets gebrauch zu machen und diese über die Funktion dynamic_sidebar (weitere Infos im WordPress Codex) in sidebar.php aufzurufen. So kannst du deinen Sidebar-Inhalt später über den WordPress-Adminbereich (Design/Widgets) verwalten und anpassen.

index.php

Die index.php Datei ruft die Startseite eines WordPress-Blogs auf. Hier kommt sozusagen alles zusammen. Die Inhalte von header.php, footer.php und die sidebar.php werden jeweils über die get_… Funktionen aufgerufen.

Um die im Adminbereich unter Einstellungen / Lesen bestimmte Anzahl von Artikeln auf der Blog-Startseite anzuzeigen, brauchst du außerdem den Code-Schnipsel:

< ?php get_template_part( 'content', get_post_format() ); ?>

Mit Hilfe dieses Code-Schnipsels kannst du alle Artikel in ihrem jeweiligen Post Format anzeigen (weitere Infos zu den Post Formats). Zusätzlich kannst du in der index.php Datei noch die Seitennavigation (neuere/ältere Artikel) anzeigen.

content.php

Für den Inhalt eines Artikels in der gekürzten Übersicht ist die content.php Datei zuständig. Der Artikel wird entweder als Excerpt gekürzt (für die Ansicht im Archiv oder in Suchergebnissen) oder er wird mit Hilfe des more-links an einer im Artikel selbst festgelegten Textstelle gekürzt.

In der content.php Datei befinden sich auch alle Meta-Angaben zu einem Artikel wie z.B. Artikeldatum, Artikelautor, Kategorien oder Schlagwörter (tags).

content-link.php, content-image.php etc.

Über die content-post-format.php Dateien kannst du den gleichen Inhalt wie in der content.php Datei aufrufen, aber diesen für eine spezielle Ansicht des entsprechenden Post Formats anpassen. Als Beispiel kannst du in content-image.php den Artikel-Titel entfernen.

single.php, content-single.php und comments.php

Die Single.php Datei ist im Gegensatz zu index.php für die Einzelansicht eines Artikels zuständig. Auch hier wird also wieder der Inhalt von header.php, footer.p und sidebar.php aufgerufen. Um den Inhalt eines einzelnen Artikels aufzurufen wird dann folgender Code-Schnipsel benötigt:

< ?php get_template_part( 'content', 'single' ); ?>

Dieser Code-Schnipsel ruft den Inhalt der content-single.php Datei auf. In dieser Datei wird dann der gesamte Artikelinhalt aufgerufen. Außerdem kannst du hier Meta-Daten wie z.B. die Anzeige eines Autorenfeldes integrieren.

Nachdem der Inhalt des Artikels mit Hilfe von content-single.php aufgerufen wurde, folgt in der single.php der Aufruf der Kommentare über den Code:

< ?php comments_template( '', true ); ?>

Dieser Code-Schnipsel sorgt dann dafür, dass der Inhalt der comments.php Datei aufgerufen wird. Diese ist für die Anzeige der Kommentare des Einzelartikels zuständig.

page.php und content-page.php

Für WordPress-Seiten funktioniert das Prinzip ganz ähnlich, wie für die Anzeige von Artikeleinzelseiten. Über die Datei page.php wird der Header, der Footer und die Sidebar aufgerufen. Über „get_template_part content page“ wird dann der Inhalt der content -page.php Datei aufgerufen. In der page.php wird danach wieder der Kommentarbereich mit Hilfe von comments_template aufgerufen.

full-width-page.php

Benötigst du auch die Möglichkeit für eine WordPress-Seite ohne Sidebar, kannst du die full-width-page.php Datei nutzen und hier auf den Code get_sidebar verzichten. Die Auswahl, welches Template du bei einer Seite jeweils nutzen möchtest, hast du dann später im Adminbereich beim Anlegen bzw. Bearbeiten einer Seite.

archive.php, category.php, tag.php, author.php

Die Archivseiten in WordPress werden über die Theme-Dateien archive.php (für die Anzeige des aller Artikel eines Monats, Jahres oder Tages), category.php (für die Anzeige aller Artikel einer bestimmten Kategorie, tag.php (für die Anzeige aller Artikel eines Schlagwortes) und author.php (für die Anzeige aller Artikel eines bestimmten Autors) aufgerufen.

search.php, search-form.php

Die search.php Datei ist für die Anzeige der Suchergebnisseite zuständig. Das Suchformular wird in WordPress übrigens über die Funktion get_search_form (weitere Infos im WordPres Codex) aufgerufen.

Möchtest du ein individuelles Suchformular einfügen, kannst du eine extra searchform.php Datei für dein Formular anlegen.

404.php

Die 404.php Datei ist für den Seiteninhalt verantwortlich, der bei einem 404-Seitenfehler angezeigt wird. Auf dieser Seite ist es auch sinnvoll, das Suchformular mit get_search_form aufzurufen, um den Lesern eine Möglichkeit zu geben, den gewünschten Seiteninhalt zu finden.

image.php

Die Datei image.php ist für die Anzeige eines einzelnen Bildes (z.B. aus einer Bildergalerie) zuständig. Hilfreich ist es hier eine Navigation für die Anzeige des nächsten und vorherigen Bildes einzubinden, z.B. mit den Funktionen previous_image_link und next_image_link.

functions.php

Die functions.php Datei ist eine sehr wichtigste Datei eines WordPress-Themes. Gleichzeitig ist die Funktion der Datei anfangs aber auch etwas schwierig zu verstehen. Die functions.php fungiert ähnlich wie ein Plugin und du kannst verschiedene Funktionen und Filter über die functions.php in dein WordPress-Theme integrieren.

Da die Möglichkeiten der functions.php Datei so vielseitig sind ist es am besten, wenn du für die Entwicklung deines eigenen Themes die functions.php z.B. des Toolbox-Themes als Basis verwendest. So kannst du dein Theme z.B. für die Übersetzung in eine andere Sprache vorbereiten, die Post Formats Option im Theme aktivieren, die individuelle Menüfunktion von WordPress aktivieren oder verschiedene Sidebars für dein Theme einrichten.

style.css (Hauptstylesheet)

Die style.css Datei ist die Datei für das Hauptstylesheet deiner Webseite.

rtl.css

Die rtl.css Datei dient der Unterstützung deines Themes für Sprachen, die von rechts nach links geschrieben werden wie Arabisch oder Hebräisch. Weitere Infos findest du auch im Artikel „Rtl-Schrift-Unterstützung (für Arabisch und Hebräisch) in WordPress“.

screenshot.png

Das Screenshot-Bild (jpg ode png) sollte ein Vorschaubild oder den Namen deines Themes zeigen. Des wird in der Themes-Übersicht im Adminbereich (Design/Themes) angezeigt.

Ordner innerhalb des Theme-Ordners

images

In den images-Ordner legst du alle Bilder ab, die für dein Themedesign benötigst.

js

Alle JavaScript-Dateien solltest du meiner Ansicht nach übersichtshalber auch in einem eigenen Ordner (z.B. mit dem Namen js) sammeln. Im Toolbox-Theme wäre das z.B. die html5.js Datei.

css

Falls du zusätzliche CSS-Dateien für dein Theme nutzt, kannst du diese in einem Unterorder mit dem Namen „css“ ablegen.

languages

Alle Theme-Übersetzungsdateien (mit den Endungen .po und .mo) kommen in den languages Ordner. Weitere Infos zur Übersetzung eines WordPress-Themes kannst du auch im Artikel „WordPress-Theme Übersetzung mit dem Codestyling Localization Plugin“ nachlesen.

inc oder includes

Verwendest du z.B. eine Theme-Optionenseite oder individuelle Widgets (siehe aktuelles WordPress Standard-Theme Twenty Eleven) kannst du diese zur besseren Übersicht in einem eigenen Ordner mit dem Namen „inc“ oder „includes“ anlegen.

Tipps zum Weiterlesen

Ich hoffe diese Übersicht über die Dateien eines WordPress-Themes hilft die bei der Erstellung eines eigenen Themes oder auch bei der Anpassung eines vorhandenen Themes weiter.

Hast du Fragen, Anregungen oder weitere Tipps zur Verbesserung des Artikels schreibe doch einfach einen Kommentar. Ich freue mich über dein Feedback!

13 Kommentare

  1. Hallo Ellen,

    schöner Artikel. Schreibe auch gerade in einer Serie über die unterschiedlichen Bereiche, die man neben dem Bloggen beachten muss. Als Blog-Betreiber schätze ich, muss man früher oder später einen näheren Blick auf den Quellcode werfen, allein schon wenn man Analytic-Dienste und ähnliche Tools integrieren will.

    Gruß,

    Viktor

    • Hallo Viktor,

      vielen Dank für dein Feedback. Es freut mich, dass du den Beitrag hilfreich findest. Ja, ich denke auch, es ist für jeden Blogger sehr hilfreich, einen ungefähren Überblick über die Template-Dateien eines Themes zu haben. Das erleichtert auch kleinere Anpassungen am Blog sehr :-)

      Viele Grüße,
      Ellen

  2. Hallo,
    vielen Dank für diesen Beitrag. Ich bin gerade dabei mein eigenes Theme zu erstellen und so kam er mir gelegen. Ich frage mich im Moment, ob ich besser ganz von vorne anfange, oder ob ich besser „nur“ ein Child Theme (Bei mir käme Twenty Eleven als Elternteil inf Frage) erstelle.
    Liebe Grüße
    Astrid

    • Hallo Astrid,

      danke für deinen Kommentar, es freut mich, dass dir der Artikel gerade so gelegen kommt. Die hier beschriebenen Theme-Dateien sind übrigens fast identisch mit den Dateien des neuen Twenty Eleven Themes.

      Die Entscheidung ist sicher nicht ganz einfach, aber am Anfang kann es schon sehr hilfreich sein, ein Theme wie das Twenty Eleven als Vorlage zu nehmen und ein Child Theme für die eigenen Anpassungen zu erstellen. Es ist denke ich wichtig sich vorab genau zu überlegen, ob das Parent Theme eine gute Grundlage mit den gewünschten Funktionen bietet oder ob eine Anpassung eventuell noch mehr Arbeit ist, als ein eigenes Theme zu erstellen.

      Viele Grüße,
      Ellen

  3. Super Zusammenstellung, kann eigentlich in euer WP-Lexikon, oder? Von der „rtl.css“ Datei wusste ich noch nicht „rtl“ :D…

    Gruß
    Vincent

    • Hallo Vincent,

      danke für dein Feedback zum Artikel. Du hast Recht, die Verknüpfung mit den WP-Lexikon Artikel wäre eigentlich wirklich eine gute Idee und sicherlich recht hilfreich für einen Einstieg in die WP Theme-Entwicklung :-)

      Viele Grüße,
      Ellen

  4. Hallo Ellen,

    ich bin so ein WordPress Newbie und gerade auf diese Seite gestoßen, da ich die sidebar.php anpassen will. (Statische Blogroll anstatt dynamischer, aus Performance-Gründen.)

    Diese Übersicht finde ich sehr hilfreich! Danke!
    Viele Grüße
    Gerald

  5. Hallo Ellen, wie kann ich eine Sidebar im Footer unterbringen? Mein Theme, BlogoLife 1.9 von wplook, hat „NUR“ eine Rechte Sidebar und keine im Footer eingebunden! Wäre um jeden Tipp dankbar da ich das Design nicht ändern möchte!

    Gruß Markus

  6. Nabend Ellen, da war ja die Lösung, die content.php, dort habe die Änderung des Continue Reading veanlasst!

    Danke für den Tipp!

  7. Alexander 8. April 2013

    Nabend,
    habe da so eine Art Problem bei meinem Blog. Und zwar habe ich mir eine author.php Datei erstellt, da vom Theme her keine vorhanden war. Nun wird diese Datei allerdings nach jedem Update gelöscht und ich muss diese von Hand wieder hochladen (so wie die functions.php). Gibt´s da eine Lösung, dass WordPress diese Datei einfach beibehält?

    Schon mal Danke im voraus :-)
    Alexander

  8. Hallo,

    ich finde es echt super, dass es Leute gibt, die anderen kostenfrei so wertvolle Informationen bereitstellen. Ich bin gerade dabei auf eigene Faust, meine Seite auf WP-Basis neu zu gestalten, und da ich blutiger Neuling bin und nicht gerne auf andere angewiesen bin und das, was ich mache, gerne selber verstehe, bin ich dankbar für derartige Inhalte.

    Ich habe einen kleinen Grammatik-Lapsus entdeckt, nur ne Kleinigkeit, könnt ihr ja ändern, wenn ihr Wert darauf legt: Unter der Unterüberschrift „funcions.php“ heißt es „eine sehr wichtigste Datei“. Ich weiß, dass so etwas entsteht, wenn man zwei oder drei mögliche Formulierungen im Kopf hat und von einer auf die andere schwenkt, sieht aber doof aus.

    Also, vielen Dank
    Kian

  9. Hi, ich bin absolute Anfängerin in WordPress.
    Habe das Theme twenty sixteen und weiß nicht wie ich jetzt mein favicon einbinde.
    Lese immer etwas von der Header.php, weißaber nicht, wo ich die in meinem Theme finde.
    Kannst Du helfen?
    Wäre toll.

  10. Liebe Ellen, danke für die super Übersicht und Zusammenstellung. Jetzt sehe ich etwas klarer. Allerdings gelingt es mir immer noch nicht meine Seite zu validieren. Ich weiß zwar welche tools es gibt, wie und in welchen Bereichen ich die angezeigten Fehler ausmerze, das bekomme ich nicht hin. Bin HTML – Neuling. Ein automatisches Plugin zur Beseitigung der fehler gibt es nicht? Sowas kann auch nur ein Neuling fragen..:-)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *