Ein eigenes WordPress-Theme erstellen mit underscores.me

Einleitung:

Im Teil Lokale Entwicklung eines WordPress-Blogs. Einrichtung des lokalen Servers XAMPP + WordPress + Datenbank habe ich gezeigt, wie man lokal mit WordPress arbeiten kann.

Das Starter Theme:

In diesem Teil geht es darum, wie man sein eigenes WP-Theme erstellt. Dazu nehme ich die Website  underscores.me. Man kann sich das aktuelle Starter-Theme, hier generieren lassen. Es ist hervorragend dazu geeignet sein eigenes Theme zu erstellen. Im generierten Theme wurde sich auch um eine mobile Navigation gekümmert, die die Desktopnavigation ersetzt, sobald ein Brakepoint, via Media-Query, erreicht ist. Zwei Layoutarten sind ebenso von Anfang an mit dabei. Dies wären Sidebar rechts oder Sidebar links. Dazu muss man nur den betreffenden CSS-Code kopieren.

Um zu starten, muss man nur einen Namen für sein Theme eingeben und den Button „Generate“ drücken. Der Download startet automatisch. Nun habt ihr eine Zip, die entpackt werden muss.

Geht in den ausgepackten Ordner rein, und kopiert den Ordner der alle Dateien enthält. Dies ist euer Theme-Ordner.

das gerade generierte und ausgepackte theme von underscores
das gerade generierte und ausgepackte theme von underscores

Diesen Ordner kopiert ihr in das Theme-Verzeichnis eures lokalen WordPress. Bei mir ist das C:/xampp/htdocs/wordpress/wp-content/themes

ordner-themes-wordpress
Ordner Themes WordPress

Starter Theme aktivieren

Um das Theme nun zu benutzen und um sich einen ersten Eindruck zu verschaffen, müssen wir das frische Theme auch in unseren lokalen WordPress aktivieren. Dazu meldet Ihr euch ins Backend von WordPress an. Dazu muss vorher XAMPP laufen und Apache und MySQL gestartet sein. Um sich im Backend anzumelden, gebt bitte Folgendes in den Browser ein. localhost/wordpress/wp-login.php. In meine Fall da wordpress bei mir unter htdocs liegt. Je nachdem wo euer WordPress liegt, muss die URL anders lauten.

Seid Ihr angemeldet geht links auf Design -> Themes. Hier sollte, wenn Ihr alles wie ich gemacht habt, euer Starter-Theme erscheinen. Aktiviert es nun.

wordpress-backend-themes
WordPress Backend Themes

Im Frontend sieht es dann folgendermaßen aus.

wordpress-frontend-starter-theme
WordPress Frontend Starter-Theme

Nicht schön aber alles funktioniert. Nun ist es an euch, was ihr aus diesem „Starter-Theme“ mit Hilfe von CSS und ein wenig PHP Wissen anstellt.

Die Sidebar aktivieren

Was ich abschließend noch zeigen möchte, wie man die Sidebar aktiviert. Default kommt die Sidebar unter dem Main-Content, da alles auf Width 100%  gesetzt ist. Um nun die Sidebar neben den Inhalt zu bekommen, je nach dem wo die Sidebar stehen soll, kopiert das CSS aus dem Ordner layouts. In meinen Fall: content-sidebar.css in eure style.css.

Wie man mit Frameworks und WordPress arbeitet? Dazu wird auch noch ein Artikel erscheinen. Dies soll nur eine Grundlage für Interessierte sein, für die, die sich in die Materie einarbeiten wollen.

Viel Spaß mit euren neuen WordPress Theme. Happy Coding!