Kategorien
Themes WordPress

So baust du dein eigenes Child-Theme mit dem neuen TwentyTwenty WordPress-Theme

WordPress übt eine geradezu magnetische Anziehungskraft aus auf Blogger, die die Sache selbst in die Hand nehmen wollen. Du erhältst die totale Kontrolle und es existiert nichts, was du nicht mit einigen Zeilen PHP, CSS oder HTML anpassen könntest. Im Netz schwirren zudem hunderte von kleinen Funktionen zur Erweiterung des CMS herum. Die Welt von WordPress könnte so schön sein, wenn da nicht die Theme-Updates wären. Mit Child-Themes nimmst du ihnen den Schrecken.

Was ist ein Child-Theme und wofür benötige ich es?

Ein Child-Theme ist sozusagen das Kind eines vollwertigen, normalen Themes. Es nutzt die Dateien des Parent (Eltern)-Theme zur Darstellung. Also alle Template-Dateien, das Stylesheet für das Design, die JavaScripte – einfach alles. Daher müssen auch immer beide Themes im Theme-Ordner wp-content/themes vorhanden sein.

Anzeige

Alle Änderungen bleiben auch nach einem Update erhalten

Ein frisch aufgesetztes Child-Theme sieht exakt aus wie dein »richtiges« Theme. Das ist der Ausgangspunkt für jede Personalisierung deines Designs. Denn hier kannst du gefahrlos jedwede Änderung vornehmen, diese bleibt dann auch nach einem Update deines eigentlichen Themes erhalten. Das ist der große Vorteil.

Jedes WordPress Theme, das fähig ist, Updates zu bekommen, sollte heute nur noch mit einem Child-Theme eingesetzt werden. Es geht sehr einfach und die wenigen Fallstricke, die auftreten können, werden wir dir in diesem Beitrag beibringen.

Die Vorbereitung für das Erstellen eines Child-Themes

Zur Erstellung eines Kind-Designs benötigst du ein FTP-Programm und einen HTML-Editor. Beides bekommst du kostenlos. Für die Arbeit mit dem FTP-Programm benötigst du zudem noch die FTP-Zugangsdaten für dein Webhosting. Diese Daten stellt dir dein Hoster zur Verfügung.

  • Ich kann dir das FTP-Programm »FileZilla« ans Herz legen, es ist wirklich gut und für Windows und Mac kostenfrei zu bekommen.
  • Als HTML-Editor empfehle ich dir das Programm »Sublime Text 3«. Es ist kostenlos benutzbar und kann mit vielen Erweiterungen auf deine persönlichen Bedürfnisse angepasst werden.

Child-Themes erstellen und nutzen

Als Beispiel für die Erstellung eines Child-Themes nehme ich das neue Twenty Twenty Standard-Theme von WordPress. Du wirst jetzt lernen, ein Child-Design zu erstellen, ein eigenes Stylesheet für das CSS zu verwenden und Theme-Dateien anzupassen. Die Stolpersteine in der Arbeit mit Child-Layouts werde ich dir ebenfalls nahe bringen.

1 – Ein Basis Child-Theme erstellen und aktivieren

Ein Child-Theme benötigt nur drei Dinge: das Verzeichnis zum Parent-Theme, eine style.css Datei und eine functions.php.

Anzeige

Erstelle zunächst einen Ordner auf deinem Desktop mit dem Namen »twentytwenty-child«. Als Zweites erstelle bitte mit dem HTML-Editor eine leere Datei namens style.css. Füge folgendes in die CSS-Datei ein:

/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Author:       Dein Name
 Author URI:   http://deinedomain.de
 Template:     twentytwenty
 Version:      1.0.0
 Text Domain:  twenty-twenty-child
*/
/* Alle Deine Änderungen fügst Du unterhalb ein */

Mit diesem Header hast du folgende Dinge festgelegt:

  • Den Namen deines Themes
  • Die Beschreibung, dass es ein Child Theme des Twenty Twenty Themes ist
  • Unter Template steht die “Adresse”, die dein Child benötigt, um die Template-Dateien anzeigen zu können. Es ist der Name des Theme-Ordners des Parent-Themes. Erstellst du ein Child-Theme für ein anderes Theme, muss dort natürlich der Ordnername deines Themes hinein. Wenn du also für das beliebte »Hueman« Theme ein Child benötigst, wird dort »hueman« stehen.
  • Unter „Text Domain“ findet dein Child-Theme die Übersetzungs-Dateien, damit dein Theme weiterhin auf Deutsch angezeigt wird.

Lege als Nächstes eine leere Datei Namens functions.php an. In diese Datei muss folgendes zwingend hinein:

<?php
 /* =============================================================================
 Die functions.php fuer Dein Child-Theme
============================================================================= */
/**
 * Diese Funktion ist zwingend notwendig. Sie installiert das CSS des Eltern-Themes
 * Das CSS Deines Child-Themes wird ohne Dein Zutun automatisch installiert.

 */
add_action( 'wp_enqueue_scripts', 'tb_theme_enqueue_styles' );
function tb_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
/* =============================================================================
Ab hier unterhalb kannst Du Deine Aenderungen einfügen
=============================================================================== */

Optional: Erstelle eine Grafik für dein Theme

Jedes Theme besitzt einen Screenshot, damit man es im Dashboard gut von den anderen Themes unterscheiden kann. Alles, was du dafür tun musst, ist eine Grafik mit dem Namen screenshot.png anlegen. Diese Grafik kommt dann in den Ordner des Child-Themes hinein. Dort muss es im Hauptverzeichnis liegen, nicht in einem eigenen Ordner.

Die empfohlene Größe beträgt 880 x 660 Pixel. Angezeigt wird es allerdings in den Maßen 387 x 290 Pixel. Die große Dateigröße gewährleistet jedoch, dass der Screenshot auch auf Retina-Bildschirmen gut dargestellt wird. Du darfst auch andere Bildformate wie JPG oder GIF nehmen, empfohlen wird jedoch PNG. Ich habe für das Child-Theme folgende Grafik erstellt:

Das neue Twenty-Twenty Theme auf drweb.de angewendet.

2 – Child-Theme aktivieren

Lade nun den Ordner twentytwenty-child in das Theme-Verzeichnis (wp-content/themes) deines WordPress hoch und aktiviere dein neues Child-Themes unter “Design => Themes”.

Child- und Parent-Theme nebeneinander.

Nun ist das neue Child-Theme aktiviert. Dank des neuen Screenshots lässt es sich sehr leicht in deinem Theme-Verzeichnis auffinden. Eine Änderung des Designs ist natürlich noch nicht eingetreten, deine Anpassungen müssen noch folgen.

3 – Child-Theme anpassen – CSS

Alle Anpassungen schreibst du nun in das style.css deines Child-Themes hinein. Einige sehr einfache Anpassungen wären vielleicht die Farbe des Hintergrunds, die Farbe, Größe und Schriftart der Überschriften und ähnliches. Mit nur einigen wenigen Zeilen CSS haben wir bereits das Theme komplett anders gestaltet:

/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Author:       Markus Seyfferth
 Author URI:   https://drweb.de
 Template:     twentytwenty
 Version:      1.0.1
 Text Domain:  twenty-twenty-child
*/

/* -------------------------------------------------------------------------- */

/*  1. Document Setup
/* -------------------------------------------------------------------------- */

body {
  background: #fff;
  color: #222;
  font-family: -apple-system,"Helvetica Neue",Helvetica,sans-serif;
  font-size: calc(18px + .1vw);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
}

.site-description {
  display: none;
}

.entry-content h1, .entry-content h2, .entry-content h3 {
  margin: 6rem 0 2rem;
}

p {
  margin: 1em 0 1em;
}

/* Typographie ------------------------------------ */

h1, .heading-size-1, h2.entry-title {
  font-size: calc( 36px + (42 - 32) * (100vw - 320px) / (800 - 320) );
}

h2, .heading-size-2 {
  font-size: calc( 30px + (32 - 28) * (100vw - 320px) / (800 - 320) );
}

h3, .heading-size-3 {
  font-size: calc( 24px + (28 - 24) * (100vw - 320px) / (800 - 320) );
}

h4, .heading-size-4,
.singular .intro-text {
  font-size: calc( 20px + (20 - 18) * (100vw - 320px) / (800 - 320) );
}

.widget_text p,
.widget_text ol,
.widget_text ul,
.widget_text dl,
.widget_text dt,
.entry-content p,
.entry-content li,
.entry-content ol,
.entry-content ul,
.entry-content dl,
.entry-content dt,
.entry-content,
p .opener {
  font-family: -apple-system,sans-serif;
  font-size: calc(18px + .1vw);
  letter-spacing: normal;
  line-height: 1.5;
}

li {
  margin: 1.5rem 0 0 2rem;
}

.wp-block-embed figcaption, .wp-block-image figcaption {
  margin-bottom: 4rem;
}

address,
cite,
em {
  font-style: italic;
}

br {
  padding-bottom: 1em;
}

a {
  color: #0070c9;
}

pre {
  font-size: .8em;
}
Das leicht modifizierte Child-Theme hat bereits ein völlig verändertes Äußeres.

4 – Die Arbeit mit Template-Dateien

Dein neues Theme ist komplett anpassbar, du kannst auch eigene Templates verwenden oder die Dateien des Parent-Themes überarbeiten. Denn WordPress überprüft zuerst den Ordner des Child-Themes nach Template-Dateien. Sind dort keine vorhanden, werden die Dateien des Parent-Themes genutzt.

Das bedeutet, dass eine Datei header.php im Child-Theme Ordner verwendet wird, und eben nicht die Datei des Parent-Themes. Möchtest du die Anzeige einer bestimmten Datei ändern, kopiere sie einfach aus dem Parent-Theme in dein Child hinein. Nun kannst du die Anzeige komplett ändern oder bestimmte Elemente hinzufügen.

5 – Es wird ernst. Dateien inkludieren

Einer der Fallstricke in der Arbeit mit Child-Themes. Viele unbedarfte Anfänger scheitern an dieser so einfach erscheinenden Aufgabe, weil die Snippets aus dem Internet immer für eigenständige Themes gedacht sind. Daher können sie nicht funktionieren.

Wenn man eine Datei inkludieren möchte oder muss, bekommt man im Internet zum Beispiel den folgenden Code:

require_once( get_template_directory() . '/my_included_file.php' );

Dieser kleine Tag versucht eine Datei aus dem Parent-Theme zu laden. Denn die genutzten Templates des Child-Themes liegen dort. Da wir mit unserem Stylesheet das CSS des Parent-Themes überschreiben, muss stattdessen der folgende Tag genutzt werden:

require_once( get_stylesheet_directory() . '/my_included_file.php' );

Der obige Tag sucht sich die benötigte Datei nun aus dem Child-Ordner heraus. Nutze also stets die get_stylesheet_directory() Variante, dann bekommst du das gewünschte Ergebnis.

Prüfe jedes Snippet aus dem Internet, ob es auf diesen kleinen Unterschied modifiziert werden muss.

6 – Widget-Bereiche hinzufügen

Auch zusätzliche Widget-Bereiche sind problemlos möglich. Wir könnten zum Beispiel einen Bereich erstellen, der eigentlich nicht vorgesehen ist, Widgets zu beherbergen – der Footer. Füge den folgenden Code in die functions.php deines Child-Themes hinein:


/**
 * Adds third widget area
 */
function twentytwenty_child_widgets_init() {
register_sidebar( array(
'name'          => __( 'Footer #3', 'twentytwenty' ),
'id'            => 'sidebar-3',
'description' => __( 'Widgets in diesem Bereich werden in der dritten Spalte des Footers angezeigt.' ),
'before_title'  => '<h2 class="widget-title subheading heading-size-3">',
'after_title'   => '</h2>',
'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
'after_widget'  => '</div></div>'
) );
}
add_action( 'widgets_init', 'twentytwenty_child_widgets_init' );

function twentytwenty_child_sidebar_registration() {

	// Arguments used in all register_sidebar() calls.
	$shared_args = array(
		'before_title'  => '<h2 class="widget-title subheading heading-size-3">',
		'after_title'   => '</h2>',
		'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
		'after_widget'  => '</div></div>',
	);

	// Footer #3.
	register_sidebar(
		array_merge(
			$shared_args,
			array(
				'name'        => __( 'Footer #3', 'twentytwenty' ),
				'id'          => 'sidebar-3',
				'description' => __( 'Widgets in diesem Bereich werden in der dritten Spalte des Footers angezeigt.', 'twentytwenty' ),
			)
		)
	);
}
add_action( 'widgets_init', 'twentytwenty_child_sidebar_registration' );

Dann nimmst Du die Datei footer-menus-widgets.php aus dem Eltern-Theme (im Ordner /template-parts) und machst folgende Ergänzungen: (und speicherst die Datei anschliessend im Ordner /template-parts des Child-Themes ab.)


// nach Zeile 15
$has_sidebar_3 = is_active_sidebar( 'sidebar-3' );

// Zeile 19 sieht so aus
if ( $has_footer_menu || $has_social_menu || $has_sidebar_1 || $has_sidebar_2 || $has_sidebar_3 ) {

// Zeile 88 sieht so aus
<?php if ( $has_sidebar_1 || $has_sidebar_2 || $has_sidebar_3 ) { ?>

// nach Zeile 108
<?php if ( $has_sidebar_3 ) { ?>
	<div class="footer-widgets column-tree grid-item">
	<?php dynamic_sidebar( 'sidebar-3' ); ?>
	</div>
<?php } ?>

Zuguterletzt kommt folgender Code in die footer.php :

<?php
/**
* The template for displaying the footer
*
* Contains the closing of the "site-content" div and all content after.

*
* @package WordPress
* @subpackage Twenty_Twenty
* @since Twenty Twenty 1.0
*/
?>
</div><!-- .site-content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
<?php if ( is_active_sidebar( 'footer-widget' ) ) :

dynamic_sidebar( 'footer-widget' );
endif;
?>
<?php
/**
 * Fires before the Twenty Twenty footer text for footer customization.

 *
 * @since Twenty Twenty 1.0
 */
do_action( 'twentytwenty_credits' );
?>
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwenty' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
</footer><!-- .site-footer -->
</div><!-- .site -->
<?php wp_footer(); ?>
</body>
</html>

Das Endergebnis:

Unser zusätzlicher Widget-Bereich im Footer.
Unser zusätzlicher Widget-Bereich im Footer.

Das Erstellen eines Child-Themes aus einem vorhandenen, modifizierten Theme

Es ist so viel einfacher, ein Child-Theme von Anfang an zu gestalten. Wenn du jedoch bereits ein Theme stark modifiziert hast, ohne ein Child-Theme zuvor angelegt zu haben, dann ist auch das möglich. Du musst alle Änderungen in das Child-Theme übertragen, um damit sicherzustellen, dass eine etwaige Aktualisierung des Parent-Themes nicht alle Änderungen löscht.

Lies dir die folgenden Schritte genau durch, damit du sie exakt Punkt für Punkt abarbeiten kannst. Diese Arbeit ist kompliziert, schwierig und mit viel Fummelei verbunden.

  1. Mache zuerst ein Backup deines Themes. Nutze dazu deinen FTP-Zugang und kopiere deinen Theme-Ordner auf deinen Desktop. Erstelle von diesem Ordner noch ein Backup und speichere es an einer anderen Stelle. Einen dieser Ordner wirst du zum Arbeiten nutzen, der andere dient als Backup, falls alles schief läuft.
  2. Erstelle nun ein Child-Theme nach der Anleitung oben. Ein Ordner, ein leeres Stylesheet, eine leere functions.php, und gegebenenfalls einen Screenshot.
  3. Besorge dir eine frische, nicht modifizierte Version deines Themes.
  4. Teile deinen HTML-Editor mittig, damit du jeweils links die Original-Datei anzeigen kannst und rechts die aus deinem modifizierten Theme. Prüfe für jede Template-Datei, ob du Änderungen getätigt hast.
  5. Übertrage alle Modifizierungen aus der functions.php in die Version deines Child-Themes.
  6. Die geänderten Dateien wandern in den Child-Theme-Ordner hinein. Prüfe hierbei noch, ob du get_template_directory() gegen get_stylesheet_directory() tauschen musst. Siehe weiter oben im Artikel.
  7. Nun kommt der Part, der wirklich etwas »Tricky« ist. Du musst nun die frische Style.css-Version mit der von dir geänderten Datei vergleichen. Vielleicht hat dein HTML-Editor eine Funktion, die zwei Dateien auf Differenzen vergleichen kann. Das wäre hilfreich. Ich habe eine solche Funktion noch nie benötigt. Verfügst du nicht über diese hilfreiche Funktion, dann musst du die Dateien dem Augenschein nach vergleichen. Alle Änderungen wandern in eine eigene style.css Datei. Diese kommt dann mit allen Modifikationen versehen in den Child-Theme-Ordner hinein.
  8. Nachdem du das Gefühl hast, alle geänderten Theme-Dateien und das erweiterte CSS in den Child-Theme-Ordner gepackt zu haben, lade den Ordner in dein Theme-Verzeichnis wp-content/themes. Achte darauf, dass sich die frische Version deines Themes ebenfalls im Theme-Verzeichnis befindet.
  9. Logge Dich in dein WordPress ein und navigiere zu den Themes. Nutze die Live-Vorschau, um dein frisch erstelltes Child-Theme zu prüfen. Wenn alles korrekt angezeigt wird, gut. Wenn nicht, prüfe, in welchen Bereichen du noch etwas übersehen haben könntest.
  10. Arbeite die fehlenden Punkte ab.
  11. Prüfe erneut die gesamte Website auf alle nötigen Funktionen und auf eine korrekte Anzeige mit der Live-Vorschau. Wenn wirklich alles passt, aktiviere dein Child-Theme und erfreue dich daran.

Fazit

Nun hast du so ziemlich alle wichtigen Punkte in der Erstellung eines Child-Themes kennengelernt und weißt auch, warum du immer eines nutzen solltest. Alle anderen Schwierigkeiten, die sich dir stellen, musst du wie immer googeln. Denn leider ist es kaum möglich, alles Wissenswerte in einen einzigen Artikel zu bringen, da sich viele Probleme erst bei der Entwicklung deines individuellen Child-Themes zeigen.

Das Beitragsbild enthält ein Element von Depositphotos.

6 Kommentare zu “So baust du dein eigenes Child-Theme mit dem neuen TwentyTwenty WordPress-Theme”

Es geht auch wesentlich einfacher, in der Suchmaschine deines Vertrauens nach ‘wordpress child theme generator’ gucken.
z.B. https://childtheme-generator.com/create-child-theme generiert nach ein paar Eingaben das passende Theme, das man dann nur noch im WordPress-Backend selbst hochladen kann,
Oder gleich direkt in WordPress mit dem Plugin https://wordpress.org/plugins/child-theme-generator/ wobei ich persönlich der Ansicht bin ‘je weniger Plugins desto besser’ und das Plugin nach dem Generieren wieder löschen würde.

Vielen Dank für den Beitrag, er kommt genau rechtzeitig zum Umstieg auf Twenty twenty. Wobei ich mich immer Frage, warum WP/Automattic nicht gleich ein Child-Theme bereitstellt. Viele Grüße, Stefan

Vielen Dank für die Anregung zum Hinzufügen eines dritten Widget-Bereichs. So, wie im Artikel beschrieben funktioniert es allerdings bei Twenty Twenty nicht.

Richtig ist, dass zuerst in der functions.php das neue Widget registriert werden muss. Der Code dafür lautet wie folgt:


/**
 * Adds third widget area
 */
function twentytwenty_child_widgets_init() {
register_sidebar( array(
'name'          => __( 'Footer #3', 'twentytwenty' ),
'id'            => 'sidebar-3',
'description' => __( 'Widgets in diesem Bereich werden in der dritten Spalte des Footers angezeigt.' ),
'before_title'  => '<h2 class="widget-title subheading heading-size-3">',
'after_title'   => '</h2>',
'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
'after_widget'  => '</div></div>'
) );
}
add_action( 'widgets_init', 'twentytwenty_child_widgets_init' );

function twentytwenty_child_sidebar_registration() {

	// Arguments used in all register_sidebar() calls.
	$shared_args = array(
		'before_title'  => '<h2 class="widget-title subheading heading-size-3">',
		'after_title'   => '</h2>',
		'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
		'after_widget'  => '</div></div>',
	);

	// Footer #3.
	register_sidebar(
		array_merge(
			$shared_args,
			array(
				'name'        => __( 'Footer #3', 'twentytwenty' ),
				'id'          => 'sidebar-3',
				'description' => __( 'Widgets in diesem Bereich werden in der dritten Spalte des Footers angezeigt.', 'twentytwenty' ),
			)
		)
	);
}
add_action( 'widgets_init', 'twentytwenty_child_sidebar_registration' );

Dann wird noch die Datei template-parts » footer-menus-widgets.php wie folgt erweitert und anschließend im Ordner template-parts des Child-Themes gespeichert.


// nach Zeile 15
$has_sidebar_3 = is_active_sidebar( 'sidebar-3' );

// Zeile 19 sieht so aus
if ( $has_footer_menu || $has_social_menu || $has_sidebar_1 || $has_sidebar_2 || $has_sidebar_3 ) {

// Zeile 88 sieht so aus
<?php if ( $has_sidebar_1 || $has_sidebar_2 || $has_sidebar_3 ) { ?>

// nach Zeile 108
<?php if ( $has_sidebar_3 ) { ?>
	<div class="footer-widgets column-tree grid-item">
	<?php dynamic_sidebar( 'sidebar-3' ); ?>
	</div>
<?php } ?>

Nun beide Dateien via FTP auf den Server hochladen und fertig ist der dritte Widget-Bereich. Habe ich selbst getestet und funktioniert bei mir einwandfrei. Viel Freude beim Nachmachen.

Danke für diese sehr ausführliche Beschreibung. Ich habe zwei Fragen.

1.) Wie inkludiere ich die ich nenne sie einmal gutenberg-spezifischen CSS-Anweisungen für das Backend?

2.) Wie kann ich es im Child-Thema (functions.php) hinbekommen, dass nicht nur der Titel auf der Hauptseite zur Einzelansicht führt, sondern auch ein Klick auf das Beitragsbild. Hier ist das wunderbar gelöst 🙂

Lieben Dank und beste Grüße
Horst

Hallo Horst,

zu Deinem 1. Punkt:
➤ OHNE Child-Theme
Eigenes CSS legst Du im Admin-Menü unter Design » Customizer dann „Zusätzliches CSS“ ab.
➤ MIT Child-Theme
Im Ordner des Child-Theme in der Datei style.css ablegen.

zu Deinem 2. Punkt:
1.) Kopiere Dir mal den Link aus Zeile 48 aus »
twentytwenty/template-parts/entry-header.php

2.) Und platziere ihn umd die PHP-Funktion der Zeilen 24-30 »
twentytwenty/template-parts/featured-image.php

Die Ordnerstruktur im Child-Theme sinngemäß anlegen und die geänderten PHP-Dateien dort speichern. (Die Dateien im Parent-Theme bleiben unverändert.) Zwar habe ich es nicht getestet, doch sollte das Ergebnis zum Ziel führen.

Viel Erfolg!

Schreibe einen Kommentar

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