• +49 2234 435 1486
  • info@bilderundmehr.eu

WordPress – Child Theme anlegen

WordPress – Child Theme anlegen

Auf mehrfache Anfrage hin, hier die Beschreibung wie ein WordPress Child Theme angelegt wird. Was brauchen wir um ein funktionsfähiges Child Theme zu erstellen?

Eigentlich nicht sehr viel:

  • Einen FTP Zugang um das Child Theme zu übertragen
  • 3 Dateien (style.css, functions-php, screenshot.png)
  • Ein WordPress Basis Theme das angepasst werden soll

Und warum das Ganze? Weil Änderungen die an einem original Theme gemacht werden, sonst bei einem Update alle überschrieben werden und somit verloren gehen. Dabei spielt es keine Rolle, ob Sie nur ein paar Anpassungen an der style.css Datei, oder aufwendige  Änderungen an beispielsweise der header.php oder page.php vorgenommen haben. In den Child Theme Ordner, können und sollten Sie alle geänderten Dateien sicher vor Updates speichern und ablegen. Bitte achten Sie darauf, dass Sie ggf. die Ordnerstruktur des Basis Theme übernehmen. Sollten also Dateien in Unterordnern geändert werden, müssen diese im Child in einem gleichnamigen Unterordner abgelegt werden.

Datei eins, die style.css

Was muss in der Datei stehen? Eigentlich “muss” da nicht sehr viel stehen, aber ohne diese Datei wird das Child Theme nicht erkannt und verwendet. Hier einmal ein Muster:

/*
Theme Name: Child
Theme URI: https://www.bilderundmehr.eu
Description: Child Theme für meine Website
Author: Ich hab’s geschrieben
Author URI: https://www.bilderundmehr.eu
Template: BasisTheme
Version: 1.00.0415
Tags: typographie, style elements, background, colors, changes, child
*/

  • /* & */ Kennzeichnen der Bereiche von Beschreibungen. In diesem Fall die des Theme.
  • Theme Name: Hier können Sie Ihrem Theme einen Namen geben.
  • Theme URI: Die Webadresse des Theme.
  • Description: Die Beschreibung des Theme. Sie kann durchaus länger sein, darf aber keine Zeilenumbrüche enthalten.
  • Author: Wer hat die Datei geschrieben?
  • Author URI: Wo finde ich ggf. den Author? (Keine “muss” Angabe, die Zeile kann auch gelöscht werden)
  • Template: Hier “muss” der Ordnername des Basis Theme stehen (z.B. twentyeleven, twentyfifteen, usw.) Nicht mehr und nicht weniger!
  • Version: Welchen Versions-Stand hat Ihre Datei

Diese Datei kann zum Beispiel in einem Editor erstellt werden und dann unter dem Namen “style.css” abgespeichert werden.

Datei zwei, die functions.php

Auch diese Datei ist ein “muss” mit wenig vorgeschriebenem Inhalt. Seit dem Wegfall der “@import url (‘/style.css’)” enthält dies Datei als einzige Vorgabe (siehe auch WordPress Codex) den Hinweis darauf, dass die style.css Datei des Child geladen werden soll. Der Mindestinhalt sieht somit auch hier recht bescheiden aus:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() . '/style.css' );
}

Natürlich kann auch diese Datei einfach mit einem Editor erstellt und unter dem Namen “functions.php” abgespeichert werden.

Achtung: Funktionen oder Funktion-Namen, die im der Basis Datei vorhanden sind, dürfen nicht noch einmal in der Child Datei stehen, da sind sonst doppelt aufgerufen werden und es somit zu einer Fehlermeldung kommt.

Datei drei, die screenshot.png

Die Datei “screeshot.png” ist mehr oder weniger nur für die Optik. Sie hat keine echte Funktion, sieht aber im Admin-Bereich “Themes” einfach schöner aus. Fehlt Sie, ist nur ein leeres Feld zu sehen. Nach der Fertigstellung von Websites, lege ich meistens einen echten Screenshot an und speichere diesen als “screenshot.png” ab.

Child-Theme fertig? Noch nicht ganz …

Ja, eigentlich schon. Alle drei Dateien müssen nun in einen Ordner, der Name ist frei wählbar, per FTP als Unterordner Ihrer Theme Ordner der WordPress Installation übertragen werden. Wo findet man Ihn? Im Regelfall liegt der Theme Ordner hier: /wp-content/themes/ – Fertiges Muster als ZIP Datei “Muster Child Theme” laden.


Wenn Sie alles richtig gemacht haben, müsste der Bereich “Design/Themes” in Ihrem Backend wie folgt aussehen (vorher/nachher):


Kompliziert und zu aufwendig?

Das ist Ihnen immer noch alles zu kompliziert und zu aufwendig? Kein Problem, für eine Pauschale von nur 19€ inkl. MwSt. richten wir ein Basis Child-Theme für Sie ein. Natürlich führen wir nach Absprache auch alle weiteren gewünschten und erforderlichen Anpassungen an dem Neuen oder Ihrem bereits vorhandenen Theme aus.

Fragen Sie uns einfach.

 

Nächstes Projekt anzeigen

BvW_DE
BvW_DE

14 Gedanken zu „WordPress – Child Theme anlegen

Hintergrundbilder und transparente Textfelder kombinierenGeschrieben am  6:25 am - Jun 6, 2015

[…] CSS oder oder anderen Dateien vornehmen, stellen Sie sicher, dass Sie alle Änderungen in einem Child Theme anlegen. Ohne dies, gehen bei einem Update Ihres Theme, alle Änderungen und Anpassungen […]

Helmut KrassGeschrieben am  2:39 pm - Aug 25, 2015

Hallo,

ich möchte ein Child Theme anlegen. Basis Theme: Twenty Thirteen.
Die Dateien style.css und die functions.php habe ich m.E. richtig angelegt.
Als nächstes müsste ich jetzt diese beiden Dateien per FTP-Upload in den Unterordner /wp-content/themes/ meines Theme Ordners meiner
WordPress Installation übertragen. Diesen Ordner kann ich nicht finden.

Auch finde ich im Dashborad keinen Design“ – „Editor” um die styles.css editieren zu können.

Vielen Dank für die Hilfe im Voraus.

Helmut Krass

    BvW_DE

    BvW_DEGeschrieben am  9:35 pm - Aug 25, 2015

    Hallo auch,

    für dein Child muss ein neuer Ordner im Ordner “wp-content/themes” angelegt werden. Er wird nicht vom Theme oder WP automatisch angelegt. Der Editor wird je nach Art und Version bzw. Einstellung nicht angezeigt. Du kannst die style.css Datei aber auch offline bearbeiten und dann per FTP in dein Child-Order kopieren.

    Gruß aus dem Rheinland

    Benno van Walsem

Helmut KrassGeschrieben am  8:16 pm - Aug 29, 2015

Hallo Benno van Walsem,

vielen Dank für die Informationen. Zwischenzeitlich habe ich auf dem Server
des Providers one.com die Datei style.css (wie oben beschrieben) in einen neu angelegten Ordner Child unter wp-content > themes > twentythirteen angelegt.

Ebenso die functions.php mit folgendem Inhalt:

<?php
add_action( &aposwp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() . '/style.css' );
}
Leider bekomme ich hier folgende Fehlermeldung:

Parse error: syntax error, unexpected '', '' (T_CONSTANT_ENCAPSED_STRING), expecting '(' in /customers/f/7/a/haus-wellengleiter.de/httpd.www/wp-content/themes/twentythirteen/Child/functions.php on line 2

Was habe ich falsch gemacht? Der Provider one.com kann mir im Chat nicht weiterhelfen.

Haben Sie eine Lösung? Vielen Dank für die Hilfe im Voraus.

Mit besten Grüßen

Helmut Krass

BvW_DE

BvW_DEGeschrieben am  5:54 am - Aug 30, 2015

Da hat sich ein Fehler in Zeile 2 der Beschreibung (bereits korrigiert) eingeschlichen:
add_action( &aposwp_enqueue_scripts’, ‘theme_enqueue_styles’ );

Richtig muss es heißen:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Habe das in der Beschreibung angepasst und die Daten in der Zip-Datei enthalten den Fehler nicht.

Helmut KrassGeschrieben am  7:38 am - Aug 30, 2015

Hallo Benno van Walsem,

das Problem ist immer noch vorhanden. Ich habe als functions.php folgende Daten hochgeladen:

<?php
add_action( ‚wp_enqueue_scripts‘, ‚theme_enqueue_styles‘ );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() . '/style.css' );
}
Wenn ich mir die Datei anschauen will, erhalte ich folgende Fehlermeldung:

Fatal error: Call to undefined function add_action() in /customers/f/7/a/haus-wellengleiter.de/httpd.www/wp-content/themes/twentythirteen/Child/functions.php on line 2

Ist der 2. Zeile immer noch ein Fehler?

Beste Grüße

Helmut Krass

BvW_DE

BvW_DEGeschrieben am  8:22 am - Aug 30, 2015

Jetzt hat der Editor die Satzzeichen ausgetauscht und die falschen werden von PHP nicht verstanden.

Satzzeichen vertauscht: add_action( ‚wp_enqueue_scripts‘, ‚theme_enqueue_styles‘ );

Richtige Satzzeichen: add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

chrisGeschrieben am  2:54 pm - Dez 2, 2015

Zunächst einmal ganz herzlichen Dank für den super Artikel. Der ist sehr hilfreich und gehört ab sofort in mein Stamm-Tutorial-Archiv!

Ich habe noch eine Frage zu folgendem Hinweis oben im Text:
“Achtung: Funktionen oder Funktion-Namen, die im der Basis Datei vorhanden sind, dürfen nicht noch einmal in der Child Datei stehen, da sind sonst doppelt aufgerufen werden und es somit zu einer Fehlermeldung kommt.”

Es stehen doch häufig ganze Funktionsblöcke in PHP-Dateien. Wie kann ich denn Doppelungen vermeiden und herausfinden, was z.B. vom jeweiligen Block der original-functions.php in die des Child-Theme gehört, ohne Syntax-Fehler zu produzieren, z.B. Klammern zu vergessen oder Funktionen auseinander zu reissen?

Hier ist ein Code-Beispiel aus der function.php des Original-Template smartline-lite:
Z i e l : nur die “Frontpage Thumbnail Sizes” sollen geändert, also der Code in die functions.php meines childtheme geschrieben werden.

“// Add custom Image Sizes
add_action( ‘after_setup_theme’, ‘smartline_add_image_sizes’ );

function smartline_add_image_sizes() {

// Add Custom Header Image Size
add_image_size( ‘custom_header_image’, 1340, 250, true);

// Add Featured Image Size
add_image_size( ‘featured_image’, 300, 200, true);

// Add Slider Image Size
add_image_size( ‘slider_image’, 880, 350, true);

// Add Frontpage Thumbnail Sizes
add_image_size( ‘category_posts_wide_thumb’, 600, 240, true);
add_image_size( ‘category_posts_small_thumb’, 90, 90, true);
add_image_size( ‘category_posts_single’, 880, 260, true);

// Add Widget Post Thumbnail Size
add_image_size( ‘widget_post_thumb’, 75, 75, true);
} ”

– Was muss ich in die functions.php des childtheme übernehmen?
– Was wäre eine Doppelung?

Ich bin sehr gespannt auf deine Antwort.
chris

    BvW_DE

    BvW_DEGeschrieben am  5:18 pm - Dez 2, 2015

    Hallo auch, in die funktions.php kommen nur Anweisungen die “neu” sind, den Rest holt sich das Child aus dem Original. Um welches Theme handelt es sich denn? Angaben von Bildgrößen sind in der funktions.php eher selten.

KarstenGeschrieben am  10:58 am - Feb 3, 2016

Hallo
Ich muss mich auch gerade noch einmal mit dem Thema Child Theme beschäftigen. Für ein Projekt nutze ich das Twenty Thirteen Theme. Wenn ich das Child Theme aktiviere mit der style.css und functions.php zerhaut es mir die Seite. Gefüllt habe ich beide Dateien mit dem oben genannten Codes. Nach Aktivierung des Child Themes wird der originale Header wieder eingeblendet. Der Login funktioniert nicht. Ale anderen farblichen Elemente des original Themes werden nicht geladen, alle Links und Menuelemente kleben am linken Rand. Ergo, da wird nichts aus den original Dateien geladen. Woran kann das eventuell liegen?

Grüße
Karsten

    BvW_DE

    BvW_DEGeschrieben am  7:25 am - Feb 4, 2016

    Hallo Karsten,
    wenn die Einstellungen nicht geladen werden, deutet es darauf hin, dass bereits Änderungen an der style.css Datei oder anderen Dateien vorgenommen wurden. Einstellen die in dem Bereich “Design/Anpassen” im original Theme vorgenommen wurden, werden nicht übernommen. Die Daten werden in der Datenbank dem Original zugewiesen und müssen erneut angepasst werden. En Child Theme sollte immer vor den ersten Anpassungen eingerichtet werden. Um mehr zu sagen, müsste ich die Seite sehen.

KarstenGeschrieben am  8:32 am - Feb 4, 2016

Gut hier der Link mit aktiviertem Child Theme und den obigen Code. Ich habe das Theme neu installiert gehabt, hätte wohl auch ne neue Datenbank anlegen müssen, gab jedenfalls keine Änderung.
Au einer anderen Webseite habe ich diesen Code gesehen und probiert:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}

Da sah es zwar besser aus aber in beiden fällen lässt sich zumindest nichts in die Mediathek hochladen. Zu mehr Tests bin ich noch nicht gekommen.

HomepageGeschrieben am  2:40 pm - Sep 13, 2016

… [Trackback]

[…] Informations on that Topic: bilderundmehr.eu/wordpress-child-theme-anlegen/ […]

Schreib eine Nachricht

20 − 1 =