Video-Tutorial: Ein WordPress Child-Theme erstellen

von

Ellen Bauer

•

29. Juli 2011

In dieser kleinen Video-Anleitung erkläre ich, wie du dir in nur ein paar Schritten ein eigenes WordPress Child-Theme erstellen kannst. Ein Child-Theme ist besonders praktisch, um individuelle Anpassungen an einem Theme sicher vorzunehmen. Denn in einem Child-Theme sind deine Anpassungen im Stylesheet und den Template-Dateien auch bei einem späteren Update des Parent-Themes gespeichert. Und damit du auch gleich mit der Erstellung deines eigenen Child-Themes loslegen kannst, habe ich im Anschluss zum Video noch ein Beispiel Child-Theme zum downloaden vorbereitet.

Beispiel Child-Theme Ordner downloaden

Als Grundlage für die Erstellung deines eigenen Child Themes, kannst du dir diesen Beispiel Child-Theme Ordner herunterladen.

CSS-Beschreibung in der style.css Datei des Child-Themes

[php]
/*
Theme Name: DeinChildTheme
Description: Beschreibungstext…
Author: Dein Name
Author URI: http://www.deinedomain.de/
Template: parentthemeordner
Version: 1.0
Tags:
*/
[/php]

Hilfreiche Artikel zum Weiterlesen

ausführliche Infos zur Child-Theme Erstellung im WordPress Codex
„WordPress Theme-Anpassung mit Hilfe eines Child Themes“
„WordPress Child Theme Basics“ bei Themeshaper.com
„Modular CSS in WordPress Child Themes“ bei Themeshaper.com
„Using Filter Hooks in WordPress Child Themes“ bei Themeshaper.com
„Using Action Hooks in WordPress Child Themes“ bei Themeshaper.com

Hast du Fragen oder weitere Tipps zur Erstellung eines Child-Themes in WordPress? Über dein Feedback und deine Tipps freue ich mich sehr!

von

Ellen Bauer

Screencasts, WordPress

Kommentare

Jonathan

•

30. Juli 2011

Antworten

Hi Ellen,
Infos sind super! Aber zwecksmäßiger Weise empfinde ich das Video als viel zu lang. Interessierte könnten sich beim Anschauen verlaufen. Klare Argumente für das Child-Theming und wertvolle „How-To’s“ – mehr nicht. Maximal 5 Minuten reichen für dieses einfache Thema als Video-Anleitung völlig. Wissen komprimieren!

Lieben Gruß, Jonathan
1. Ellen
  
  •
  
  3. August 2011
  
  Antworten
  
  Hallo Jonathan,
  
  vielen Dank für dein Feedback zum Tutorial. Da das Tutorial ja vor allem als Einsteiger-Anleitung zum Thema „Child Themes“ gedacht ist, finde ich es eigentlich recht sinnvoll nicht zu schnell die Fakten abzuarbeiten, sondern sich mit der Erklärung etwas Zeit zu lassen. So können sich die Zuhörer auch etwas länger den Code anschauen und diesen dann auch wirklich gut verstehen.
  
  An der Präsentation des Tutorials will ich aber auf alle Fälle noch arbeiten, so dass die Erklärungen noch etwas flüssiger kommen. Manchmal ist es gar nicht so einfach, die richtigen Worte zu finden, da man normalerweise ja eher schweigend vor sich hin arbeitet :-)
  
  Viele Grüße,
  Ellen
Kirsten

•

30. Juli 2011

Antworten

Hallo, Ellen,
vielen Dank fürs Erklären!
Wie ist das eigentlich, wenn das parent-theme Unterordner hat, also nicht alle theme-Dateien auf einer Ebene liegen?
Hast Du damit Erfahrung?

Schöne Grüße von Kirsten
1. Ellen
  
  •
  
  3. August 2011
  
  Antworten
  
  Hallo Kirsten,
  
  vielen Dank für deinen Kommentar. Es kommt immer ein wenig darauf an, um welche Art von Dateien es sich handelt. Aber wenn du die Theme-Dateien im Child Theme nutzen möchtest, würde ich die Struktur des Parent Themes auf jeden Fall beibehalten. Das ist dann bei einer späteren Bearbeitung auch übersichtlicher.
  
  Viele Grüße,
  Ellen
Dominik

•

30. Juli 2011

Antworten

Hallo, vielen Dank für das Tutorial. Ich habe im Moment keine Frage, hänge mich einfach hier rein, damit ich alle künftigen Posts erhalte, da ich mich nächstens an einem Child-Theme versuchen will. Liebe Grüsse, Dominik
Michel

•

30. Juli 2011

Antworten

Super… das wollte schon immer wissen…
Saskia Bauer

•

3. August 2011

Antworten

Danke für dieses schöne Tutorial. Ich möchte bald auch ein WordPress Blog erstellen und da werde ich dieses Video sicherlich gebrauchen können. Sehr schöne Arbeit!

lG Saskia
Ellen

•

3. August 2011

Antworten

@Dominik, @Michel, @Saskia,

vielen Dank für euer Feedback. Es freut mich, wenn euch das Video-Tutorial bei eurer Arbeit weiterhelfen kann :-)

Viele Grüße,
Ellen
Marc

•

7. August 2011

Antworten

Ich habe aktuell bemerkt beim Bearbeiten eines Childthemes, dass man die Pfade in der CSS-Datei für Bilder auch anpassen muss. Jedenfalls kann man den Code der CSS-Datei nicht einfach kopieren, sondern man muss entweder den Bilderordner kopieren oder die relativen Pfade anpassen bzw. in absolute Pfade umwandeln. Und ich muss zugeben, dass ich nicht so schnell darauf gekommen bin …
Alois Brinkmann

•

8. August 2011

Antworten

Mich würde intressieren mit welchem Programm du dieses Video erstellt hast.
Mit einem WordPressblog ist sich sicherlich einiges mehr möglich als mit einem Posterousblog.
schöne Grüße aus dem Emsland
Harald Laier

•

8. August 2011

Antworten

Trotz Anfangsschwierigkeiten hat das Anlegen und Bearbeiten des Child-Themes gut geklappt. Innerhalb von zwei Stunden hatte ich fast alle meine Vorstellungen umgesetzt. Ein Problem habe ich noch. Vielleicht kann ich es noch lösen.

Auch das von Marc geschilderte Problem ist bei mir aufgetaucht. Da ich eine Bilddatei austauschen wollte habe ich den kompletten Bild-Ordner in den Child-Theme-Ordner kopiert und die Bilddatei ausgetauscht. Seite neu laden. Alle Symbole tauchten anschließend auf.
Janina

•

23. August 2011

Antworten

Hi,
ich super Video danke das hab ich gesucht.

Hast du vielleicht noch einen Tipp, welche Themes sich besonders gut für ein Child Theme eignen? Im Prinzip bräuchte ich ein Basistheme, das schon einiges an Funktionen mitbringt – das man dann auch super personalisieren kann. Gibt es sowas? Hab Whiteboard gefunden aber sooo ganz zufrieden bin ich damit noch nicht. Danke :)
Janina
Oguzhan Cansever

•

11. September 2011

Antworten

Cooles Tutorial für WP-Einsteiger. Screencast ist immer eine gute Idee. – hilft meistens mehr als 1000 Seiten.
nasch

•

3. November 2011

Antworten

Danke schön, hat nach DeinerVideo Anleitung alles wunderbar geklappt.
John

•

2. Februar 2012

Antworten

Schönes Tutorial, nun habe ich endlich ein Child Theme und kann kommende Updates mit Ruhe entgegen sehen.
Rick

•

26. Dezember 2012

Antworten

Super Anleitung und gleich ebenso kapiert – umgesetzt. Perfekt.

Danke. Schöne Feiertag und ein guten Rutsch.
frank katzer

•

28. Dezember 2012

Antworten

eure themes und tutorials machen immer wieder spass.
wollte gerade etwas am waipoua anpassen – child theme tutorial angeschaut – änderung durchgeführt – perfekt!
vielen dank für deine/eure tolle arbeit!
Peter

•

5. Februar 2013

Antworten

Tolle Anleitung, DANKE!!!

würdest DU Child-Theme verwenden um im Header unterschiedliche Grafiken mit jeweils einem Hyperlink auf eine unterschiedliche Webpage verwenden?

DANKE
1. Ulli
  
  •
  
  23. November 2013
  
  Antworten
  
  Tolles Video, vielen Dank. Auch die Ausführlichkeit, sprich Länge hat mir außerordentlich gefallen. So oft wird in Lehrvideos zuviel vorausgesetzt und die Hälfte der Betrachter bleibt auf der Strecke, deshalb nochmals herzlichen Dank.
  Ulli
Sarah

•

8. Februar 2013

Antworten

Liebe Ellen

Ich liebe deine Tutorials, ich war ein absoluter Anfänger und nun hab ich das Gefühl ich wisse schon so einiges. Das Tempo ist übrigens perfekt :)

Liebe Grüsse
Sarah
dagmar

•

17. März 2013

Antworten

Hi,
deine Tuts sind wirklich klasse, ich mache mich seit langer Zeit mal wieder auf, um eine Seite für meine Schwester anzupassen und fange an. WP wieder zu lieben – auch dank deiner Tuts.
Zu dem Child-Theme vielleicht noch eine kleine Anmerkung:
Man sollte darauf achten, den Child-Ordner OHNE Leerzeichen zu benennen, sonst wird es im Frontend nicht wirklich gefunden, und das Template wird nicht dargestellt.
Danke noch einmal
Dagmar
Rainer

•

29. März 2013

Antworten

Danke Ellen. Ich habs mit deiner Anleitung hinbekommen. Aber wie ein paar meiner Vorschreiber schon sagten: TOO MUCH.

Die Hälfte des Videos hätte es auch getan.

Trotzdem Merci

Gruß
Rainer
Kosta

•

6. Mai 2013

Antworten

Moin Ellen,

ich finde das Tuto sehr gelungen, viele Dank dafür.
Eine Frage hätte ich noch an dich.

Ich würde gerne in den Footer ein Bild mit dem entspechenden Link enbauen. Hättest du einen Tip für mich. Das Theme ist Yoko.

Vielen Dank

Kosta
Gitti

•

9. Mai 2013

Antworten

Hy Ellen,
ich bin noch nicht sattelfest in WP und da kommt auch schon der erste ERROR daher.
Hab ein ChildTheme (lt. deinem Video) auf den Server geladen u. wollte es aktivieren in WP. Bei Klick auf aktivieren kam folgende Meldung:
Fatal error: Cannot redeclare my_javascripts() (previously declared in /home/.sites/60/site2973/web/wp-content/themes/finexchild/functions.php:11) in /home/.sites/60/site2973/web/wp-content/themes/finex/functions.php on line 25

Jetzt kann ich mich nicht mehr einloggen. Hast du einen TIpp, wie ich das lösen kann???

LG, Gitti
Sven

•

11. Juni 2013

Antworten

Hi Ellen,
mit deinem Tutorial hast du mir viel Arbeit erspart. Es war immer ein Problem, dass nach einem Update ich alles neu einrichten musste. Auch wenn es nicht viel war, hat es doch genervt. So habe ich wieder Zeit für andere Ideen. Danke

Gruß Sven
Rolf Blum

•

26. Juni 2013

Antworten

Es ist gut beschrieben, vielen Dank Ellen! Werde es versuchen… :)
Mit besten Grüßen

Rolf
Mathilde

•

3. Juli 2013

Antworten

Hallo Ellen,

danke für Dein Video Tutorial. Für mich ist es auf keinen Fall zu langatmig. Aber trotz Deiner ausführlichen Erklärungen stolpere ich gleich zu Anfang immer über ein Problem. Wenn ich die Style.cs Datei aufrufe, sehe ich meine Variante genauso wie in Deinem Video (bei Minute 2.:22), nur leider kann ich nix reinschreiben. Ich kann zwar reinklicken, aber nicht den Namen zu Childtheme usw. ändern. Kannst Du mir sagen, was ich falsch mache?
Danke und Gruß Mathilde
Mali

•

28. Juli 2013

Antworten

Hallo ich trau mich jetzt einfach mal zu fragen…
ich hab nach der super Anleitung ein Child Theme gelegt.
Jetzt habe ich nur das Problem das in diesem Theme mehrere CSS Dateien vorhanden sind. In einem extra „style“ Ordner liegt eine weiter CSS. die style-default.css. Ich habe schon alles ausprobiert aber leider funktioniert nichts. Hoffe jemand weiß Rat für mich:((
die Ordnerstruktur ist:
Child
mit meiner style.css und der style-default.css (die nicht greift)
Dann der Themenordner mit dem Ordner „style“ in dem die Original style-default.css liegt.
Bitte was mus ich machen damit diese style-default.css greift also auch aus der Child raus zu bearbeiten ist… o man..
Hoffe es kann mir jemand helfen..

Vielen Dank im Voraus Mali
1. Peter Richard
  
  •
  
  14. August 2013
  
  Antworten
  
  Hallo Mali
  Habe das gleiche Problem.
  Hatte gehofft, dass auf deine Frage hier eine Antwort lesen kann.
  Aber ich sehe keine. Hast du sie auf anderem Wege erhalten?
  
  lg Peter Richard
Kian

•

18. August 2013

Antworten

Hallo Ellen,

zunächst eimal, die Länge, Geschwindigkeit und – ich finde – auch die Wortwahl im Video sind mehr als ok. Ich bin – wie wahrscheinlich viele andere auch, die ein Tutorial benötigen – absoluter Laie und habe im Gegenteil häufig Schwierigkeiten, zu folgen, wenn Fortgeschrittene oder Profis erklären, weil sie für uns Anfänger zu viel als bekannt voraussetzen. Insofern finde ich es absolut daneben, wenn – wie z. B. gleich im ersten Kommentar – diesbezüglich abwertende Bemerkungen kommen. Jeder kann ja alternativ bei dem weghören oder weiterskipen, was er schon zu wissen glaubt. Meiner Meinung nach: Weiter so!

Ich selber habe es noch nicht ausprobiert, denke aber, dass es mit deiner Anleitung nun kein Problem sein sollte. Ich habe noch eine Frage: Es kommen ja in das Childe-Theme nur die Dateien, an denen Änderungen vorgenommen wurden. Reicht es dann auch, wenn in jeder Datei nur die Zeilen stehen, die geändert bzw. hinzugefügt wurden, oder muss der Child-Theme Ordner jeweils die komplette abgeänderte Datei enthalten?

Danke und Gruß
Kian
ClaudiaBerlin

•

28. August 2013

Antworten

Zum Video: Müssten nicht die eigenen CSS-Änderungen in der Child-CSS erst NACH den einkopierten (oder importierten) Styles des Parent kommen? Sonst überschreiben doch die einkopierten Parents-CSS gleich wieder die eigenen, weil sie in der Reihenfolge später abgearbeitet werden…

???
Andreas Lenné

•

12. Oktober 2013

Antworten

Liebe Ellen,
schaue immer wieder auf Deinem Blog vorbei. Ich bin auch ein totaler Fan von WordPress.
Hier noch ein Tip für die CSS Definitionen im Child Theme: Man kann doch einfach folgenden Eintrag in der style.css des Child Theme machen:

@import url(../parentordner/style.css);

Damit kann man sich das Kopieren und Einfügen aller Parent CSS Inhalte aus dem Parent Theme sparen.

LG,
Andreas
Petra

•

19. Dezember 2013

Antworten

Hallo Ellen,
vielen Dank für diese ausführliche Anleitung.
Da ich in einigen Dateien (u.a. in functions.php, style.css, searchform.php, post-search.php) Änderungen vornehmen muss, wollte ich das natürlich lieber in einem Child machen.
Selbst wenn ich noch gar nix außer den Pflichtangaben in der style.css des Childs habe, ist das Layout der HP kaputt (Sidebar rechts statt links, Widgets alle mit Aufzählungspunkten, etc. )
Es handelt sich dabei um „museum-core“ als Parent. Was mache ich falsch?
Leider ist die HP noch auf meinem localhost, bis sie richtig „läuft“, dann erst darf sie die bereits veröffentlichte Website ersetzen.
Grüßlis
Petra
Petra

•

19. Dezember 2013

Antworten

nochmal ich…
Sorry, war ein Fehler von mir, man sollte schon seeehr genau hingucken (was nach vielen Stunden PC-Arbeit vermutlich das Problem war). Es funzt tadellos!
Marc O.

•

13. Februar 2014

Antworten

Hey Ellen, ich hab da mal eine Verständnisfrage:

wenn beim child-theme wo Du ja den Inhalt der original-Datei hineinkopiert und aber ganz oben Deine Änderungen notiert hast, werden dann nicht Deine Änderungen durch die folgenden (original)Notierungen wieder überschrieben??
Patrick

•

4. März 2014

Antworten

Mmhh…, irgendwas mache ich noch falsch! Bei mir ignoriert das ChildTheme die neuen Template-Dateien und greift auf die des Parent-Themes zurück. Ich habe Anpassungen im Header und im Footer sowie auch Ergänzungen in der functions.php und diese Dateien im ChildTheme-Ordner abgelegt. Dennoch bekommen ich die Standard-Headergrafik, ein falsches Hauptmenü und einen falschen Footer. Die ergänzten Funktionen werden ebenfalls nicht ausgeführt! Woran könnte das liegen?

LG Patrick
pixelsophie

•

9. März 2014

Antworten

Liebe Ellen,
ganz vielen Dank für dieses Video-Tutorial!
Jannewap

•

5. August 2015

Antworten

Hi Ellen,

kurz und knackig erläutert. Vielen Dank. Hast mir die Berührungsängste damit genommen. Vielen Dank dafür.

Gruß Jan