Das eigene WordPress-Theme erstellen – #3: Die header.php und der Kopf eures Themes

In dieser Serie geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Im dritten Teil geht es um die header.php, die das head-Element sowie den Header des Themes ausliefert.

In der header.php sind die Angaben zu finden, die auf jeder Seite der Website benötigt werden. Das ist natürlich zuallererst der Doctype, gefolgt vom öffnenden html-Tag sowie dem head-Element mit Meta-Tags, Skripten und Stylesheets. Auch der sichtbare Header findet hier seinen Platz.

Wir legen also erst mal in unserem Theme-Ordner auf oberster Ebene die Datei header.php an. Ich zeige euch gleich einmal die komplette header.php. Anschließend werde ich sie in kleinere Teile zerlegen und erklären.

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <?php if ( is_singular() && pings_open() ) { ?>
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php }
    wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header id="header" class="clearfix" role="banner">
    <div>
        <h1 class="site-title">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php if ( get_header_image() ) { ?>
                    <img src="<?php echo esc_url( get_header_image() ); ?>" alt="<?php echo esc_html( get_bloginfo( 'title' ) ); ?>" />
                <?php } else {
                    bloginfo( 'title' );
                } ?>
            </a>
        </h1>
        <?php if ( get_bloginfo( 'description' ) != '' ) { ?>
            <h2 class="blog-description">
                <?php bloginfo( 'description' ); ?>
            </h2>
        <?php } ?>
    </div>
    <button class="menu-button show-menu">≡</button>
    <nav role="navigation">
        <button class="hide-menu menu-button">×</button>
            <?php wp_nav_menu( array(
                'theme_location' => 'header-menu',
                'container' => '',
                'fallback_cb' => false
            ) ); ?>
        <button class="hide-menu menu-button">×</button>
    </nav>
</header>
<div id="wrapper" class="clearfix">

Unverzichtbare Bestandteile für ein valides und funktionierendes WordPress-Theme

Widmen wir uns zuerst dem Teil, der in keinem WordPress-Theme und auch keiner anderen Seite fehlen sollte: Doctype, html- und head-Element.

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <?php if ( is_singular() && pings_open() ) { ?>
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php }
    wp_head(); ?>
</head>
<body <?php body_class(); ?>>

Doctype und Meta-Tags

Wir beginnen mit dem Einfügen des HTML5-Doctype. Dem html-Tag geben wir mit der language_attributes()-Funktion das gefüllte lang-Attribut mit. Wenn ihr eure WordPress-Seite auf Deutsch eingestellt habt, sieht die Ausgabe so aus: lang="de-DE". Die no-js-Klasse brauchen wir für ein paar CSS-Fallback-Angaben, wenn JavaScript nicht aktiviert sein sollte.

Innerhalb des head-Elements wird die Zeichenkodierung durch die bloginfo()-Funktion ausgegeben, der als Parameter charset übergeben wird. Für responsive Webdesign unerlässlich ist natürlich der viewport-Meta-Tag.

Pingbacks ermöglichen und `wp_head()` nicht vergessen

Um Pingbacks möglich zu machen, muss ein link-Tag integriert werden. Das möchten wir aber nur laden, wenn eine Einzelseite aufgerufen ist und Pingbacks im Backend auch aktiviert sind. Wir prüfen also mit is_singular() && pings_open(), ob diese beiden Bedingungen gegeben sind. Wenn das der Fall ist, geben wir das link-Tag aus. Das href-Attribut nutzt wieder die bloginfo()-Funktion, diesmal mit dem Parameter pingback_url.

Sehr wichtig ist die Nutzung der wp_head()-Funktion. Darüber bindet WordPress beispielsweise das title-Element, jQuery und den canonical-Tag ein. Außerdem wird er für Styles und Skripte von Plugins genutzt. Die Funktion body_class() im öffnenden body-Tag fügt abhängig von der dargestellten Seite unterschiedliche Klassen ein. Wenn wir uns auf der Startseite befinden, wird beispielsweise unter anderem die home-Klasse eingefügt.

Der sichtbare Header des Themes

Header-Bild oder Titel als Link auf die Startseite

<header id="header" class="clearfix" role="banner">
    <div>
        <h1 class="site-title">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php if ( get_header_image() ) { ?>
                    <img src="<?php echo esc_url( get_header_image() ); ?>" alt="<?php echo esc_html( get_bloginfo( 'title' ) ); ?>" />
                <?php } else {
                    bloginfo( 'title' );
                } ?>
            </a>
        </h1>
Code-Sprache: JavaScript (javascript)

Wir umschließen den Inhalt des Headers mit einem header-Element. Innerhalb eines div-Elements und einer Überschrift erster Ordnung möchten wir den Titel des Blogs darstellen und auf die Startseite verlinken. Wenn allerdings ein Header-Bild im WordPress-Backend festgelegt ist, soll das statt des Titels angezeigt werden. Für die Verlinkung auf die Startseite nutzen wir die home_url()-Funktion und escapen diese zur Sicherheit mittels esc_url().

Hier ein kleiner Hinweis zu den Escape-Funktionen mit esc_-Präfix: Während des Theme-Reviews bei WordPress.org wurde ich darauf hingewiesen, dass ich diese Funktionen an einigen Stellen vergessen hatte. Euch wird diese Funktionen also noch an einigen Stellen begegnen. Nun prüfen wir, ob die get_header_image()-Funktion etwas zurückgibt. Wenn dem so ist, wurde ein Header-Bild festgelegt.

<img src="<?php echo esc_url( get_header_image() ); ?>" alt="<?php echo esc_html( get_bloginfo( 'title' ) ); ?>" />
Code-Sprache: HTML, XML (xml)

Die URL des Header-Bildes liefert uns einfach die get_header_image()-Funktion. Wir nutzen hierfür wieder die Escape-Funktion esc_url(). Als Alternativtext geben wir den Titel des Blogs aus, den wir uns wieder mit der get_bloginfo()-Funktion ausgeben lassen können. Hier nutzen wir die Escape-Funktion esc_html(). Wenn kein Header-Bild festgelegt wurde, wird einfach der Titel der Website ausgegeben.

Die Beschreibung der Website

    <?php if ( get_bloginfo( 'description' ) != '' ) { ?>
        <h2 class="blog-description">
            <?php bloginfo( 'description' ); ?>
        </h2>
    <?php } ?>
</div>
Code-Sprache: HTML, XML (xml)

Wenn eine Beschreibung für die Website festgelegt wurde, wollen wir diese in Form einer h2-Überschrift ausgeben. Wir prüfen mit get_bloginfo( 'description' ) != '', ob die Beschreibung nicht leer ist. Wenn etwas eingetragen wurde, dann geben wir die Überschrift aus und als Inhalt – wiederum mit der bloginfo()-Funktion – die Beschreibung.

Wichtig für einen guten Benutzerfluss: Das Menü

    <button class="menu-button show-menu">≡</button>
    <nav role="navigation">
        <button class="hide-menu menu-button">×</button>
            <?php wp_nav_menu( array(
                'theme_location' => 'header-menu',
                'container' => '',
                'fallback_cb' => '__return_false'
            ) ); ?>
        <button class="hide-menu menu-button">×</button>
    </nav>
</header>
<div id="wrapper" class="clearfix">
Code-Sprache: HTML, XML (xml)

Um ein Menü auszugeben, braucht es nicht sehr viel. Für kleine Viewports erstellen wir zuerst einen Button mit dem altbekannten ≡-Symbol. Innerhalb des nav-Elements kommt zuerst und am Schluss jeweils ein weiterer Button, der das aufgeklappte Menü auf kleineren Viewports wieder schließt.

Dazwischen wird es interessant: Um ein WordPress-Menü anzuzeigen, gibt es die wp_nav_menu()-Funktion, der alle möglichen Parameter übergeben werden können. Mit dem Parameter theme_location bestimmen wir, welche Menüposition wir anzeigen wollen. Den Namen dieser Menüposition, die ihr im Backend bei der Menüverwaltung auswählen könnt, legen wir in einem späteren Teil in der functions.php fest.

Normalerweise wird die Menüliste von einem div-Element umschlossen. Das brauchen wir nicht, weshalb wir einen leeren Wert für den container-Parameter übergeben. Einen Fallback dafür, dass dieser Position kein Menü zugeordnet ist, möchten wir nicht. Standardmäßig würden die wp_page_menu()-Funktion genutzt werden, die eine Linkliste der WordPress-Seiten ausgibt. Wir schließen danach noch unser header-Element und öffnen einen Wrapper.

Der Code zu Teil 3 auf GitHub

Den Code zu dem Theme gibt es auf GitHub. Ihr findet den aktuellen Stand des Themes nach diesem Teil im Tag „v0.2“.

Die weiteren Teile meiner WordPress-Reihe:

Dieser Beitrag ist eine Übernahme meines Beitrags für t3n.de.