Kurz-Vortrag beim WPmeetup München im Oktober 2015

1. @kirstenschelper

2. Childthemes

3. Kirsten Schelper
www.schelperdesign.net · www.die-netzialisten.de
@kirstenschelper

4. @kirstenschelper
Was ist ein
Childtheme?

5. ?

6. – WordPress Codex
„Ein Childtheme ist ein Theme, das
Funktionalität und Design von
einem anderen Theme erbt, dem
sogenannten Parent-Theme.
Der Weg über Childthemes wird für
Anpassungen von Themes
empfohlen.“

7. @kirstenschelper
1. Man kann das Design anpassen (style.css)
2. Man kann Funktionen ergänzen
(z.B. zusätzliche Menüs oder Widget-Bereiche)
3. Updates vom Parent-Theme können problemlos
durchgeführt werden
(Childtheme beilbt davon unberührt)
4. Alle Änderungen bleiben übersichtlich,
weil im Childtheme-Ordner nur wenige Dateien mit
wenigen Zeilen Code liegen
Vorteile Childtheme

8. @kirstenschelper
1. Wenn man die Anpassungen, die man braucht, auch
über den Customizer machen kann
2. Wenn man eine Eierlegend Wollmichsau
(Divi, Enfold etc.) gekauft hat
Wann braucht man kein Childtheme?

9. @kirstenschelper
Wie macht man ein
Childtheme?

10. @kirstenschelper
Childtheme anlegen
1. Verzeichnis anlegen
2. style.css anlegen
Fertig

11. @kirstenschelper
Woraus besteht ein Childtheme?
• style.css
• functions.php
• screenshot.png
• [header.php, single.php, archive.php…]

12. @kirstenschelper
style.css

13. @kirstenschelper
Die style.css braucht einen header
Theme Name: Twentyfifteen Child
Description: Ein schönes Childtheme
Author: Kirsten Schelper
Author URI: http://www.schelperdesign.net
Template: twentyfifteen
Version: 1.0
Tags: light
Text Domain: twentyfifteen-child
*/

14. Demo

15. @kirstenschelper
Parent-Styles einbinden (1)
Theme Name: Twentyfifteen Child
Description: Ein schönes Childtheme
Author: Kirsten Schelper
Author URI: http://www.schelperdesign.net
Template: twentyfifteen
Version: 1.0
Tags: light
*/
@import url(../twentyfifteen/style.css);

16. @kirstenschelper
Parent-Styles einbinden (2)
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style',
get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts',
'theme_enqueue_styles' );
= style.css vom Parent Theme laden
(functions.php Childtheme wird zuerst geladen)

17. @kirstenschelper
Warum nicht @import?
@import
• schlechte Performance
• hart gecodet = unmodern und unflexibel
enqueue
• gute Performance
• per functions.php steuerbar:
–Plugins, die Scripte und CSS zusammenfassen
–Reihenfolge mehrere CSS-Dateien

18. @kirstenschelper
Parent-Styles einbinden (3)
wp_deregister_style( 'twentyfifteen-style');
wp_register_style('twentyfifteen-style',
get_template_directory_uri(). '/style.css');
wp_enqueue_style('twentyfifteen-style',
get_template_directory_uri(). '/style.css');
wp_enqueue_style( 'childtheme-style',
get_stylesheet_directory_uri().'/style.css',
array('twentyfifteen-style') );
}
add_action( 'wp_enqueue_scripts',
'twentyfifteen_child_styles' );

19. @kirstenschelper
Childtheme
bitte beachten

20. @kirstenschelper
Childtheme und Theme-Updates
• style.css + functions.php = sichere Sache
• header.php, single.php, archive.php …
Was passiert, wenn diese Dateien
im Eltern-Theme ein Update bekommen?

21. @kirstenschelper
Templates und Updates
• Templates, die vom Childtheme überschrieben
werden, werden beim Update des Parent-Themes
NICHT aktualisiert
• Sicherheitslücken im Theme, die der Autor durch
ein Update behoben hat, können so im
Childtheme weiterleben
Achtung

22. @kirstenschelper
Die gute Nachricht:
Da gibt’s ein Plugin für!

23. @kirstenschelper
Plugin „Child Theme Check“ (1)
https://wordpress.org/plugins/child-theme-check/

24. @kirstenschelper
Plugin „Child Theme Check“ (2)

25. @kirstenschelper
Childtheme Tipps
• Plugin „Child Theme Check“ installieren,
Funktionen regelmäßig überprüfen (ab und zu mal
wp_debug aktivieren)
• get_stylesheet_directory
(statt get_template_directory)
• im Parent Theme nach
! function_exists
suchen, macht Funktionen einfach überschreibbar
• (…)

26. @kirstenschelper
Childtheme
Fragen!