WordPress Child-Theme erstellen

Ein WordPress Child-Theme kann ein echtes Wundermittel für Webentwickler und -bastler sein. klar, WordPress lässt sich auch ohne Childtheme sehr leicht grafisch und inhaltlich anpassen. Die meisten Anpassungen finden im Stylesheet (in der Datei style.css) oder der functions.php statt. Das ist schon einmal übersichtlich. Das Dumme ist nur, dass alle Anpassungen verloren gehen, wenn man das Theme updated.

Um dies zu verhindern, baut man ein kleines Untertheme, das sogeannte Child-Theme, in dem man alle Änderungen vornimmt. Vereinfacht gesagt lädt WordPress das große Elterntheme und schaut dann nach, ob es noch Sonderwünsche (im Childtheme) gibt.

Das Gute ist, dass nun bei einem Update des Hauptthemes, alle Änderungen im Childtheme liegen und damit von dem Update nicht betroffen sind. Okay, also lasst uns ein Child-Theme anlegen …

WordPress Child-Theme erstellen

Wie legt man nun ein Child-Theme korrekt an? Als Designers Inn-Kunde hast du hier nix zutun, da alle Themes bereits als Child-Theme erstellt sind. Du kannst also an dieser Stelle aufhören zu lesen :-)

Für alle anderen kommt hier eine Anleitung, wie man fix ein Child-Theme erstellt.

Schritt 1: Child-Theme-Ordner anlegen

Logge dich per FTP in/auf deinem Server ein und erstelle im Verzeichnis wp-content/themes einen neuen Ordner. Den neuen Ordner kannst du beliebig benennen, z.B. CHILDTHEME. Wichtig ist nur, dass dieser Ordner auf derselben Ebene liegt, wie der Ordner deines Hauptthemes.

Schritt 2: Childtheme-CSS

Erstelle nun eine Datei style.css. Dies kannst du mit jedem Texteditor erledigen. Achte beim Speichern nur darauf, dass die Endung wirklich “css” lautet. Füge folgenden Text (mit deinen Daten) in die Datei ein. Wichtig ist vor allem, dass unter “Template:” der exakte Name des Ordners von deinem Haupttheme steht!

/*
Theme Name: Childtheme
Description: Mein neues Childtheme
Author: Dein Name
Author URI: http://www.deine-website.de
Template: Name_des_Haupttheme-Ordners
Version: 1.0
Tags:
*/
/*Füge deinen Code unter dieser Zeile ein. Nutze ggf. !important, um Styles aus dem Haupttheme zu überschreiben.*/

Lade nun die style.css in den Ordner deines Childthemes.

Schritt 3: Chldtheme functions.php erstellen

Okay, nun müssen wir noch eine Datei namens functions.php erstellen. Mit dieser verknüpfen wir unsere Datei CSS mit unserem Haupttheme. Auch dies kannst du mit jedem Texteditor erledigen.

In die Datei kommt folgender Text:

<!--?php
//add child theme
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
?-->

Schritt 4: Childtheme nutzen

Sobald du dich neu in dein Backend einloggst, ist dein neues Childtheme auch schon verfügbar. Klasse. Dein neues Theme hat jetzt noch keine Vorschaugrafik und sieht entsprechend etwas nach einer Baustelle aus. Wenn du dich daran störst, kannst du eine Grafik in der Größe 600 x 450 Pixel erstellen, diese unter den Namen screenshot.png bzw. screenshot.jpg abspeichern und in den Ordner deines Childthemes kopieren. Nun sieht auch dein Childtheme im Backend hübsch aus.

Jetzt musst du dieses nur noch aktiveren. Fertig!

Alle Anpassungen, die du in der style.css oder functioins.php in deinem Childtheme vornimmst, werden für das Haupttheme geladen. Das Schöne ist: Alles Änderungen bleiben bei dem nächsten Update deines Hauptthemes erhalten.

Na denn, frohes Anpassen!

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!
Neuer Theme Builder ab Divi 4

Neuer Theme Builder ab Divi 4

Unendliche Möglichkeiten dank des Theme Builders Divi 4. Mit dem Theme Builder könnt ihr jetzt komplette Seiten-Templates erstellen, z.B. für den Blog, die 404-Seite oder für Archiv- oder Suchergebnisse. Dabei könnt ihr global einen Kopf-, Inhalts-, und Fußbereich...

WordPress Standard-Text für geschützte Seiten ändern

WordPress Standard-Text für geschützte Seiten ändern

Du kannst in WordPress einzelne Seiten und Beiträge mit einem Passwort schützen. Ruft dann jemand diese Seite auf, erscheint ein Standard-Text: “This post is password protected. To view it please enter your password below:” beziehungsweise: "Um diesen geschützten...

DIVI Related Posts ohne Plugin

DIVI Related Posts ohne Plugin

In diesem Tutorial "Divi Related Posts" zeige ich dir, wie du ähnliche Beiträge unterhalb deiner Blogbeiträge ausgeben kannst. Divi bietet von Hause aus leider keine Möglichkeit, ähnliche Beiträge unterhalb eines Blogbeitrags auszugeben. Aber keine Sorge: Es gibt...

|

Platz für deinen Kommentar!

8 Kommentare

  1. Patrick

    Sorry für die dumme Frage, aber wie kann WordPress ein Update vom eigenen erstellten Theme machen? Oder verstehe ich hier etwas komplett falsch, verstehe ehrlich gesagt noch immer nicht was genau der Sinn eines Child Themes ist

  2. Marco

    WordPress macht keine Updates für die von dir erstellten Themes. WordPress hat generell ja nichts mit den Themes am Hut ;-) Der Grund für Childthemes: Wenn ein Theme geupdated wird, gehen all deine Änderungen/Anpassungen verloren. Um dies zu verhindern, schreibt man individuelle Anpassungen in ein Childtheme. So bleiben die Änderungen bei einem Updates des (Haupt/Eltern)Themes erhalten.

  3. Paul

    Ich habe eine Frage wenn ich das child theme aktivier möchte steht da Beschädigte Themes

    Die folgenden Themes sind installiert, aber nicht vollständig.
    Name Beschreibung
    Childtheme Das übergeordnete Theme fehlt. Bitte installiere das übergeordnete Theme „/wp-content/themes/suffice“, da du Child-Themes sonst nicht nutzen kannst.
    aber das Theme befindet sich in dem Ordner…was kann ich machen?

  4. Marco Linke

    Hi, du musst im Childtheme das Haupttheme korrekt benennen. Der Ordner muss genauso heißen, wie du dies unter “Template” angibst.

  5. Arne

    <!–?php das ist aber nicht richtig so

  6. Marco Linke

    Ich habe den Kommentar mal rausgenommen :-) Danke für den Hinweis …

  7. Webdesign Köln

    Hi Marco,
    schicke Website und toller Artikel. Würde nur auch die Möglichkeit ansprechen, das es diverse Plugins gibt die für einen ein Child Theme erstellen. Ist vermutlich für die meisten Anwender die einfachste und sicherste Variante.

    Auch solltest du die Textfarbe bei deinem “Kommentar abschicken”Button auf weiß stellen, der Text wird erst sichtbar wenn man den Button hovert.

    Liebe Grüße aus Köln,
    Kai

  8. Marco Linke

    Hi Kai, danke für das Feedback. Und ja, die Farbe hab ich bei der letzten Anpassung falsch eingestellt :-) Kennst du ein gutes Plugin für Childthemes?

Einen Kommentar abschicken

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

Neue Themes

Neu: Scroll-Effekte, WooCommerce-Module u.v.m.

Galerie

Mehr verkaufen

Workshops, Academy, Magazin, Masterclass

Starten

Geschenkt

Handbuch WordPress,
 Workshop SEO & Marketing

Download