Du würdest gerne ein WordPress Theme individualisieren, weißt aber nicht wo Du anfangen sollst? Ich werde Dir in diesem Artikel zeigen, warum es wichtig ist ein Child Theme zu erstellen und worauf es bei der Erstellung ankommt. In nur vier Schritten kannst Du mit Deinem eigenen WordPress Child Theme starten.
Was ist der Unterschied zwischen einem WordPress Child Theme und einem WordPress Theme
Du fragst Dich bestimmt, wo der Unterschied zwischen einem Child Theme und einem Theme liegt. Ganz einfach! Ein Child Theme übernimmt, oder „erbt“ alle Dateien, Eigenschaften und Funktionen seines übergeordneten Themes, ohne das diese im Child Theme erstellt werden müssen. Ist eine Datei hingegen im Child Theme vorhanden, überschreibt diese Ihre Vorlage im übergeortneten Theme. Somit kannst Du ganz einfach einzelne Komponenten des übergeortneten Themes austauschen und an Deine Bedürfnisse anpassen.
4 Gründe, weshalb es besser ist ein WordPress Child Theme anzulegen
Warum nicht einfach die Dateien im Theme austauschen?
- Du hast Änderungen in dem aktuellen Theme vorgenommen und es erscheint nach einer Weile ein Sicherheitsupdate für das modifizierte Theme vom Hersteller.
Bei einer Aktualliserung des Themes würden alle deine Änderungen verloren gehen. - Du hast eine bessere Übersicht über Deine durchgeführten Anpassungen, da Du lediglich diese im Child Theme hinterlegen musst. Dadurch wird das Theme Verzeichnis gleichzeitig schlanker.
- Bei einem sauber entwickelten, übergeordneten Theme, kann auch der PHP-Code des Child Themes stark reduziert werden. Wenn das übergeordneten Theme genügend Actions (WordPress Actions) bereitstellt, reicht es sich auf diese zu registrieren und seinen eigenen Code einzufügen. Dies steigert gleichzeitig die Lesbarkeit und die Wartbarkeit des PHP-Code.
- Solltest Du mehrere WordPress-Seiten erstellen, die alle die selbe Grundlage haben, dann kannst Du Dein „Grund-Theme“ überall einbauen und dieses mit einem Child Theme anpassen. Solltest Du dein „Grund-Theme“ zu einem späteren Zeitpunkt um Funktionen erweitern, oder Fehler darin beheben, so kannst Du es einfach überall austauschen. Du musst deine Änderungen also nicht an allen Projekten durchführen, sondern nur ein einem.
In 4 Schritten zum WordPress Child Theme
Du legst nun in wenigen Schritten Dein eigenes Child Theme an und ich gebe Dir noch einige Tipps mit auf den Weg, damit Dein Child Theme hinterher sauber gestaltet und gut strukturiert ist.
Schritt 1 – Die Grundkomponenten
Das Child Theme besteht im Grunde aus drei simplen Komponenten:
- Der Theme Ordner
- Die Datei „style.css“
- Die Datei „functions.php“
Zunächst erstellst Du einen Ordner mit dem Name des übergeordneten Themes und dem Anhang „-child“ → „example-theme-child“. Dieser Anhang ist nicht notwendig für die Funktionsfähigkeit des Child Themes, er dient lediglich dazu, dass Du die Ordner besser auseinander halten kannst. Dieser Ordner muss nachher in dem Theme Verzeichnis deiner WordPress installation abgelegt werden (wp-content/themes).
Danach legst Du eine CSS-Datei mit dem Namen „style.css“ im Child Theme Basisverzeichnis an und fügst den folgenden Inhalt ein:
/* Theme Name: Example-Theme-Child Theme URI: http://example.com/ Description: Child Theme für das Theme Example-Theme Author: Max Mustermann Author URI: http://example.com Template: example-theme Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Text Domain: example-theme-child */
Die „style.css“ definiert den Ordner als Theme. Einige Theme Konfigurationen sind in der „style.css“ Datei enthalten, die meisten davon sind selbsterklärend. Am wichtigsten ist, dass beim „Template:“ der Verzeichnisname des übergeordneten Themes hinterlegt ist. Selbst wenn das übergeordnete Theme den Name „Example Theme 3000“ haben sollte, wichtig ist, dass der Verzeichnisname „example-theme“ eingetragen wird.
Zu guter Letzt sollte noch die Datei „functions.php“ erstellt werden. Diese bekommt zunächst den folgenden Inhalt:
<?php /** * Author: Max Mustermann * URL: http://example.com * * Child theme functions and definitions * * Set up the theme and provides some helper functions, which are used in the * theme as custom template tags. Others are attached to action and filter * hooks in WordPress to change core functionality. * * @link https://codex.wordpress.org/Theme_Development */
Die „functions.php“ ist eine besondere Datei. Sie überschreibt die „functions.php“ Datei des übergeordneten Themes nicht, sondern sie erweitert diese. Dadurch wird es sehr einfach, eigene PHP Funktionen zu ergänzen. Weiterhin ist es gut zu wissen, dass die „function.php“ des Child Themes vor der „function.php“ des übergeordneten Themes geladen wird.
Schritt 2 – Anpassung des WordPress Child Themes
Nun kannst Du das erstellte Child Theme noch anpassen. Ein erster Schritt wäre es, wenn Du einen eigenen Screenshot hinterlegst. Dazu legst Du einfach ein Bild mit dem Namen „screenshot.png“ im Basisverzeichnis Deines Child Themes ab. Dieses Bild wird nun auf der Theme Übersichtsseite von WordPress zu deinem Child Theme angezeigt.
Weiterhin lohnt es sich, die „functions.php“ Datei weiter zu untergliedern. Dies tust Du, in dem Du im Child Theme Basisverzeichnis den Ordner „libraries“ anlegst. In diesem kannst Du nun einzelne Funktionsblöcke Deines Child Themes sauber anlegen und verwalten. Hier hast Du auch die Möglichkeit Deine eigenen Post Types zu integrieren. Wenn Du Dich für die Erstellung von Custom Post Types interessierst, dann kann ich Dir unseren Artikel zum Thema empfehlen: Einen eigenen Post Type in WordPress anlegen
Lege nun folgende Beispiel-Dateien im Ordner „libraries“ an:
-
„enqueue-scripts.php“
-
„image-sizes.php“
-
„actions.php“
Diese müssen nun in der „functions.php“ integriert werden. Das tust Du mit der PHP Funktion „require_once()“:
require_once( 'libraries/enqueue-scripts.php' ); require_once( 'libraries/image-sizes.php' ); require_once( 'libraries/actions.php' );
enqueue-scripts.php
In der Datei „enqueue-scripts.php“ kannst Du nun Javascript und CSS Dateien für dein Child Theme einhängen und auch aushängen, im Falle, dass Du sie nicht benötigst, oder dass Du sie ersetzen willst. Dazu nutzt Du die WordPress Action „wp_enqueue_scripts“:
<?php
/**
* Dient zum Verwalten des Scripts und Styles des Child Themes
*
* Mehr Informationen zu „enqueue_script“: {@link https://codex.wordpress.org/Function_Reference/wp_enqueue_script}
* Mehr Informationen zu „enqueue_style“: {@link https://codex.wordpress.org/Function_Reference/wp_enqueue_style }
*/
if ( !function_exists( 'manage_child_theme_scripts_and_styles' ) ) {
function manage_child_theme_scripts_and_styles() {
$assets_dir = get_template_directory_uri() . '/assets';
wp_enqueue_style( 'child-theme-main', $assets_dir. '/css/main.css', array(), '1.0.0', 'all' );
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', '//code.jquery.com/jquery-3.2.1.min.js', array(), '3.2.1', false );
wp_enqueue_script( 'example-library', $assets_dir . '/js/example-library.min.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'manage_child_theme_scripts_and_styles' );
}
Dieses PHP-Script ermittelt mit Hilfe der WordPress Funktion „get_template_directory_uri()“ die Theme Verzeichnis Uri. Danach registriert es im zweiten Schritt die im „assets/css/“ enthaltene „main.css“ Datei. Im dritten Schritt wird die veraltete jQuery Bibliothek (Version 1.12.4), die WordPress mitliefert, ausgehangen und eine aktuellere Version per CDN eingehangen. Im letzten Schritt registriert es die im „assets/js/ enthaltene „example-library.min.js“ Javascript Bibliothek mit der Abhängigkeit zu jQuery.
image-sizes.php
Unterschiedliche Bildgrößen für die Mediathek lassen sich in der Datei „image-sizes.php“ hinterlegen:
<?php // Name, Breite, Höhe, Zurechtschneiden add_image_size( 'custom-small', 640, 200, true ); add_image_size( 'custom-medium', 1280, 400, true ); add_image_size( 'custom-large', 1440, 400, true ); add_image_size( 'custom-xlarge', 1920, 400, true );
actions.php
Actions von WordPress oder vom übergeordneten Theme registrierst Du in der „actions.php“:
<?php
function add_font_awesome_to_wp_admin() {
$assets_dir = get_template_directory_uri() . '/assets';
wp_register_style( 'wp_admin_font_awesome_css', $assets_dir . '/css/font-awesome.min.css', false, '1.0.0' );
wp_enqueue_style( 'wp_admin_font_awesome_css' );
}
add_action( 'admin_enqueue_scripts', 'add_font_awesome_to_wp_admin' );
In dem hier dargestellten PHP-Script wird die Icon-Sammlung Font Awesome für das WordPress Backend registriert und eingehangen.
Schritt 3 – Dateien überschreiben
Sollte es nicht möglich sein, Anpassungen am übergeordneten Theme über eine Action durchzuführen, so können die gewünschten Dateien auch überschrieben werden. Es ist aber am sinnvollsten, sich zuvor beim Theme Hersteller zu erkundigen, ob dieser nicht Actions bereitstellt, die man sich registrieren kann um eigene Inhalte gezielt zu positionieren:
function add_custom_special_content() {
echo '<h1>Hallo Welt!</h1>';
}
add_action( 'example_theme_special_area_before_content', 'add_custom_special_content' );
Willst Du bspw. die Blog Archivseite anpassen, so kannst Du im Basisverzeichnis Deines Child Themes die Datei „archive.php“ anlegen und somit die „archive.php“ des übergeordneten Themes vollkommen überschreiben:
<?php
/**
* Template Name: Archive Page Template
*
* Description: Eine eigene Archivseite meines Child Themes
*/
get_header(); ?>
<div class="main-wrap" role="main">
<!-- Beitragssuche -->
<section id="search-area">
<form role="search" method="get" id="searchform">
<div class="input-group">
<input type="text" class="input-group-field" value="" name="s" id="s" placeholder="Suche">
<div class="input-group-button">
<input type="submit" id="searchsubmit" value="Suche" class="button">
</div>
</div>
</form>
</section>
<!-- Darstellung der Beiträge -->
<section id="blog-listing">
<?php if ( have_posts() ) : ?>
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<div class="column">
<?php get_template_part( 'template-parts/content', get_post_format() ); ?>
</div>
<? endwhile; ?>
</div>
<?php endif; ?>
</section>
</div>
<?php get_footer();
Glückwunsch! Nun wird beim Aufruf der Archivseite Deine eigene Seitenvorlage geladen. Was noch fehlt ist die Ausgabe des Inhaltes durch die WordPress Funktion „get_template_part()“. Dazu kommst Du im nächsten Schritt.
Schritt 4 – Eigene „Template Parts“ bereitstellen
Im letzten Schritt integrierst Du noch eigene „Template Parts“, die Du in Deinem Child Theme an mehreren Stellen wiederverwenden kannst. Erstelle zunächst das Verzeichnis „template-parts“ im Basisverzeichnis Deines Child Themes. Darin kannst Du nun das vorhin integrierte PHP-Script „content.php“ erstellen:
<?php
/**
* Das Standard-Template zum Anzeigen eines Posts
*
* Kann bspw. in den Page Templates index/archive/search verwendet werden.
*/
?>
<div class="post-container" id="post-<?php the_ID(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>">
<img src="<?php the_post_thumbnail_url( ); ?>">
</a>
<?php endif; ?>
<div class="post-content-section">
<header>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</header>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
<footer>
<?php $tag = get_the_tags(); if ( $tag ) { ?><p><?php the_tags(); ?></p><?php } ?>
</footer>
</div>
</div>
Typische Fehler beim Erstellen von WordPress Child Themes
Fehler passieren schnell, auch wenn man ein simples Child Theme anlegt. In der folgenden Liste findest Du einige Fehler, die häufiger Vorkommen (und auch mir bereits unterlaufen sind):
Fehler 1)
Dein Child Theme wird auf der Theme Übersichtsseite nicht dargestellt und unter „Beschädigte Themes“ findet sich zu deinem Child Theme die Notiz „Das übergeordnete Theme fehlt. Bitte installiere das übergeordnete Theme „Muster-Theme“, da Du Child-Themes sonst nicht nutzen kannst.“.
Dieser Fehler kann auf zwei Wegen entstehen, entweder das übergeordnete Theme ist tatsächlich nicht im WordPress Theme-Verzeichnis (wp-content/themes) vorhanden, oder Du hast das Verzeichnis des übergeordneten Themes in der „style.css“ falsch geschrieben. Es ist wichtig, dass in der Konfiguration „Template:“ in der Datei „style.css“ das Verzeichnis des übergeorneten Themes angegeben wird und nicht der Name des Themes.
„Template: Example Theme 3000“ → „Template: example-theme“
Fehler 2)
Dein Child Theme wird auf der Theme Übersichtsseite nicht dargestellt und unter „Beschädigte Themes“ findet sich zu deinem Child Theme die Notiz „Es fehlt ein Stylesheet“.
Dieser Fehler kann ebenfalls auf mehreren Wegen entstehen:
- Es fehlt tatsächlich die notwendige Datei „style.css“
- Der Dateiname ist falsch geschrieben, bspw.: „styles.css“
- Die Dateiendung ist nicht „.css“, bspw.: „style.cs“
Fehler 3)
Falls nach der Aktivierung des Child Theme ein „Internal Server Error“ / „HTTP ERROR 500“ auftritt, sind vermutlich Fehler im PHP Code vorhanden. Prüfe also zuerst, ob Du einfache Syntax Fehler begangen hast und schau gegebenenfalls in den Fehler-Log Deines Web-Servers. Es ist immer empfehlenswert, eine IDE (Integrierte Entwicklungsumgebung) wie z.B. Eclipse, PHP Storm, oder Visual Studio, oder einen guten Text-Editor wie z.B. Atom, Sublime, oder Visual Studio Code zu verwenden, da Dich diese auf einfache Syntax Fehler hinweisen.
Davon ausgehend, dass sich keine Programmfehler im PHP Code eingeschlichen, kann es sein, dass Du unbewusst eine Funktion mit dem selben Namen wie im übergeordneten Theme integriert hast. Das kann schnell passieren, wenn es sich um einfache Funktionsnamen handelt:
- „bootstrap“
- „clean_up“ / „cleanup“
- „construct“
- „on_load“
- etc.
Sollte das übergeordnete Theme nicht mit der PHP Funktion „function_exists()“ prüfen, ob es die Funktion bereits gibt, kann es schnell zu Fehlern kommen. Dann hilft es nur, wenn Du die Funktionen in deinem Child Theme testweise umbenennst.
Solltest Du weitere, häufig vorkommende Fehler kennen, oder Fragen und Anregungen zum Artikel hast, zögere nicht uns von diesen in den Kommentaren zu berichten, damit wir unsere Liste erweitern können.
