How to build your own WordPress Theme

Heute findet man Tausende von Wordpress Themes. Manche sind kostenpflichtig andere gratis. Eine Entscheidung fällt oft schwer und ein Design, welches dem Projekt völlig entspricht, findet man kaum. Aber eigentlich wäre es gar nicht so schwierig ein eigenes Theme für Wordpress zu erstellen. Vorausgesetzt man kennt sich ein wenig mit CSS und HTML aus. Deshalb möchte ich hier einen kurzen Einstieg in Wordpress Themes geben.

Um das Tutorial starten zu können, braucht man eine laufende WordPress Site. Am einfachsten geht es meiner Meinung per XAMPP auf dem eigenen Rechner.

Schritt 1. Ordnerstruktur und erste Dateien

Die Themes befinden sich in der Ordnerstruktur von WordPress an folgendem Ort:
wordpress_ordner/wp-content/themes/

In diesem Ordner erstellt man nun einen neuen Ordner mit dem Namen des neuen Themes. Darin erstellt man mit einem Texteditor die Dateien index.php und style.css. In das Stylesheet werden nun die Meta-Daten zum Theme eingetragen:

02_Theme_Meta

Schritt 2. Der Loop

Der Loop ruft aus der WordPress-Datenbank die verschiedenen Beiträge ab. Der allgemeine Loop sieht folgendermassen aus:

03_Loop

Dieser wird nun in die index.php-Datei eingebettet.
04_Eingebetter_Loop

Das Theme kann nun im WordPress ausgewählt werden. Das Resultat sieht mit der Startinhalt von WordPress folgendermassen aus:

05_Ausgabe_Website

Bevor man nun Änderungen im Stylesheet vornehmen will, muss man das Stylesheet korrekt verlinken. Dies wird durch WordPress vorgegeben, so wie der Titel und die Metadaten der Webseite. So kann man diese Werte im Backend zum Teil verändern. Der folgende Code gehört deshalb in den Head-bereich der index.php-Datei:

06_Headbereich

Ab jetzt kann man das Design im Stylesheet erstellen und das Theme so formen wie man möchte.

Schritt 3 Navigation

Um eine Navigation zu erstellen, die vom Backend beeinflusst werden kann, braucht es eine php-Datei mit dem Namen Functions. Diese wird im gleichen Ordner wie die index.php-Datei erstellt.
Diese Datei sollte folgenden Inhalt haben:

07_functions

So wird ein Menü für das Backend freigegeben, welches von dort her bearbeitet werden kann.Mit folgenden Zeilen wird das Menü in die index-Datei eingefügt.

08_menu_index

Im Backend sollte nun der Unterpunkt Menü hinter Design auftauchen. Ich habe folgendes Menü erstellt:

09_Menu_Backend

Nun sieht meine Startseite (Ich habe bereits ein wenig am Design geschraubt) folgendermassen aus:

09.1_Prototype

Über das Quelltexttool eines Browsers kann nun die Einbettung des Menüs analysiert werden.Im Normalfall ist die Menü-Liste in einem DIV-Container eingebettet. Ebenfalls erfährt man so die verschiedenen Klassen der einzelnen Elemente.

Eine Alternative bietet das Durchlesen der Dokumentation auf WordPress zum Thema Navigation. Durch Anpassen des PHP-Codes können eigene Klassen und Strukturen vorgegeben werden.

Diese drei Schritte reichen aus um ein simples WordPress Theme für beispielsweise einen Blog zu gestalten.

Hier mein Resultat nach einigen Schraubereien im Stylesheet und kleinen Änderungen der Struktur des Index-Files.

10_Prototype

Natürlich enden die Möglichkeiten von Worpress nicht hier. Dies sollte nur einen Vorgeschmack auf das sein was mit WordPress möglich ist. Mit höheren Anforderungen an die Website steigen jedoch auch die Anforderungen der WordPress-Programmierkenntnisse.

Kritik
von Thomas Wiederkehr

Ausgangslage:

Als Nebenjob durfte ich für Kirchgemeinde eine Website überarbeiten. Leider bin ich bis Ende Semester damit noch nicht fertig geworden. Jedoch konnte ich durch dieses Projekt viel über Wordpress und die Programmierung von eigenen Themes lernen. Was meine Begeisterung für dieses Thema entflammen liess.

Idee:

Da mein Produkt als solches für Digezz nicht interessant ist. Kam mir die Idee aufzuzeigen wie einfach es eigentlich ist, ein eigenes Theme für Wordpress zu erstellen. Die Fähigkeit eigene Themes kreiern zu können, fand ich deshalb hilfreich, das es zwar Unmengen an Themes online gibt. Diese aber selten völlig unsere Bedürfnisse erfüllen.

Umsetzung:

Für meine Idee bot sich natürlich das herkömmliche Tutorial an. Eine wichtige Anforderung an das Tutorial war, dass es sehr kurz sein sollte, damit der Einstieg in die Wordpress-Themes-Welt leicht fällt. Ich entschied mich auf drei simple Schritte zu beschränken:

  1. Grundgerüst der Dateien
  2. Die Loop-Funktionalität für den Content
  3. Die Navigation

Diese drei Punkte erschienen mir am wesentlichsten. Ebenfalls entschied ich mich nicht auf das Stylesheet und genaue HTML-Strukturen einzugehen. Da dies im Ermessen des Tutorialbesuchers bleiben sollte. Aus demselben Grund hielt ich es auch für unnötig extra meine Beispiels-Wordpress-Seite auf Digezz zu stellen.

Herausforderungen:

Technische Schwierigkeiten gab es bei der Umsetzung keine. Eine Herausforderung war jedoch das Konzept möglichst einfach und kurz zu halten.

Erkenntnisse:

Die wichtigste Erkenntnis war für mich, dass es schwierig ist kurze Tutorials zu erstellen ohne elementar Sachverhalte auszulassen.

Tools:
Ich habe meine Wordpress-Seite in XAMPP aufgesetzt.
Als Texteditor benutzte ich Aptana.
Die Screenshots erstellte ich mit dem Snipping Tool von Windwos.

Quellen

https://codex.wordpress.org/

 

Keine Kommentare

Schreibe einen Kommentar