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: http://www.bilderundmehr.eu
Description: Child Theme für meine Website
Author: Ich hab’s geschrieben
Author URI: http://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.

 

19 Gedanken zu „WordPress – Child Theme anlegen“

  1. 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

    Antworten
    • 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

      Antworten
  2. 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

    Antworten
  3. 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.

    Antworten
  4. 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

    Antworten
  5. 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' );

    Antworten
  6. 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

    Antworten
    • 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.

      Antworten
  7. 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

    Antworten
    • 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.

      Antworten
  8. 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.

    Antworten
  9. Pingback: Homepage
  10. Guten Tag,
    ich würde gerne bei einigen Themes von ThemeZee (habe eine Lifetime Lizenz erworben) die Textfelder transparent machen, damit man das Hintergrundbild besser sieht, bzw. nicht immer dieses weiße Feld zu sehen ist. Angeregt wurde ich durch die Webseite von Michael Sens (https://www.michael-sens.de/)
    Im Editor habe ich nichts ändern können.
    ThemeZee bietet im Customizer ein “Zusätzliches CSS” an. Muss ich an an dieser Stelle etwas ( .post { background-color: rgba(255, 255, 255, 0.75);} ) eingeben?
    Was ist, wenn dort von mir schon ein anderes CSS (Veränderung der Titelschriftfarbe) eingeben wurde. Muss ich nur einmal Enter drücken und dann den zweiten CSS-Code eingeben?

    Antworten
    • Auf der angegeben Seite ist es wie folgt gelöst:

      .bd-containereffect-6 {
      background-color: rgba(255,255,255,0.25);
      }

      Ich kenne das Theme selber nicht, aber nach einer kurzen Prüfung denke ich, dass diese Zeilen wahrscheinlich in den Bereich zusätzliches CSS eingetragen werden müssen.

      Antworten
      • Danke, die Antwort kam ja fix!
        Ich habe es mal sofort getestet und das CSS eingegeben. Es hat sich leider nichts getan.
        Michael Sens betreibt seine Seite nicht selber und konnte mir deshalb die Frage nach der Transparenz nicht beantworten.
        Seit gestern versuche ich das Problem im Theme Editor zu lösen, aber leider ohne Erfolg.
        Ich bin zwar ein wenig kreativ und bemüht, aber CSS überfordert mich. Mich auch noch in dem Bereich weiterzubilden, würde ich zeitlich und geistig nicht schaffen. Darum schaue ich mich auch nach entsprechenden Plugins um, die mir weiterhelfen könnten, wie beispielsweise YellowPencil. Kostet leider aber auch viel Zeit und Geld.

        Antworten
          • Danke für das Angebot.
            Ich teste auf Subdomains verschiedene Themes und Plugins aus und erstelle darauf auch Musterseiten. Die sind allesamt passwortgeschützt. Will halt bei der Gestaltung von Webseiten breit aufgestellt sein.

Schreibe einen Kommentar