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!

Fun zum Freitag #7

Heute was Kniffliges für die JavaScript Nerds. Im kleinen Browser Game „Beat the Clock …with JavaScript knowledge“ geht es darum, den Output, der in der Konsole stehen würde, in ein Eingabefeld zu tippen. So wie die Anweisung in der Konsole angezeigt werden würde, wenn man den Befehl manuell, in die Konsole, die unter den Entwicklerwerkzeugen zu finden ist, eingeben würde.

Soweit so gut. Klinkt erst mal recht einfach mit ein wenig JavaScript Wissen. Der Passus ist aber, dass es einen Timer gibt. Dieser läuft naturgemäß ab. Jedoch, wenn man einen Ausdruck richtig beantwortet, wird wieder Zeit aufgefüllt. 5 Sekunden pro richtige Antwort. Die Freie Auswahl hat man auch, welchen Ausdruck beantworten möchte. Einfach drauf klicken. Tab geht leider nicht. Somit verliert man Zeit, da man die Maus benutzen muss. Ziel ist so viele Antworten wie möglich zu geben.

Ich muss zugeben, dass ich noch nicht alle Ausdrücke korrekt beantwortet habe. Somit auch nicht weiß, was Euch am Ende erwartet. Besonders viel habe ich mich auch noch nicht mit dem Spiel auseinandergesetzt. Wenn mal an einem Wochenende Zeit ist, werde ich es angehen. Ich habe da schon einige Ideen wie man das Ganze auch ohne Timer „Abarbeiten“ kann. Ich denke Ihr auch 😉

Hier nochmal der Link zum Spiel: „Beat the Clock …with JavaScript knowledge“