• Zur Hauptnavigation springen
  • Skip to main content
  • Zur Hauptsidebar springen
  • Zur Fußzeile springen
Thx Cool

Thx Cool

  • Softwareentwicklung
  • SEO
  • Content Marketing
  • Hosting
  • Beratung
  • Bibliothek
    • WordPress
    • Genesis
    • MacOS
    • Linux
    • Python
    • Magento
    • Sicherheit
    • SEO

WordPress Theme anpassen

3. November 2018 von Kai Hagemeister

Du hast WordPress aufgesetzt und möchtest ein bestehendes WordPress Theme anpassen? Wenn es um die Anpassung von WordPress Themes geht, erlebe ich regelmäßig fehlerhafte Umsetzungen, die gerade auch oft von vermeintlichen Fachleuten angerichtet wurden. In diesem Beitrag werde ich Dir ein paar Grundsätze, die in jedem Fall beachtet werden sollten, aufzeigen, wenn Du ein bestehendes WordPress Theme nach Deinen Wünschen anpassen möchtest.

Der wohl wichtigste Grundsatz ist die Erstellung eines so genannten Child-Themes. Leider ist es die absolute Ausnahme, dass bei der Anpassung eines Themes ein Child-Theme erstellt wird. Dabei ist es der wichtigste Schritt überhaupt!

Child Theme in WordPress erstellen

Der erste Schritt bei der Anpassung eines Themes in WordPress sollte immer die Erstellung eines Child Themes sein. So ein Child-Theme ist ein Theme, das alle Eigenschaften des Parent-Themes erbt. Mit anderen Worten, erstellst Du ein Theme, das komplett dem Theme entspricht, welches Du anpassen möchtest. Du magst Dich jetzt fragen, wozu das gut sein soll. Der Vorteil besteht darin, dass alle Änderungen, die Du in dem erstellten Child-Theme vornehmen wirst, das Parent-Theme überschreibt.

Du veränderst das Theme also nicht direkt, sondern passt es in einem eigens angelegten Theme an, dass alle Eigenschaften des anzupassenden Themes erbt.

Die Vorteile liegen auf der Hand. So kannst Du beispielsweise Dein Theme aktualisieren, ohne dass Änderungen verloren gehen. Auch kannst Du jede Änderung leicht rückgängig machen, weil das eigentliche Theme am Ende nur überschrieben wird. Löschst Du die Änderung in Deinem Child-Theme, erhälst Du wieder die Werte des Themes, das Du angepasst hast.

Wege zur Erstellung eines Child Themes

Erstellung eines Child Themes durch Import im Stylesheet

Traditionell war es sehr einfach ein Child-Theme zu erstellen. Man legte auf Dateiebene, im Ordner Themes, einfach ein neues Verzeichnis mit dem gewünschten Namen an. In der Regel eignet sich dafür die Bezeichnung des Themes, das überschrieben werden soll, gefolgt von “child”.

In diesem neu angelegten Verzeichnis erstellte man eine CSS-Datei. Auf einem Linux-basierten System reicht dafür der Aufruf:
touch style.css.
Du kannst auch jeden Editor dafür verwenden. Wenn Du cool sein willst, nutzt Du vim ;-):
vim style.css.

In diese Datei schrieb man dann folgende Zeilen:


/*
Theme Name: Name Ihres Childthemes
Description: Beschreibung für Ihr Childtheme
Author: Ihr Name
Author URI: Ihre Webadresse
Template: Bezeichnung des Parenttheme-Ordners
Version: Versionsnummer, beispielsweise 1.0
Tags:
*/
@import url("../Ordner-Parent-Theme/style.css");

Unter Theme Name trägst Du die Bezeichnung für Dein Childtheme ein. In der Regel ist das die Bezeichnung des Parent gefolgt von child. Die Bezeichnung entspricht dem vergebenen Verzeichnis, das Du für Dein Child-Theme gewählt hast. In WordPress findest Du diese Bezeichnung dann unter Desig als Namen für Dein Theme.

Unter Description kannst Du eine Beschreibung für Dein Theme vergeben.

Autor gibt den Autoren des Themes an. In diesem Falle Dich.

Author URI die Webadresse des Autors.

Unter Template musst Du die genaue Bezeichnung des Themeordners angeben, von dem Du die Werte erben willst.

Die darauf folgende Versionsnummer bezeichnet die Version Deines Themes.

Zuletzt musst Du noch die CSS-Datei des Themes, von dem Du erben willst, also dem Parent-Theme, importieren. Die Anweisung url(“../Ordner-Parent-Theme/style.css”) gibt den relativen Pfad zum style.css des Parent an. .. bezeichnet das darüberliegende Verzeichnis.

Im Prinzip bist Du jetzt schon fertig und kannst das Child-Theme in WordPress aktivieren. Es wäre dann exakt wie das Parent-Theme. Allerdings fehlt noch ein schönes Bild. Es kommt so etwas traurig daher. Möchtest Du das ändern? Dann erstelle für Dein Child-Theme ein Bild, 600 x 450px und speichere es als png im Verzeichnis Deines Child-Themes. Das Bild wird dann unter Designs angezeigt.

Möchtest Du nun das Theme anpassen, kannst Du die Dateien, die Du anpassen willst vom Parent-Theme in den Ordner Deines Child-Themes kopieren und nach Deinen Wünschen anpassen. Änderungen im CSS kannst Du direkt in Deiner bereits angelegten style.css in Deinem Child ändern.

Du solltest darauf achten, dass jetzt 2 Themes in Deinem Design genutzt werden. Das bedeutet, dass Du das Parent-Theme selbstverständlich nicht löschen darfst, auch wenn es in Deinem Design-Verzeichnis unter WordPress nicht auf aktiv steht!

Einbindung der styles des Parents über die functions.php

In den vorherigen Ausführungen ist bereits deutlich geworden, dass die Art der zuvor beschriebenen Einbindung zwar möglich ist, jedoch veraltet ist. Der WordPress codex empfiehlt mittlerweile die Einbindung mittels der functions.php.

Die Erstellung eines Child-Themes, wie es der WordPress Codex aktuell empfiehlt, wird nachfolgend beschrieben. Falls Dir das zu kompliziert erscheint, kannst Du Dich jederzeit an mich wenden. Ich erstelle nicht nur Dein Child-Theme für einen geringen Betrag, sondern passe bestehende WordPress-Themes auch gerne an Deine Bedürfnisse und Wünsche an.

Im ersten Schritt gehst Du wie zuvor beschrieben vor. Allerdings erstellst Du diesmal nicht nur das Verzeichnis für Dein Child-Theme und darin die style.css, sondern erstellst zusätzlich eine Datei namens functions.php im Verzeichnis Deines Child-Themes.

Wir gehen in diesem Beispiel einfach einmal davon aus, dass das WordPress-Theme, das Du anpassen möchtest, catchresponsive heißt. In dem Fall würdest Du folgend Dein Child-Theme auf Dateiebene anlegen. Du wechselst in das Verzeichnis wp-content/themes und gibst folgende Anweisungen ein (Linux):

mkdir catchresponsive-child
touch catchresponsive-child/style.css Catchresponsive-child/functions.php

Anschliessend öffnest Du die neu angelegte Datei style.css

vim catchresponsive-child/style.css

und schreibst folgende Zeilen hinein:


/*
 Theme Name:   catchresponsive-child
 Theme URI:    http://example.com/catchresponsive-child/
 Description:  Catchresponsive Child Theme
 Author:       Max Mustermann
 Author URI:   http://example.com
 Template:     catchresponive
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         responsive-layout, accessibility-ready
 Text Domain:  catchresponsive-child
*/

Bitte beachte insbesondere die Angabe hinter Template. Dort muss in jedem Fall die Bezeichnung des Parent-Themes stehen, das Du anpassen möchtest. Dass Du example anpassen solltest, versteht sich von selbst.

Bis zu diesem Punkt weicht diese Art der Einbindung kaum von der zuvor beschriebenen Art der Einbindung mittels @import-Anweisung ab. Der WordPress-Codex empfiehlt die Einbindung mittels @import-Anweisung nicht mehr, da es das Laden der style.css verzögert. Die korrekte Einbindung der Parent-Stylesheets sollte durch eine Funktion in der functions.php erfolgen.

get(‘Version’)
    );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
?>

Das Beispiel zeigt die Einbindung des Parent-Stylesheets, wenn sich alle CSS-Anweisungen in einer Datei befinden.

WordPress Theme anpassen lassen

Du möchtest die Arbeit gerne abgeben und Dein WordPress Theme durch mich anpassen lassen? Ich übernehme diese Arbeit gerne für Dich.

Kategorie: Wordpress Stichworte: Child-Theme, Wordpress

Über Kai Hagemeister

Studium der Biologie. Anschliessendes Studium der Informatik. Seit 2009 betreibe ich mit meiner Familie einen kleinen Hof in den Thüringer Bergen. Ein Blog begleitet unsere Arbeit auf dem Berghof.

Leser-Interaktionen

Kommentare

  1. Chris meint

    29. Dezember 2019 um 22:34

    Na, da ist Dir gegen Ende dann doch die Lust vergangen, genauer zu sein… 😉
    Ich bin hier über Deinen Beitrag “https://thx.cool/wordpress-theme-footer-aendern/” gelandet.
    Leider erübrigt sich dann am Ende die vollmundig angepriesene “selten schwierige Änderung” 😉
    Schade…

    Antworten
    • thx cool meint

      30. Dezember 2019 um 0:45

      Nichts ist schwierig, sobald man es kann… Wenn Du Hilfe benötigst, um es zu können, benötige ich eine ausführliche Schilderung, an welcher Stelle ich genauer werden sollte.

      Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Haupt-Sidebar

Bibliothek

  • Blog (4)
  • Linux (9)
  • MacOS (8)
    • Python (1)
  • Magento (5)
  • Netzwerk (2)
  • SEO (2)
  • Sicherheit (5)
  • Wordpress (16)
    • Genesis (5)

Neueste Beiträge

  • Pflanzenportal
  • B2B / B2C Shop
  • SIP deaktivieren
  • Firefox verbindet sich zu Cloudfront und Amazon
  • apsd Prozess unter MacOS deaktivieren

Lass Dir eine coole Webseite erstellen

THX bietet Dir alles was Du Dir für Deinen erfolgreichen Auftritt im Internet wünschst.

Kontakt aufnehmen
hosting

Lass Dir Deine coole Webseite von THX erstellen

Kontakt

Footer

Kontakt

  • Webseite
  • Email
  • Telephone

Navigation

  • Softwareentwicklung
  • SEO
  • Content Marketing
  • Hosting
  • Beratung
  • Blog

THX.cool

  • Impressum
  • Datenschutz
  • Cookie-Richtlinie (EU)

Newsletter

Copyright © 2025 Kai Hagemeister THX.cool

Cookie-Zustimmung verwalten
Wir verwenden Cookies, um unsere Website und unseren Service zu optimieren.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Verwalten von {vendor_count}-Lieferanten Lese mehr über diese Zwecke
Einstellungen anzeigen
{title} {title} {title}