Starkers HTML5: Das beliebte WordPress Blank-Theme in HTML5 Version

Ein Blank-Theme ist ein leeres Theme, und bietet meiner Ansicht nach eine perfekte Ausgangsbasis bei der Entwicklung eines eigenen WordPress-Themes. Für die meisten WordPress-Seiten haben wir bisher das Starkers-Theme von Elliot Jay Stock als Theme-Vorlage für eigene Projekte verwendet. Das Starkers-Theme ist WordPress 3.0 kompatibel und auf dem aktuellen Standard-Theme TwentyTen von WordPress aufgebaut. Falls du dein neues Theme mit HTML5 umsetzen möchtest, bietet das von Nathan Staines auf HTML5 optimierte Starkers HTML5 eine tolle Grundlage.

1. Was bietet das Starkers HTML5?

Ich habe mir das Starkers HTML5 einmal genauer angeschaut, und die HTML5-optimierte Version mit dem originalen Starkers Blank-Theme verglichen.

1.1. Die HTML5 Tags

Das Starkers HTML5 ersetzt viel der bisher verwendeten div und span Tags durch HTML5-Elemente, wie <header>, <nav>, <article>, <section>, <aside> und <footer>. Am besten du schaust dir die neuen Elemente direkt im Theme an (z.B. indem du das Starkers HTML5-Theme einmal auf einer lokalen WordPress-Installation ausprobierst).

Starkers HTML5 WordPress Blank-Theme
Der Source-Code des Starkers HTML5 Themes.

Mit Hilfe praktischer Online-Übersichten aller HTML5-Elemente kannst du dann mehr über die dir noch unbekannten Tags erfahren.

Eine sehr schöne Übersicht von HTML5 Tags inklusive Erklärungen findest du z.B. auf der Webseite Periodic Table of Elements.

Starkers HTML5 WordPress Blank-Theme

Weitere, ausführliche Infos zu allen HTML5-Elementen kannst du auch im W3C HTML5 Editors Draft nachlesen.

1.2. WordPress-Funktionen von Starkers HTML5

Die meisten Theme-Funktionen des TwentyTen-Themes sind auch im Starkers HTML5 bereits vorhanden. Um auch eine individuelle Kopfzeile und einen eigenen Hintergrund zu nutzen, musst du allerdings noch extra Code einfügen.

Widgets und Menüs

Wie auch beim Starkers-Theme von Elliot Jay Stock, sind in der HTML5 Version bereits 2 Sidebar-Widgets, sowie 4 Footer Widgets vorbereitet. Die individuelle Menü-Funktion (seit WP 3.0) ist ebenfalls integriert.

Individuelle Kopfzeile und Hintergrund

Um die TwentyTen-Funktion Custom Header (individuelle Kopfzeile) und Custom Background (individueller Hintergrund) zu nutzen, musst du allerdings noch folgenden Code in die functions.php Datei von Starkers HTML5 einfügen.

Für die Option einer individuellen Kopfzeile benötigst du folgenden Code:

	// Your changeable header business starts here
	define( 'HEADER_TEXTCOLOR', '' );
	// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
	define( 'HEADER_IMAGE', '%s/images/headers/path.jpg' );

	// The height and width of your custom header. You can hook into the theme's own filters to change these values.
	// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

	// We'll be using post thumbnails for custom header images on posts and pages.
	// We want them to be 940 pixels wide by 198 pixels tall.
	// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
	set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );

	// Don't support text inside the header image.
	define( 'NO_HEADER_TEXT', true );

	// Add a way for the custom header to be styled in the admin panel that controls
	// custom headers. See twentyten_admin_header_style(), below.
	add_custom_image_header( '', 'twentyten_admin_header_style' );

	// ... and thus ends the changeable header business.

Für den individuellen Hintergrund kannst du folgenden Code einfügen:

	// This theme allows users to set a custom background
	add_custom_background();

(Der Code ist der Original-Code des TwentyTen-Themes. Er wird auch in der originalen Starkers Theme-Version verwendet.)

Starkers HTML5 WordPress Blank-Theme
Wenn du die Code-Schnipsel in der functions.php Datei eingefügt hast, kannst du die praktischen Hintergrund- und Kopfzeile Funktionen nutzen.

2. Unterstützung älterer Browser

Nathan Staines nutzt in der aktuellen Starkers HTML5 Version die JavaScript-Bibliothek Modernizr (Version 1.6), um die modernen HTML5 (und CSS3) Elemente zu unterstützen. Du findest die .js-Datei von Modernizr im Ordner js des Starkers Theme-Ordners.

Starkers HTML5 WordPress Blank-Theme

Auf der Webseite kannst du dich über alle Features von Modernizr genau informieren. Praktisch ist auch, dass durch die Integration von Modernizr auch gleich CSS3 Eigenschaften, die du eventuell später in deinem Theme nutzen möchtest, Browser-kompatibel unterstützt werden.

3. Jede Menge Lesestoff zum Thema HTML5

Suchst du nach weiterem Lesestoff über HTML5? Dann schau doch einmal folgende Webseiten, Artikel und Bücher an. Hier findest du jede Menge nützliche Informationen.

Wie gefällt dir die HTML5-Variante des Starker-Themes? Hast du bereits eigene Erfahrungen mit dem Blank-Theme machen können, oder kennst du weitere Theme-Frameworks oder Blank-Themes, die bereits auf HTML5 setzen?

Über dein Feedback und weitere Tipps freue ich mich sehr!

15 Kommentare

  1. Spitzenmässig! Vielen Dank. Somit steh mir nichts mehr im Wege, um mein eigenes WP Projekt mit diesem HTML5 Template zu starten.. ;-)

    • Hallo Lemi,

      vielen Dank für dein Feedback. Freut mich, dass du den Starkers HTML5 Tipp nützlich findest. Mir gefällt das Blank-Theme auch wirklich gut :-)

      Viele Grüße,
      Ellen

  2. vielen Dank für diesen Artikel.

    Bis dato habe ich das Thema HTML5 immer ignoriert. Bin jetzt aber, durch diese tolle Übersicht, motiviert genug um mich damit auseinander zu setzen.
    Und den Tipp sich das Starker-Theme zu installieren, um es sich genauer anzuschauen, wird der erste Schritt in Richtung HTML5 sein. DANKE!

    • Hallo Marjeta,

      freut mich, dass dir der Artikel weiter hilft. Ich denke auch, dass das Starkers HTML5 eine super praktische Ausgangsbasis bietet, um mit den HTML5 Tags vertrauter zu werden :-)

      Viele Grüße,
      Ellen

  3. Habe mich noch nie so recht an Blank Themes heran getraut, hatte immer Angst da könnten dann Funktionen wie threaded-comments fehlen und ich wäre zu blöd sie dann einzubauen :D

    Beim nächsten Projekt werde ich dieses dann aber bestimmt mal ausprobieren.

    • Hallo Salim,

      vielen Dank für deinen Kommentar. Keine Sorge, zumindest das Blank-Theme von Starkers bzw. Starkers HTML5 ist super vorbereitet, und du kannst alle aktuellen WordPress-Optionen nutzen.

      Einige Extra-Features, z.B. den Code für Thumbnails (Vorschaubilder) kannst du dann noch selbst integrieren :-)

      Viel Spaß beim Ausprobieren und viele Grüße,
      Ellen

  4. Das Starkers Theme (damals allerdings noch in der alten Variante) war der Grund dafür, dass ich mich überhaupt mit Theme Erstellung beschäftigt habe. Mich hat es zuvor immer abgeschreckt den ganzen Code von 0 an schreiben zu müssen ohne davon groß Ahnung zu haben. Mit dem Leer-Theme konnte ich mich aber ganz auf das Designen und Stylen mit CSS konzentrieren und schnell anschauliche Ergebnisse bekommen. Sowas motiviert ungemein und ich befasse mich seit dem immer intensiver damit, einfach weil es Spaß macht.
    Das Starkers Theme ist mit Abstand das beste Leer-Theme was es im Netz für WordPress gibt.

  5. Leider lässt sich der obige Code für das Kopfzeilenbild nicht einfach übernehemen. Anschließend erscheint diese Fehlermeldung in dem Menüpunkt: Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‚twentyten_admin_header_style‘ was given in /www/htdocs/xxx/xxx/wp-includes/plugin.php on line 395 :(

    • genau wie bei Peter bekam ich die gleiche Fehlermeldung im Admin Menu Kopfzeile:
      Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‚twentyten_admin_header_style‘ not found or invalid function name in …. on line 405

      Es fehlte folgendes in der functions.php

      if ( ! function_exists( ‚twentyten_admin_header_style‘ ) ) :
      /**
      * Styles the header image displayed on the Appearance > Header admin panel.
      *
      * Referenced via add_custom_image_header() in twentyten_setup().
      *
      * @since Twenty Ten 1.0
      */
      function twentyten_admin_header_style() {
      ?>

      /* Shows the same border as on front end */
      #headimg {
      border-bottom: 1px solid #000;
      border-top: 4px solid #000;
      }
      /* If NO_HEADER_TEXT is false, you would style the text with these selectors:
      #headimg #name { }
      #headimg #desc { }
      */

      <?php
      }
      endif;

      …dann gibts auch keine Fehlermeldungen mehr.

  6. Bei mir steht in nächster Zeit ein privates Projekt an, welches ich gerne mit HTML5 und CSS3 umsetzen würde, deswegen kam der Beitrag genau zur rechten Zeit :-) Vor allem die JavaScript-Bibliothek hört sich echt klasse an.

  7. Danke für deinen tollen, informativen Artikel.

    Für unsere Projekte habe ich bisher immer direkt auf TwentyTen aufgesetzt. Beim nächsten Projekt werde ich das neue HTML5 Starkers Theme ausprobieren. Bin schon sehr gespannt.

    • Hallo Christian,

      vielen Dank für dein Feedback. Ja, Starkers ist meiner Ansicht nach wirklich sehr hilfreich bei der Theme-Entwicklung. Und da beide Varianten auf dem TwentyTen Theme aufbauen, sind auch alle aktuellen Theme-Features integriert.

      Viel Spaß beim Ausprobieren und viele Grüße,
      Ellen

      • Hi Ellen
        Super Artikel!
        Frage: beim Twentyten Theme ist es ja so, dass man ein Child-Theme benötigt, wenn man im Design Änderungen vornehmen möchte (damit diese Änderungen beim Update von WP nicht wieder zurückgesetzt werden). Weisst du wie das beim Starkers ist, muss man auch hier den Codex einhalten?
        Danke für deine Antwort.
        Grüsse aus der Schweiz
        Mitch

  8. Hallo Ellen,

    ich habe eine Frage zum Starkers-Theme. Ich habe es bei mir lokal innerhalb eines WordPress installiert und bin wirklich sehr begeistert, was man damit allerhand anstellen kann. Allerdings stosse ich beim Formatieren der Kommentare (inkl. Kommentarformular) ein wenig an meine Grenzen:

    Da das Starkers-Theme ja per Standard keine Klassen, etc. mitgibt, weiss ich nicht, welche ich wie per CSS ansprechen soll. Hast du mir einen Tipp? Oder gibt es generell eine Möglichkeit diesen Bereich schön zu formatieren?

    Und dann noch eine kleine Frage: Mir begegnet innerhalb des Themes oftmals der Template-Name. Kann ich den bedenkenlos ändern?

    Lieber Gruss aus der Schweiz,

    Abi

Hinterlasse eine Antwort

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