Elmastudio

Contents

Video-Tutorial: Ein WordPress Child-Theme erstellen

·
URL kopierenBeitrag als Markdown kopieren

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

Für jedes Elmastudio-Theme gibt es inzwischen einen fertigen Child-Theme-Starter auf GitHub, zum Beispiel Uku Child. Die Links zu allen Themes findest du in der Theme-Liste im Artikel Google-Schriftarten vom eigenen Server laden.

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

Copy code
/*   Theme Name: DeinChildThemeDescription: Beschreibungstext...Author: Dein NameAuthor URI: http://www.deinedomain.de/Template: parentthemeordnerVersion: 1.0Tags:*/

Hilfreiche Artikel zum Weiterlesen

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

Kategorien: ,
Schlagwörter: , ,

Ellen Bauer

Ellen ist Mitgründerin von Elmastudio und Product Managerin bei Automattic. Sie spricht regelmäßig auf WordCamps über Block-Themes, WooCommerce und das Bauen von Websites mit KI. Als Content Creatorin schreibt und spricht sie über WordPress, Open Source, KI und persönliche Entwicklung und teilt dabei ihre eigenen Erfahrungen und Meinungen.

Gefällt dir, was wir hier machen? Dann abonniere unseren Newsletter oder YouTube-Kanal, das kostet dich nichts und hilft uns schon sehr. Wenn du einen Schritt weitergehen magst, lass unten ein kleines Dankeschön da. So bleibt Elmastudio für alle kostenlos, und wir schreiben weiter, wie seit 2009. Danke dir.Gefällt dir, was wir hier machen? Dann abonniere unseren YouTube-Kanal, das kostet dich nichts und hilft uns schon sehr. Wenn du einen Schritt weitergehen magst, lass unten ein kleines Dankeschön da. So bleibt Elmastudio für alle kostenlos, und wir schreiben weiter, wie seit 2009. Danke dir.

38 Kommentare

  1. Jonathan

    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

    Antworten
    1. Ellen
      Author

      Antwort an Jonathan

      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

      Antworten
  2. Kirsten

    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

    Antworten
    1. Ellen
      Author

      Antwort an Kirsten

      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

      Antworten
  3. Dominik

    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

    Antworten
  4. Michel

    Super… das wollte schon immer wissen…

    Antworten
  5. Saskia Bauer

    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

    Antworten
  6. Ellen
    Author

    @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

    Antworten
  7. Marc

    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 …

    Antworten
  8. Alois Brinkmann

    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

    Antworten
  9. Harald Laier

    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.

    Antworten
  10. Janina

    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

    Antworten
  11. Oguzhan Cansever

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

    Antworten
  12. nasch

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

    Antworten
  13. John

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

    Antworten
  14. Rick

    Super Anleitung und gleich ebenso kapiert – umgesetzt. Perfekt.

    Danke. Schöne Feiertag und ein guten Rutsch.

    Antworten
  15. frank katzer

    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!

    Antworten
  16. Peter

    Tolle Anleitung, DANKE!!!

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

    DANKE

    Antworten
    1. Ulli

      Antwort an Peter

      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

      Antworten
  17. Sarah

    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

    Antworten
  18. dagmar

    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

    Antworten
  19. Rainer

    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

    Antworten
  20. Kosta

    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

    Antworten
  21. Gitti

    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

    Antworten
  22. Sven

    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

    Antworten
  23. Rolf Blum

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

    Rolf

    Antworten
  24. Mathilde

    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

    Antworten
  25. Mali

    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

    Antworten
    1. Peter Richard

      Antwort an Mali

      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

      Antworten
  26. Kian

    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

    Antworten
  27. ClaudiaBerlin

    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…

    ???

    Antworten
  28. Andreas Lenné

    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

    Antworten
  29. Petra

    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

    Antworten
  30. Petra

    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!

    Antworten
  31. Marc O.

    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??

    Antworten
  32. Patrick

    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

    Antworten
  33. pixelsophie

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

    Antworten
  34. Jannewap

    Hi Ellen,

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

    Gruß Jan

    Antworten

Schreibe einen Kommentar

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

Expand sidebar⌘B
DEEN