t3n News Entwicklung

So erstellst die style.css für dein WordPress-Theme

Das eigene WordPress-Theme erstellen – #2: Die style.css und die Metadaten eures Themes

In dieser Serie geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Im zweiten Teil widmen wir uns einer der wenigen Dateien, ohne die kein WordPress-Theme auskommt: Der style..

Das eigene WordPress-Theme erstellen – #2: Die style.css und die Metadaten eures Themes

Der große t3n-Guide zum eigenen WordPress-Theme. (Grafik: t3n)

Die style.css ist eine der wichtigsten Dateien, wenn es um die Erstellung eines WordPress-Themes geht. Ein funktionierendes Theme kann theoretisch nur aus style.css und index.php bestehen – mehr Dateien braucht es im Grunde nicht. In die style.css-Datei kommen nämlich die sogenannten Header-Informationen eures Themes.

Notwendige Angaben für ein WordPress-Theme

Für ein funktionierendes Theme reicht die Angabe des Namens. Für das Hochladen im Theme-Directory müssen allerdings mehr Informationen eingetragen werden. Zwingend notwendig sind die folgenden Angaben:

  • Theme Name – der Name des Themes.
  • Description – eine kurze Beschreibung des Themes.
  • Author – der Name des Entwicklers.
  • Version – die Versionsnummer des Themes.
  • Licence – die Lizenz, unter der das Theme steht.
  • Licence URI – der Link zu der Lizenz.

Die ersten Punkte sollten selbsterklärend sein. Zum Thema Lizenz: Alle Themes, die in das Theme-Directory von WordPress aufgenommen werden sollen, müssen zu 100 Prozent der GPL oder einer kompatiblen Lizenz entsprechen. Darauf müsst ihr auch bei eingebundenen Skripten oder ähnlichem achten.

Wenn ihr euch mal unsicher seid, ob eine Lizenz kompatibel ist, könnt ihr beispielsweise im #themereview-Channel des offiziellen WordPress-Slack fragen. Wie ihr euch dafür registrieren könnt, zeigt eine Seite auf make.WordPress.org.

Kurz und übersichtlich: Die style.css-Datei unseres Themes

Neben diesen vorgeschriebenen Angaben gibt es noch ein paar weitere. So sieht die style.css-Datei unseres Themes aus:

/*
Theme Name: Bornholm
Theme URI: http://florianbrinkmann.de/wordpress-themes/bornholm/
Author: Florian Brinkmann
Author URI: http://florianbrinkmann.de
Description: Bornholm is great for your photoblog or portfolio website. The theme comes with two page templates. One template shows the last galleries from your categories and the other shows all your galleries on one page. Furthermore, it brings two widgets that allow you to display the last galleries and to display featured galleries. If you already have images on your blog, you should regenerate the thumbnails.
Version: 1.0.6
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, light, two-columns, right-sidebar, custom-menu, post-formats, sticky-post, translation-ready, threaded-comments, photoblogging
Text Domain: bornholm
*/

Zusätzlich haben wir hier noch die Theme URI eingefügt, die auf eine Seite mit genaueren Details zum Theme verweisen muss. Eine Demo-Version sollte hier nicht verlinkt werden. Die Zeile Author URI ist ebenfalls neu und enthält eine URL zur Website des Entwicklers. Mit der Angabe von Tags könnt ihr euer Theme im Theme-Directory besser auffindbar machen. Die verfügbaren Begriffe könnt ihr unter dem Punkt „Feature Filter“ auf der Theme-Seite von WordPress.org einsehen. Zum Schluss folgt noch die Angabe der Text-Domain, die für die Übersetzung des Themes notwendig ist.

Mehr werden wir in diese Datei nicht eintragen. Natürlich könnte hier auch der CSS-Code des Themes Platz finden. Dagegen spricht aber, dass sich die Datei dann nicht komplett komprimieren ließe.

Der Code zur Serie auf GitHub

Den Quelltext zu der Serie gibt es auf GitHub. Im dazugehörenden Repository findet ihr Tags, die jeweils dem Stand des Themes nach einem Teil der Reihe entsprechen. Den Tag zum Stand dieses Artikels findet ihr hier.

Die weiteren Teile unserer WordPress-Reihe:

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
17 Antworten
  1. von Stefan am 20.07.2014 (23:17 Uhr)

    Super Artikel, genau so etwas kann ich gerade brauchen. Vielen Dank dafür und bin schon auf die weiteren Ausgaben gespannt!

    Antworten Teilen
  2. von nk am 21.07.2014 (00:29 Uhr)

    "bei Windows müsst ihr darauf achten, dass ihr es direkt im obersten Verzeichnis installiert. Also in C: und nicht in C:/xampp."

    Was für ein Schwachsinn. Wenn man den Kopf einschaltet und nicht alles nur installiert, ohne sich damit auseinanderzusetzen, kann man auch gleich den Trojaner aus dem E-Mail-Anhang starten. "t3n - digital pioneers". OmG, seid Ihr Pioniere... Traurig.

    Und immer wieder der sinnfreie WP-Loop, egal ob man auf einer Single-Page ist. Bestätigt mal wieder den Eindruck, dass WP-User lediglich Copy-and-Paste-Anwender sind. Aber bezeichnet Euch doch bitte nicht als Webentwickler.

    Antworten Teilen
  3. von Daniel am 21.07.2014 (10:15 Uhr)

    @nk: Der "sinnfreie" WP-Loop ist die eigentliche Kernfunktion von Wordpress und damit alles andere als "sinnfrei", sondern essentiel. Und diese Funktion muss für Einsteiger erstmal verständlich gemacht werden, sonst bringt ein solches Tutorial nichts. Der angehende Pilot fliegt ja auch nicht gleich Jumbo und Übersee. Einem erfahrenen Entwickler muss niemand XAMPP erklären, damit gehe ich davon aus, dass sich der Workshop an interessierte Anfänger richtet. Und je mehr Mitgestalter (ich denke an so manche Grafiker) sich für Technik und Umsetzung interessieren, umso besser. Das macht es allen einfacher.

    Natürlich kann man ein WP-Theme beipielsweise noch mit Widgets, Plugins, Custom Post Types und individuellen Menüs anreichern und deutlicher individualisieren. Aber das würde (denke ich) für die angedachte Zielgruppe zu weit führen (und einen solchen Workshop in die Länge ziehen).

    Und eine Lanze muss ich brechen: Wordpress-Entwicklung ist Webentwicklung. Punkt. Nicht immer das TYPO3-, Drupal-, etc - Ross reiten und den Rest als Ponyhof abtun. Ich betreue zwar in der Mehrheit Projekte auf T3-Basis (und bin absolut überzeugt davon), bei kleinen Sites mit übersichtlichen Seitenumfang reicht Wordpress, ist für den Redakteur übersichtlicher, in der Wartung oft einfacher und damit kostengünstiger für den Kunden und wenn ein Blog mit bei sein soll, dann drängt sich WP förmlich auf.

    Antworten Teilen
  4. von Harald am 21.07.2014 (11:24 Uhr)

    Super Artikel werde ich auch mal machen ein eigens WordPress-Theme erstellen Danke

    Antworten Teilen
  5. von Norbert Zahl am 21.07.2014 (18:55 Uhr)

    Alles klar !

    Antworten Teilen
  6. von Norbert Zahl am 21.07.2014 (18:56 Uhr)

    XXAMP weigert sich aber nur in C: installiert zu werden???

    Antworten Teilen
    • von Florian Brinkmann am 21.07.2014 (21:11 Uhr)

      Hi Norbert,
      ob das wirklich so notwendig ist, weiß ich nicht ganz aktuell, vielleicht läuft es auch einwandfrei, wenn du es in einen anderen Ordner installierst. Ich handhabe das immer so, da es bei meiner ersten Installation vor ein paar Jahren ein Problem gab, wenn ich XAMPP in einen Unterordner installiert habe und die Installation direkt unter C die Lösung war.
      Was genau funktioniert bei dir denn nicht, bzw. welchen Fehler bekommst du?

      Viele Grüße,
      Flo

      Antworten Teilen
  7. von Scorch am 22.07.2014 (13:46 Uhr)

    Nette Idee das Ganze. Ist schon abzuschätzen, wieviele Kapitel es geben wird und liegen dazwischen immer 2 Wochen?

    Antworten Teilen
    • von Florian Brinkmann am 26.07.2014 (14:18 Uhr)

      Hallo Scorch,

      das Intervall zwischen den Artikel-Teilen wird vermutlich variieren und wie viele es genau geben wird, ist noch nicht klar – drei weitere werden es aber denke ich auf jeden Fall noch werden.

      Antworten Teilen
  8. von Scrabbledo am 25.07.2014 (13:23 Uhr)

    Hallo Florian,

    TOP-Artikel! Endlich mal eine verständliche Anleitung für "nicht"-Profis! Danke.

    Habe auch gleich noch eine weitere Frage, die sich ggf. als zusätzliche Funktion in einen der nächsten Artikel einbauen lässt:

    Ich betreibe seit einigen Jahren einen privaten Reiseblog, in dem ich meine verschiedenen Reisen durch die Welt dokumentiere. Dafür verwende ich das Adventure-Theme, werde mir aber sicherlich jetzt ein eigenes Theme individuell bauen (und WP endlich mal auf die neueste Version updaten). Das aktuell verwendete Design hat eine umgekehrt chronologische Auflistung der einzelnen Artikel (Tagesberichte), was für aktuelle Reisen auch Sinn macht, da so genau der letzte Eintrag oben steht. Wenn ich allerdings gern in den Jahren zurück (Menu enthält Jahre mit Untermenüs der Reisen) z.B. eine Reise aus 2010 nochmal nachlesen möchte, so muss man erst ganz runter scrollen um den Tag 1 lesen zu können.

    Gibt es hier eine Möglichkeit, die es mir ggf. im Backend erlaubt, abgeschlossene Reisen wieder in der richtigen chronologischen Reihenfolge anzeigen zu lassen, die aktuelle Reise aber weiterhin mit dem letzten Beitrag zuoberst? Alternativ hatte ich sonst die Idee, die komplette Reise als SinglePage neu zu schreiben, was aber bei längeren Reisen und jeder Menge Bilder im Text zu ggf. recht langen Ladezeiten führen würde.

    Von einer Möglichkeit das neu zu entwickelnde Theme auch mobilfähig zu machen, frage ich mal noch nicht. Eventuell hast Du das schon mit als "letztes Kapitel" vorgesehen.

    Danke und Gruß,
    Lars

    Antworten Teilen
    • von Scrabbledo am 04.08.2014 (22:16 Uhr)

      Hallo,
      ich habe inzwischen eine ganz simple Lösung für mein Problem gefunden. Anstatt im Menü die Kategorie für den Beitrag (bei mir das Reiseziel) einfach zu verlinken, fügt man selbst einen "Link" zu dieser Kategorie (oder dem Jahr z.B.) dem eigenen Menü hinzu und ergänz den Link am Ende einfach noch mit einem ? und einem Befehl als Bsp.:
      http://www.blog.de/category/?order=asc
      und schon werden die dortigen Beiträge wieder chronologisch richtig sortiert, sprich der älteste zuerst.

      Antworten Teilen
  9. von Christian am 01.08.2014 (16:26 Uhr)

    Wird es den Guide später auch als gebündelte Ausgabe (z.B. als PDF mit Inhaltsverzeichnis) geben? Die Aufteilung in mehreren ellenlangen Seite ist jedenfalls eher unübersichtlich.

    Antworten Teilen
  10. von Plueschpuschel am 03.09.2014 (12:05 Uhr)

    Der Anfang ist spitze! Man kann sich simpel daran orientieren und mit seinem eigenen Theme beginnen. Die Idee, das später zu bündeln finde ich spitze! Gibts schon einen Zeitpunkt für das nächste Release?

    Antworten Teilen
    • von Florian Brinkmann am 03.09.2014 (12:09 Uhr)

      Hi Plüschpuschel,

      mit dem Code für den nächsten Teil bin ich so gut wie fertig, es fehlt noch ein bisschen „Artikel“ ;) War etwas komplizierter, deshalb dauert es etwas länger.
      Einen genauen Zeitpunkt kann ich dir nicht sagen, aber nächste Woche sollte möglich sein, denke ich, eventuell auch noch diese.

      Viele Grüße,
      Flo

      Antworten Teilen
  11. von Persa am 23.10.2014 (14:13 Uhr)

    Hallo, Florian! Wenn du neugierig auf alternative Lokalisierungsmodalitäten für die Übersetzung von WordPress Themes ist, empfehle ich dich diese Übersetzungsplattform: https://poeditor.com/

    Antworten Teilen
  12. von DrSky am 13.09.2015 (09:52 Uhr)

    Ich wollte schon immer mal mein eigenes Wordpress-Theme bauen, hatte aber bisher noch keine einfache Anleitung gefunden. Der Artikel kommt mir daher gerade recht. Danke!

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
30 kostenlose WordPress-Themes für Responsive Design
30 kostenlose WordPress-Themes für Responsive Design

Das Angebot an kostenlosen Templates für die eigene Website wächst stetig. Auch die Auswahl an Wordpress-Themes, die Responsive Webdesign unterstützen, ist inzwischen beachtlich. » weiterlesen

Diese 30 kostenlosen WordPress-Themes für Responsive Design musst du kennen
Diese 30 kostenlosen WordPress-Themes für Responsive Design musst du kennen

Responsive Webdesign wird quasi zum Standard im Web. Wenn du WordPress nutzt, solltest du dir daher die folgenden 30 Themes nicht entgehen lassen. Alle haben ein Responsive Design und sind kostenlos. » weiterlesen

WordPress-Themes direkt im Frontend anpassen: Das kann CSS Hero
WordPress-Themes direkt im Frontend anpassen: Das kann CSS Hero

Mit der WordPress-Erweiterung CSS Hero passt ihr das Aussehen eines Themes über eine grafische Oberfläche direkt im Frontend an. Wir haben uns das Tool für euch angeschaut. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?