Responsive Blank Themes
Kommentare 38

Responsive WordPress Blank-Themes in der Übersicht

Möchtest du dein eigenes responsive WordPress Theme entwickeln, ist es hilfreich ein Blank Theme oder auch Starter Theme zu nutzen, um mit einer sauberen Grundlage für die eigene Theme-Entwicklung durchzustarten. Ein Blank Theme dient dazu, dass du dir eine praktische Theme-Arbeitsvorlage erstellst, von der aus du auch zukünftige Themes leichter umsetzen kannst.

Was macht ein gutes Blank-Theme aus?

Wichtig ist, dass du mit dem Blank Theme gut zurecht kommst und es deine Arbeitsweise bei der Theme-Entwicklung unterstützt. Zu viele Extras sind zwar verlockend, doch ein Blank-Theme ist meiner Ansicht nach eher mit einer leeren Leinwand zu vergleichen und weniger ist da bekanntlich meist mehr.

Natürlich kommt es immer auch auf das jeweilige Projekt an und welche Features benötigt werden und welches Blank-Theme diese eventuell schon integriert hat. Es kann sich also lohnen vor Projektgebinn noch einmal zu vergleichen, welches Blank-Theme am besten für das aktuelle Projekt passt.

Relevante Features eines modernen Blank-Themes sind meiner Ansicht nach:

  • HTML5/CSS3
  • eine saubere Template-Dateistruktur
  • gute Dokumentation (im Code und als Online oder zum Download)
  • vorbereitete Theme-Optionen (wenn benötigt)
  • responsive CSS (z.B. eine vorbereitete responsive Navigation)
  • Reset CSS
  • grundlegenende CSS-Struktur und Styles für Typografie-Elemente oder Alignment
  • vorbereitete jQuery Plugins (z.B. für Tabs oder Dropdowns, wenn für das Projekt benötigt)

Eine Übersicht aktueller WordPress Blank-Themes

Nachdem du dich für den Einsatz eines Blank-Themes zum Start deines nächsten WordPress Theme-Projektes entschieden hast, folgt die Qual der Wahl. Welches Blank-Theme ist das richtige für mein Projekt? Hier eine kleine Übersicht beliebter, moderner WordPress Blank-Themes, manche schlichter, andere mit jeder Menge Goodies:

Bones Theme

Das Bones Theme ist ein schlichtes, beliebtes HTML5 Starter Theme. Den Code baut das Bones Theme auf der HTML5 Boilerplate auf. Inzwischen gibt es auch eine responsive Version von Bones. Dazu wird die 320 and Up mobile-first Boilerplate genutzt.

BootstrapWP

Responsive Navigation von Bootstrap BootstrapWP ist nur eines der Blank-Themes und Theme-Frameworks die Bootstrap von Twitter als Grundlage nutzen. Bootstrap selbst bietet etliche Features, wie vorbereitete jQuery-Plugins (für Buttons, Tabs, Sliders), Typografie Styles oder eine vorbereitete responsive Navigation (siehe Abbildung). Das BootstrapWP ist daher eher umfangereich und man muss sich ein wenig einarbeiten. Wenn man viele der Features sowieso für das eigene Projekt benötigt, kann BootstrapWP eine tolle Blank-Theme Basis bieten.

Roots Theme

Das Roots Theme baut genau wie BootstrapWP auf Twitter’s Bootstrap auf. Markup und Stylesheet basiert auf HTML5 Boilerplate. Das Roots Blank-Theme eignet sich daher vor allem, wenn du etliche Menge Features sowie ein responsive Grid in deinem Theme benötigst. Außerdem bietet Roots bereits vorbereitete Theme-Übersetzungen an.

Foundation for WordPress

Foundation von ZURB bietet eine ähnliche Code-Grundlage wie Bootstrap. Mit Foundation for WordPress kannst du daher ebenso komplexere Projekte mit JavaScript-Elementen (z.B. dem responsive Orbit Slider) und responsive Layout aufbauen.

Orbit responsive Slider von ZURB

Der responsive Slider Orbit von ZURB.

_s Theme

Möchtest du eher eine reduzierteres Blank-Theme für deinen Projekt-Start nutzen, bietet das neue _s Theme eine solide Grundlage. Das Theme wurde vom Automattic-Team entwickelt und bietet ein sauberes, HTML5 Starter Theme ohne jede Menge Features und vorbereitete Styles. Es bietet zwar keine vorbereiteten responsive Styles, diese kannst du aber mit Hilfe von Media Queries recht schnell individuell in deinem Stylesheet einbinden. Das _S Theme bietet übrigens schon eine vorbereitete Theme-Optionenseite an.

Die Template Dateien des _s Blank-Themes.

Die Template Dateien des _s Blank-Themes.

Ein eigenes Blank-Theme

Wenn du sehr oft mit WordPress-Themes arbeitest ist es sehr wahrscheinlich, dass du nach einer Weile dein eigenes Blank-Theme entwickeln möchtest. Oftmals entsteht ein eigenes Blank-Theme quasi von selbst, da du dich von Projekt zu Projekt sowieso an deinen neusten Themes orientierst. Wenn dir diese Arbeitsweise entspricht lohnt es sich, eine eigene Vorlage ausgehend von deinem aktuellsten Theme zu erstellen.

Ein eigenes Blank-Theme hat den Vorteil, dass du das Theme ganz auf deine Arbeitsweise anpassen kannst und keinen unnötigen Features und Elemente beinhaltet, die erst gelöscht werden müssten, falls sie nicht benötigt werden.

Eine hilfrieche Inspirationen und Tipps zum Thema Starter Theme kannst du auch noch auf dem Themeshaper-Blog im Artikel “What Do You Really Need in a WordPress Starter Theme?” finden.

Deine Erfahrungen und Tipps

Welche Blank/Starker Themes sind deiner Erfahrung nach bei der WordPress-Theme Entwicklung besonders hilfreich und können jede Menge Zeit bei der Entwicklung sparen? Und worauf sollte man bei der Auswahl eines Blank-Themes für das nächste Projekt achten? Über dein Feedback und deine Tipps freue ich mich sehr!

38 Kommentare

  1. Ich mag Blank-Themes nicht, die komplett auf CSS verzichten. Ich finde, die ganzen WordPress-eigenen Styles, die auf jeden Fall drin sein müssen (die Image-Klassen, blockquotes, grundsätzliche Typographie-Klassen) sollten da sein, vor allem auch, damit man selbst an alles denkt und nicht erst später merkt, dass man die Klasse für linksbündige Bilder oder sowas vergessen hat. Ein Reset gehört auch rein.

    Da jeder seinen eigenen Stil hat, finde ich Blank Themes oft schwierig. Man muss wirklich überlegen, ob es nicht einfacher und schneller geht, wenn man sich selbst ein Theme nimmt und “leer” macht. Persönlich vermisse ich bei WordPress so ein richtiges Starter-Theme. Der Witz an WP ist ja gerade, dass es so leicht angepasst werden kann, die Themes, die mittlerweile dabei sind (twentyeleven) eignen sich da nur bedingt und sind teilweise viel zu komplex und umfangreich. Ich würde mich über ein standardisiertes Blank-Theme von WordPress selbst freuen.

    Zuletzt habe ich mir fix was mit Starkes für mein Privatblog zusammengebastelt, ideal fand ich das auch nicht. Der Stil ist schon sehr eigen, die Kommentare sind z.B. in die functions.php ausgelagert, das ginge auch alles ein bisschen schöner und simpler.

    • Hi David. So ganz verzichten diese Blank-Themes ja nicht auf CSS. Die kümmern sich halt in erster Linie ums Grid und dafür ist jede Menge CSS vorhanden. Du kannst das dann relativ gefahrlos mit deinem eigenen CSS für Type, Images etc. kombinieren oder die Styles dafür aus einem anderen existierenden Theme übernehmen. Ich habe das gerade mit Foundation ausprobiert, das ich mit dem kompletten Twentyeleven-Stylesheet kombiniert habe. Das funktioniert auf den ersten Blick selbst mit diesem doch recht komplexen CSS problemlos – ich teste da noch. Klar muss man dann noch durchgehen und redundanten/nicht benötigten Kram bereinigen. Aber diese Arbeit machst du dir einmal und danach hast du “dein” Start-Theme.

      Für problematischer halte ich die mangelhafte Internationalisierung vieler dieser Blank-Themes, so auch Foundation – ich beziehe mich da auf die WordPress-Variante. Da ist Arbeit erforderlich, für sein bevorzugtes Blank-Theme aber letztendlich auch nur einmal.

      CU, Dirk

  2. Welche Arbeitsweise empfehlt ihr bei der Entwicklung eines eigenen Themes? Starter Theme direkt anpassen bzw. weiter entwickeln oder zunächst ein Child-Theme erstellen und die Änderungen erst bei Fertigstellung in das Parent-Theme überführen?

    • @Matthias,

      bei einem ganz eigenen Themedesign würde ich persönlich auf jeden Fall mit einem Starter Theme arbeiten. Zum Lernen kann es aber auch sehr hilfreich sein fertigen Theme, z.B. mit dem TwentyEleven zu arbeiten. Dieses ist sehr schön im Code dokumentiert und so kann man einiges lernen.

      Viele Grüße,
      Ellen

    • @Lars: Das ist ein toller, weiterer Tipp, zumal das Theme noch ganz neu und daher sehr aktuell ist. Die Dokumentation schein auch sehr umfangreich, ich werde es auf jeden Fall ausprobieren und auch noch in den Artikel einbinden.

      Viele Grüße,
      Ellen

  3. Der Artikel hat gerade mein Leben gerettet! Ich versuch seit zwei Wochen gute Blank Themes zu finden, weil eine Freundin zu WordPress wechseln möchte und gerne ein eigenes responsives Theme hätte.

    Schau ich mir nachher gleich mal Alles an!

    Liebe Grüße!

  4. Jan

    Blank Themes haben mir bisher überhaupt nichts gebracht. Ich benutze WP “nur” als CMS und da benötige ich den meisten Stuff (Comments, Blogroll, Archiv etc.) nicht. Und bis man die Blank Themes verstanden und bereinigt hat, ist das eigene Theme schon fertig umgesetzt.

    Aber für klassischen Blogs sind Blank-Themes bestimmt ganz OK.

    • Hallo Jan. Ich glaube, du verwechselst da was. Gerade die Blank-Themes enthalten diesen “Stuff” ja eben nicht. Die sind weitgehend leer, was diese Dinge betrifft. Daher ja auch der name “Blank”. Was du meinst sind sicher fertige Themes der Art Twentyeleven.

  5. Ich hab mir auch, genau wie du schreibst, über die Jahre meinen eigenen Blank-Theme gebastelt. Dieser besteht aus so wenig Dateien wie möglich (zB keine eigenen search oder archive .phps, wegen einfacherer Wartbarkeit und Übersichtlichkeit), beinhaltet aber einige nette Funktionen wie FlexSlider oder einer eigenen Header-Bilder-Funktion und natürlich netten HTML5-Code, mehrere Templates und eine Menge vorgefertigter CSS-Styles. Damit kann ich in enorm kurzer Zeit eine professionelle Website auf die Beine stellen, die trotzdem state of the art ist, aus sauberen Code besteht und eine Menge Funktionalität mitbringt. Dabei hab ich aber auf eine Menge toller Projekte da draußen zugegriffen, wie eben FlexSlider oder für CSS zB Foundation oder HTML5 Boilerplate.

    Die meisten Blank-Themes, genau wie CSS-Frameworks, beinhaltet meiner Meinung nach einfach zu viel. Dinge, die nicht benötigt werden dann extra rauszunehmen kann kann oft sehr mühsam werden. Aber ich denke man kann sich trotzdem sehr viel Wissen oder zumindest inspiration holen.

    Auf jeden Fall Danke für einen weiteren super-hilfreichen Artikel! _s wird auch gleich mal genauer begutachtet ;)

  6. Tolle Zusammenfassung! :-)

    Ich werde mir Bones und BootstrapWP mal anschauen. Letzteres gerade wegen den jQuery-Plugins. Ich denke die sind wichtig. Auch wenn man es nicht immer braucht, spart es viel Arbeit, wenn es dann mal benötigt wird :-)

  7. Özkan

    Ich arbeite aktuell an einem Projekt und verwende das Roots Theme. Es ist eine Firmenwebseite und kein Blog. Ich finde dafür eignet es sich sehr gut. In Bootstrap ist ja auch ein Slider dabei welcher auch als Responsive Slider einsetzbar ist. Inklusive Captions. Auch die Responsive Klapp-Navigation finde ich Klasse. Ich habe in dem Projekt auch noch das Icon Font Awesome verwendet. Und das 12er Grid System im Theme ist auch praktisch. BootstrapWP kannte ich noch nicht.

  8. @alle: Vielen herzlichen Dank für euer Feedback und die vielen hilfreichen Erfahrungswerte und weitere Tipps. Es scheint meiner Ansicht nach wirklich wichtig zu sein, vor Projektbeginn zu recherchieren, ob im Theme (z.B. für eine Kundenseite) responsive Slider, Tab-Menüs o.ä. benötigt werden. Dann sind die umfangreicheren Blank-Themes mit Bootstrap bzw. Foundation auf jeden Fall sehr gut geeignet.

    Bei minimalistischeren Themedesigns und wenn man vor allem die Blog-Funktion von WP nutzen möchte, ist man wohl mit einem einfachen StarterTheme wie Toolbox oder dem _s Theme auf dem richtigen Weg.

    Wer oft mit WordPress-Themes an ähnlichen Projekten arbeitet, scheint wiederum mit einem eigenen Starter Theme (oder einem Mix aus verschiedenen Starter Theme-Elementen) gut aufgehoben.

  9. Ich habe es einmal mit Bones versucht und bin positiv überrascht. Ich nutze seit geraumer Zeit ein Theme, dass auf EmptyCanvas aufbaut aber nach 2 Jahren Arbeit nichts mehr damit zu tun hat. Daher war ich froh über ein paar Vorschläge, von außen, da man so sehen kann, wie andere ihren Workflow beginnen. Danke!

  10. Derzeit arbeite ich gerne mit ‘Roots’ das es recht flott auch aktualisiert wird, wenn zb neue Features/Versionen von Bootstrap oder H5BP und beide nutzen auch als Reset.css ->normalizer genutzt wird!
    Die anderen werde ich mir auch mal anschauen, da ich derzeit selbst an meinem Portfolio arbeite

    lg

  11. Pingback: 5 responsive Blank-Themes für WordPress » t3n News

  12. Hallo Ellen,

    derzeit beschäftige ich mich sehr intensiv mit der Erstellung von Themen, fixed derzeit, aber responsive wird auch bald kommen… bei uns gibt es interessante Diskussionen über die Art der Erstellung von Themen. Manche coden komplett hart (was vor allem auch Menüstrukturen angeht) andere widerum bauen nach wordpress Normen.
    Gibt es eigentlich eine Übersicht, welche Bedingungen ein Theme erfüllen sollte, um “wordpress-konform” zu sein?

    Vielen Dank,
    Andreas

  13. Hallo Ellen,

    dies ist wieder einmal ein sehr guter und Hilfreicher Artikel, danke dafür. Ich erarbeite mir eben mit dem free Base WP-Theme und Bootstrape ein eigenes Theme und bin total begeistert. Leider sind meine Kentnisse im css noch nicht so ausgereift das ich keine Fehler mehr mache und habe nun beim Aufrufen der Webseite auf dem Handy einen Weißen balken neben des textes wodurch sich nach links und rechts scrollen lässt. Ich finde den Fehler den ich gemacht haben muss nicht und wollte daher fragen ob es die möglichkeit gibt das Design mit Firefox so anzeigen zu lassen wie auf dem Handy und dann mit Firebug zu testen wo das problem liegt?

    Vielen Dank,
    Sebastian

  14. Sunshine

    Ooops, one last thing! Sorry, it’s 3:30 am in Los Angeles and I want to post as many questions as possible so that when I wake up, if they’ve been answered, I can get to work on the recommended modifications.

    How can I show the author of a post? This is currently not available as a default.

    Thanks for your patience.

  15. Pingback: Neues Theme – Neues Glück 2012 « STE7130

  16. Erwin

    ich kann BONES wärmstens empfehlen! es ist modern (HTML5, CSS3, modernizr, responsive design), gut dokumentiert und bietet durch die LESS integration eine super basis für’s wordpress theme dev. es enthält auch vorlagen für custom content types und -taxonomies und ist von haus aus responsive. nur das grid system finde ich suboptimal..

    das _s theme fand ich anfangs leichter zu durchschauen, durch die verwendung der template parts ist es sehr übersichtlich und ist super zum lernen!

    mit dem ROOTS theme konnte ich anfangs weniger anfangen, weil mit den url rewrite rules schnell ein sauhaufen entsteht (zumindest war das bei mir so 8).

    letztendlich finde ich eine kombination aus BONES und _s mit den wichtigsten plugins (fitvids, ios-js, smooth scroll etc.) eine sehr gute und flexible ausgangsbasis.

    TOOLBOX bietet meiner meinung nach den besten einstieg in die wordpress welt..

  17. Max

    Wie sieht das denn aus, wenn man mit einem solchen Blank-Theme ein eigenes Theme entwickelt und dieses dann wie ihr es macht zum Verkauf anbieten möchte? Ist das bei solchen GPL-lizensierten Blank-Themes überhaupt erlaubt?

  18. Sven

    Hallo Ellen,

    ich habe mich nun einige Zeit damit auseinandergesetzt eigene Templates auf CMS Systeme zu entwerfen und umzusetzen. Zuvor habe ich rein mit PHP Seiten gearbeitet sowohl mit Statischen und Dynamischen Seiten.
    Ich habe mir zuerst das Tutorial das ich sehr hilfreich finde von dir angeschaut und ein eigenes Themes für WordPress umgesetzt.
    Ich muss aber sagen das man mit dem Blank Theme das Lars vorgestellt hat sehr gut und schnell Arbeiten kann.
    Danke an euch beide!

  19. Hallo Ellen,
    erst einmal vielen Dank für diesen tollen Beitrag, in den ich seit langer Zeit immer mal wieder reinschaue, wenn ich ein Blank Theme suche oder testen möchte. Da ich seit einiger Zeit besonders gern mit Bootstrap arbeite, hatte ich speziell in diesem Bereich mit den Blank Themes experimentiert. Seit Bootstrap 3 erhältlich ist, habe ich leider kein passendes Blank Theme mehr gefunden und habe nun selbst eins erstellt. Es ist recht einfach und steht noch ganz am Anfang, aber ich kann viele DInge damit schnell umsetzen und denke, dass es vielleicht den einen oder anderen deiner Leser auch bei seiner Arbeit hilft: http://www.besserdich.com/wordpress/twitter-bootstrap-3-blank-theme-fuer-wordpress/

    viele grüße,
    Nina

Schreibe eine Antwort