Ein WordPress-Theme mit Bootstrap entwickeln – Ein Tutorial für Einsteiger

Bootstrap WordPress Tutorial

Was brauchst du?

• 30 Minuten Zeit
• Text-Editor
• Grundkenntnisse in HTML, CSS und WordPress

Was ist das Ziel?

Am Ende des Tutorials solltest du verstehen, was ein Framework ist und wie Bootstrap und WordPress ineinandergreifen. Auf dieser Grundlage kannst du beginnen, dein eigenes Theme zu entwickeln.

Du weißt bereits, wie man ein eigenes Theme baut?

Umso besser, dann könnte dieses Tutorial dein größter Wissensboost sein, seitdem du CSS gelernt hast – zumindest war’s bei mir so. Und klar – ein paar Stunden musst du noch selbst rumbasteln. Also: Enter! Enter!

Fangen wir an: Was ist Bootstrap?

Ende Juli haben die Entwickler Version 3 von Bootstrap veröffentlicht.
Ende Juli haben die Entwickler Version 3 von Bootstrap veröffentlicht.

Bootstrap ist ein Framework, d.h. eine Art von Vorlage für eine Webseite. Solche Frameworks, auch Blank Themes genannt, gibt es eine ganze Reihe. Bootstrap gehört zu den bekanntesten und beliebtesten: Auf der Entwicklerplattform Gitub hat Bootstrap mehr als 50.000 Sterne – mehr als doppelt so viele, wie das zweitbeliebteste Projekt. Der große Vorteil von Bootstrap (und natürlich auch anderen Frameworks) ist: Du musst die Webseite nicht von Grund auf neu bauen. Es stehen bereits definierte Elemente zur Verfügung, zum Beispiel Boxen, Navigationen oder responsives Anpassen an die Bildschirmgröße des Nutzers – das spart eine Menge Zeit. Grundsätzlich kann Bootstrap mit und ohne Content-Management-System, statisch oder dynamisch verwendet werden.

Wer hat Bootstrap erfunden?

Mark Otto und Jacob Thornton von Twitter, die Bootstrap kostenlos zum Download unter der Apache-Lizenz freigaben. Seit Ende Juli gibt es den Release Candidate 1 der dritten Version. Otto erzählt im Podcast “The Big Webshow” davon, wie er eine interne Guideline für das Design bei Twitter schreiben wollte. Doch es sollte ein Redesign geben, eine Richtlinie zum Design kurz vor einer Änderung – reine Arbeitsverschwendung. Stattdessen veröffentlichte er den Code als Framework.

Wo bekomme ich Bootstrap?

Auf der Bootstrap-Seite bei Github. Dort gibt einen Überblick über Bootstraps Fähigkeiten: Das Scaffolding erlaubt es, eine Webseite leicht zu gliedern, und integriertes CSS, sogenannte Komponenten, und JavaScript lassen viele Dinge, wie Slider Pop-ups, Tabs oder Navigationen recht schnell einbauen – all diese Dinge sind nur eine div-class entfernt.

Die Erläuterungen auf der Twitter-Bootstrap-Seite sind allerdings recht knapp, gerade für Einsteiger gibt es ausführlichere Hilfe zu allen Elementen bei der W3C.

Woraus besteht Bootstrap?

Wenn du Bootstrap runterlädst, wirst du sehen, dass Bootstrap aus zwei CSS- und zwei Java-Script-Dateien besteht. Diese bilden ein eigenständiges Design und sind das Grundgerüst für eine Webseite, die du optisch nach Belieben aufbauen kannst.

Aber eines fehlt für eine funktionierende Webseite: HTML bzw. PHP, in das CSS, Bilder und JavaScript integriert wird. Genau darum soll es in diesem Tutorial gehen: Bootstrap mit WordPress verbinden und so dein eigenes WordPress-Theme bauen.

Wie verbinde ich Bootstrap und WordPress?

Ein gute Methode ist die Integration via Child-Theme, die Ellen schon in einem Videotutorial erklärt hat. Ein Vorteil dabei ist, dass du nicht in der langen Original-CSS-Datei von Bootstrap rumbastelst, sondern in einer neuen CSS-Datei nur die Elemente änderst oder erstellst, die du brauchst. Das ist übersichtlicher und du hast mit der unberührten Backup-Version der Bootstrap-CSS-Datei ein funktionierendes Design in der Hinterhand, falls etwas schief geht.

So geht’s:

1. Erstelle einen Ordner für dein Theme. In diesen kopierst du den Bootstrap-Ordner, in dem die Standard-Dateien liegen.

2. Erstelle eine style.css-Datei, die im gleichen Ordner wie die Boostrap-Dateien liegen.

Die Struktur in deinem Theme-Ordner.
Die Struktur in deinem Theme-Ordner bei Bootstrap 2.3.2. In der neuen Version 3 fallen die Unterteilung in responsive- und nicht-responsive-CSS-Dateien und der img-Ordner weg.

3. Öffne die style.css-Datei und erlaube ihr, auf die Bootstrap-CSS-Dateien zuzugreifen. Dazu kopierst du folgenden Code in die style.css:

/* Theme Name: DeinChild
Theme Description: Mein erstes Bootstrap-Theme 
Author: Mein Name Author 
URI: http://www.deinedomain.de/ 
Template: parentthemeordner Version: 1.0 
*/ 
@import url('bootstrap/css/bootstrap.min.css'); 

Deinen eigenen Code schreibst du unter die @import-Funktion.

Ein einfaches Beispiel mit der h1-Überschrift, deren Schriftgröße du ändern willst. In der style.css fügst du dann hinzu:

h1 {font-size: 3em;} 

Jedes CSS-Element, das du in der CSS-Datei style.css definierst, überschreibt die Bootstrap-CSS-Datei. Gibt es deiner style.css keine Angabe zur h1-Überschrift, wird automatisch auf die h1-Überschrift in der Bootstrap-Datei zurückgegriffen.

Kurze Anmerkung zu den CSS-Dateien:

Bootstrap 3 beinhaltet zwei CSS-Dateien. Du kannst dich entscheiden, ob du durch die @import-Funktion die bootstrap.css oder bootstrap.min.css einbindest. Der Unterschied liegt darin, dass die “min”-Datei wesentlich kleiner ist. Zum Arbeiten eignet sich durch die saubere Darstellung dagegen die fast 5000 Zeilen lange Version besser.

Bis zum neuen Bootstrap 3 waren vier CSS-Dateien Teil des Frameworks: zwei davon für responsives Anpassen, zwei haben diese Funktion nicht. Bei Bootstrap 2.3.2 musst du als erstes klären, ob du responsives Verhalten möchtest und dann die dementsprechend benannte Datei wählen.

Wie kann ich eine WordPress-Seite machen?

Damit eine Webseite im Browser dargestellt werden kann, braucht es eine statische HTML-Datei oder dynamische PHP-Dateien. Im nächsten Schritt musst du deshalb die WordPress-typischen Dateien wie index.php, single.php, header.php oder footer.php erstellen und diese miteinander verknüpfen.

In der header.php-Datei greifst du standardmäßig nach deiner style.css, die wiederum die CSS-Datei von Bootstrap aufruft – durch den Befehl @import.

Beispiel für eine header.php-Datei:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title(); ?></title>
        <meta name="description" content="<?php bloginfo( 'description' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<link href="style.css" rel="stylesheet">
    </head>

Wichtig: Wenn du ein responsives Aussehen willst, dann musst du im Header-Bereich unbedingt einen Viewport festlegen. Denn Smartphones haben so unterschiedliche Auflösungen – ohne diesen Befehl könnten die Webseite auf einem Samsung-Smartphone ganz anders Aussehen als auf einem iPhone 5.

In der index.php-Datei holst du dir mit Hilfe des WordPress-Loops die Beiträge in deinem Blog und schließt mit footer.php-Datei deine Seite ab.

Wenn du das HTML- und PHP-Grundgerüst mit Inhalten füllst, egal ob mit handgetippten Text im Texteditor oder durch WordPress, wird es sich im typischen Bootstrap-Aussehen zeigen. Wie vor ein paar Absätzen mit der h1-Überschrift gezeigt, kannst du über die style.css-Datei das Aussehen deiner Seite ändern.

Du willst weiter machen?

Du willst eine Sidebar bauen und WordPress-Beiträge einlesen? Dann hat Elmastudio das richtige für dich: Ellen macht in einem Screencast vor, wie ein Theme-Layout anlegt wird.

Gibt es Fragen?

Wenn im Tutorial etwas unklar geblieben ist und du Fragen zu WordPress und Bootstrap hast: Dann stell’ sie doch in den Kommentaren – ich versuche sie dann dort zu beantworten. Dort kannst du auch Anregegungen oder Kritik unterbringen: Ich freue mich über jedes Feedback!

31 Kommentare

  1. Vielleicht sollte man noch ergänzen, dass ja auch noch das eigentliche Bootstrap-Skript (bootstrap.js bzw. bootstrap.min.js) eingebunden werden muss, ebenso wie jQuery. Mit dem CSS alleine ist es nicht getan… Insgesamt geht das Entwickeln mit Bootstrap 3 gegenüber der Vorgängerversion schon leichter von der Hand.

    • @Frank: Okay, vielen Dank für dein Feedback, jQuery selbst ist ja bei WP schon selbst dabei, bzw. wird über die WordPress-Theme functions.php Datei geladen. Dann müsste man nur noch ergänzen, die bootstrap.min.js in den WordPress-Theme “js” Ordner zu integrieren. Ich hoffe so habe ich es richtig zusammen gefasst, oder?

      Grüße, Ellen

    • Hallo Frank,

      du hast recht: Um einen Teil der Funktionen zu verwenden, braucht man die JavaScript-Dateien. Allerdings ist das nicht zwingend, um das Grundaussehen von Bootstrap zu bekommen.

      Viele Grüße,
      Katharina

  2. Hey,

    der erste Gastartikel ist online, sehr cool. Für Einsteiger die gerade in die Materie einsteigen wirklich gut geschrieben. Sollte jeder nachvollziehen können.

    LG

    • @Florian: Vielen Dank für dein tolles Feedback! Ja, wir freuen uns auch sehr über den Gastbeitrag und finden, Katharina hat klasse Arbeit mit ihrem WordPress/Bootstrap Einsteiger-Tut geleistet. Ich selbst hatte bisher noch nicht mit Bootstrap gearbeitet, somit kann ich hier auch noch etwas dazulernen :) Grüße, Ellen

  3. Stephan Lück 7. August 2013

    Sehr schöner Artikel vom Gastautor, kleine Anmerkung die Bootstrap css datei bootstrap.css und bootstrap-reponsive.css. sind nur bei der Version auf Github so vorhanden.

    http://getbootstrap.com/bs-v3.0.0-rc1-dist.zip dies ist die erste RC1 Version von Bootstrap 3 – welche man auch unter Github findet, jedoch unter Bootstrap Branch – W.i.P

    https://github.com/retlehs/roots ist ein Bootstrap Framework für WordPress – jedoch nicht unbedingt für Anfänger geeignet.

    Jedoch hier ist es interessant, wie man CSS/JS richtig einbindet
    https://github.com/retlehs/roots/blob/master/lib/scripts.php

    so sieht das ganze dann auch nur in der eigentlichen function.php aus
    https://github.com/retlehs/roots/blob/master/functions.php

    • Hallo Stephan,

      das freut mich, dass dir der Artikel gefallen hat. Du hast recht, bei dem neuen Release Candidate gibt es diese Unterscheidung nicht mehr. Bis zur Version 2.3.2. musste man sich allerdings im Vorfeld zwischen repsonsiv oder nicht-responsiv unterscheiden.

      Viele Grüße,
      Katharina

    • Stephan Lück 7. August 2013

      Aus diesem Grund habe ich auch, den Link zum Root Theme Framework gepostet,
      dort wird auch gezeigt wie man stylesheets/javascripts einbinden kann.
      Ohne diese @import Regel

  4. Schöner Artikel, allerdings wäre noch eine Ergänzung eines der WordPress-Dateistruktur super, vllt. eine Ansammlung an Grundfunktionen, welche in der index.php, single.php etc. verwendet werden sollten, also quasi eine “Minimallösung”.

    Also als Anreiz, trotzdem sehr guter Artikel, wie immer! :)

  5. Danke für den spannender Artikel. Klasse!
    Eine Frage habe ich aber noch, speziell bzgl. des Einbindens per Child Theme. Was ist denn in diesem Fall “Theme Name: DeinChild” und was ist “Template: parentthemeordner”? Habe das Child Theme Video von Ellen geguckt und habe auch schon Child Themes erstellt. Nur hier im Zusammenhang mit bootstrap hat es in meinem Kopf noch nicht klick gemacht. Für Aufschlauung wäre ich sehr dankbar!

  6. Netter Einstieg, gefällt mir!
    Man sollte nur als kleinen Randhinweis ergänzen, dass der CSS @import für Interpretation-Lags im Browser führen kann und daher von der Verwendung abgeraten wird.

  7. Hallo,
    nur zum Verständnis:
    Wenn ich mit Bootstrap mein eigenes Theme entwickle, dann fange ich mit dem Theme von null an?

    Wenn ich ein Blank Theme auf Basis von Bootstrap nehme, dann habe ich dieselbe Basis, aber das Worpress Grundgerüst aus index.php, single.php, header.php oder footer.php usw. wird schon mitgeliefert?

    Danke, Andrea

  8. Danke!

    Viele nützliche Links dabei und gute Erklärung. Ich habe mich endlich dazu entschieden mein unresponsive Theme aufzupolieren und dabei bootstrap gewählt.

  9. Hi,

    genau wie Andrea weiter oben, habe ich mich gefragt, ob ich das Grundgerüst dazu wirklich neu bauen muss oder aber einfach ein free blank theme mit eingebautem bootstrap nutze. Ich gehe davon aus, ich kann ein fertiges blank theme nutzen und anpassen, da wird nicht viel unnötiger quatsch drin sein oder liege ich damit falsch?

    Die Themekraft Version ist auf jeden Fall schonmal auch unter der GNU License zu bekommen, genau wie Bootstrap selbst. Bei der Upplex Variante handelt es sich um eine GPL.
    Jetzt frage ich mich, was kann ich als Webdesigner bzw. kleine Agentur für Kundenprojekte nutzen? Ich möchte mir in die Richtung gerade ein weiteres Standbein erschaffen und Themes auch verkaufen können. Ist dies mit der GPL auch möglich?
    Hat sich jemand diese Themes schon einmal genauer angeschaut oder kennt vielleicht noch eine gute Lösung?

    Ich würde mich freuen, wenn mir jemand bei meiner Entscheidungsfindung, auf welche Basis ich in dem Bereich aufbaue, helfen kann.

    Viele Grüße
    Marc alias Marxeo

    • Hi Andrea, hi Marc,

      am Sinnvollsten finde ich ist es, wenn man sich für Kundenprojekte u.ä., ein Grundset zusammenstellen. Sprich man hat eine Art Mastertemplate, auf Basis von bsp. Bootstrap und Co als Parent-Theme und erzeugt dann immer nur mit diversen Child-Themes seine individual Templates. Kann man jeh nach Js Kenntnisse dann halt noch erweitern.

      Bootstrap ist letztendlich ja auch schon ein Set an Vorgaben, Tools und Helferlein, welche ja dazu dienen sollen, dass man nicht immer alles von vorne machen muss und darüberhinaus auch so etwas wie eine Art Guideline hat. Wenn man das dann noch mit diversen Tools aus der Javascript Welt kombiniert kann man damit schon einiges Zaubern.

      Jedesmal das Rad neu erfinden zu wollen/zu müssen kann auf Dauer nämlich ganz schön stressig sein, ich weiß wovon ich rede ;-) Deswegen kann man es sich wie gesagt vereinfachen in dem man ein Mal ein Set zusammenstellt, bestehend aus einem HTML-Gerüst und den diversen Helferlein und diese dann nur jedesmal mit den Child-Themes erweitert.

      Zu GPL => http://de.wikipedia.org/wiki/GNU_General_Public_License Kann hier nachgelesen werden, ich meine im 3. Absatz steht dann folgendes “Software unter der GPL-Lizenz darf für alle Zwecke ausgeführt werden (auch kommerzielle Zwecke….”
      “sie darf bei rein privater (oder interner) Verwendung – ohne Vertrieb, ohne Weitergabe – modifiziert werden, ohne dass der Quellcode offengelegt werden muss (nur bei Vertrieb oder Weitergabe müssen der Quellcode und etwaige Code-Änderungen den Endnutzern zugänglich gemacht werden…..”

      Würde ich mir aber noch einmal im Detail genauer zu Gemüte führen, weil oberste Regel: Sobald du etwas kommerziell betreiben möchtes, gelten andere Spielregeln und darüber sollte man sich möglichst umfassend informieren!!!!

      Hierbei ist Google und Wikipedia dein Freund, Englisch übrigens auch ;-) Weitere Infos bekommst du aber auch über:

      https://www.gnu.org/licenses/quick-guide-gplv3.html.en
      https://creativecommons.org

      oder bei mir info@pro-ci.de

      Viele Grüße,
      Raphael

  10. Hi Katharina,

    vielen Dank für den tollen Artiel und die weiterführenden Kommentare. Dadurch habe ich genau das gefunden was ich für mein Bootstrap / Worpdress / Node.js Template Set benötigt habe ;-)

    Viele Grüße und eure Webseite befindet sich jetzt in meinen Lesezeichen ;-)

    Raphael

  11. Hallo Ellen, der Artikel ist ja schon etwas älter. Wie würdest Du heute vorgehen, wenn Du ein Theme mit möglichst geringem Aufwand, aber vielel Features, selbst entwickeln möchtest? Was kannst Du mir für Tipps geben?
    MfG
    Kevin :)

  12. Hallo zusammen,

    ich muss zugeben, ich bin ein ziemlicher Amateur, was den Bau von Webseiten angeht. Mit WordPress habe ich schon ein Projekt realisiert und bin mit dem Ergebnis auch ganz zufrieden. Nun soll ein zweites kleineres Projekt umgesetzt werden und da es um einen recht simplen One-Pager geht dachte ich, dass ein großes CMS wie WordPress unnötig ist und habe mich an Bootstrap gewagt. Nach kurzer Rechereche habe ich mich für den Editor Pingendo entschieden und mit Hilfe dieses übersichtlichen Editors meine Seite gebaut.
    Nun zu meiner Frage – als Ergebnis spuckt mir Pingendo eine html, eine css und eine less Datei aus. Leider scheint dies ja nicht ausreichend zu sein, um die Seite online zu bringen. Was fehlt und wie kann ich die fehlenden Dateien simpel und schnell erstellen?
    Auch wenns etwas offtopic ist, hoffe ich auf einen Tipp :)

    Viele Grüße, Martin

  13. Hallo Ellen,
    vielen Dank für die toller Anleitung.
    Ich habe gelesen das @import nicht mehr zeitgemäß ist und es lieber durch die functions.php gelöst werden soll. Das betrifft natürlich auch die Child Themen. Jetzt bin ich unsicher wie ich es machen soll. Kann man @import noch getrost verwenden?

    Lieben Dank
    Sebastian

Hinterlasse eine Antwort

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