WordPress – Eigenes CSS & Google Analytics via ChildTheme aufnehmen

Wer mit WordPress arbeitet, kommt bei dem Einsatz von Themes unter Umständen nicht an der Erstellung von Child Themes vorbei. Die Erstellung kann zum Beispiel das vorhandene CSS erweitern und/oder überschreiben und JavaScript oder PHP Funktionen einbinden. Natürlich ist es möglich jedes Theme auch an sich zu verändern, ratsam ist es jedhoch nicht. Gerade bei Themes die oft aktualisiert werden, überschreibt man auf diese Weise dann den individuellen Quellcode. Abhilfe schaffen Child Themes.

Im Beispiel verwende ich das „Customizr“ Theme und möchte dazu ein Child Theme erstellen.

Im Ordner „wp-content/themes/“ muss dazu der neue Unterordner „customizr-child“ angelegt werden. Darauf muss die style.css in dem zuvor neu erstellten Ordner angepasst werden.

Die style.css (Child Theme)

/*
Theme Name: Customizr Child Theme
Theme URI: https://www.deineSeite.de
Description: Customizr Child Theme
Version: 1
Author: Dein Name
Author URI: https://www.deineSeite.de
Tags: Deine, eigenen, Tags
Template: customizr
Text Domain:  customizrchild
*/

Wichtig ist hierbei die Zuordnung zu dem übergeordneten Theme via „Template: customizr“.

Wer faul ist, kopiert gleich noch die screenshot.png oder erstellt selbige nach seinen Wünschen neu. Nach dem Upload kann das Theme dann ausgewählt werden. Das ergänzte CSS wird hierbei schon berücksichtigt.

Solltest du auch via JavaScript im Header der Seite einen Codeschnipsel einbinden wollen, so geht das über die Datei functions.php. Diese kannst du auch in deinem neu erstellten Theme Ordner anlegen und folgenden Inhalt ergänzen.

Die functions.php (Child Theme)

add_action('wp_head', 'gtag_wp_head');

function gtag_wp_head(){
?>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
</script>
<?php
}

Dadurch wird deine Seite, bzw. der Head Bereich der Seite und die bestehende WordPress Funktion, um das benötigte Script ergänzt.

Möchtest du jetzt weitere Dateien verändern, kannst du sie aus dem übergeordneten Theme kopieren. Bspw. für einen individuellen Footer, eine Sidebar oder wonach auch immer dir ist. Und das schöne! – Du bist jetzt „updatesicher“ :-)

Verfasst am 13.04.21, durch Jens.