Ein Theme um einen “Custom CSS” Bereich im Customizer erweitern

In den letzten Artikeln wurden verschiedene Tipps gezeigt, wie man mit Hilfe eines Child-Themes sehr einfach ein Theme anpassen kann. Wenn man selbst ein solches Theme programmiert und sich mit Code auskennt, kann man alle Änderungen direkt in den Dateien vornehmen. Aber manchmal möchte man es den Nutzern eines Themes auch ermöglichen, selbst kleinere Änderungen am Theme vorzunehmen. Früher wurde hierfür eine “Theme-Options” Seite verwendet, auf der es verschiedene Einstellungen gab.

Bereits mit WordPress 3.4 wurde aber eine modernere Alternative hierzu eingeführt: Der Customizer. Dieser wurde im Laufe der letzten Versionen durch viele neue Standardfunktionen erweitert. In der nächsten WordPress Version 4.5 wird mit dem Site-Logo eine weitere Funktion hinzukommen. Ich möchte euch heute zeigen, wie ihr selbst den Customizer um eigene Funktionen erweitern könnt.

Einen “Custom CSS” Bereich erstellen

Viele Theme enthalten die Möglichkeit, eigenen CSS Code in einer Textbox einzufügen. Hierzu wird entweder ein Plugin verwendet oder aber eine eigene Seite unter “Design”. Viel besser ist eine solche Möglichkeit aber im Customizer aufgehoben, da der Nutzer hierdurch sogar gleich die Änderungen live sehen kann, noch bevor er sie speichert. Wie das genau umgesetzt werden kann wird als ein Beispiel in der sehr umfangreichen Dokumentation zur Customizer API beschrieben. Ich möchte es für euch kurz zusammenfassen.

1. Ein “Setting” definieren

Zuerst einmal müssen wir ein neues Setting definieren. Dies tun wir innerhalb einer Callback-Funktion, die wir in der Action customize_register ausführen:

function twentyfifteen_customized_setting_custom_css( $wp_customize ) {
	$wp_customize->add_setting( 'custom_theme_css', array(
		'type' => 'theme_mod',
	) );
}
add_action( 'customize_register', 'twentyfifteen_customized_setting_custom_css' );

Das Setting benötigt eine eindeutige ID, sowie ein Array von Parametern. Hierbei ist vor allem der type Parameter wichtig. Dieser kann entweder option sein oder aber theme_mod. Im ersten Fall würde das Setting in der Tabelle wp_options gespeichert werden. Es wäre somit in jedem Theme zur Anwendung kommen. Für unser Child-Theme ist also der zweite Wert besser, der dann nur im aktiven Theme gilt, denn jedes Theme braucht vermutlich unterschiedliches Custom CSS.

2. Ein “Control” definieren

Nachdem wir ein Setting definiert haben, müssen wir nun dem Customizer mitteilen, welches UI-Element für die Anzeige verwendet wird. Hierzu verwenden wir Controls. Unsere Definition sieht dabei wie folgt aus:

$wp_customize->add_control( 'custom_theme_css', array(
	'label' => __( 'Custom Theme CSS', 'twentyfifteen-customized' ),
	'type' => 'textarea',
	'section' => 'custom_css',
) );

Als type können wir die bekannten Formular-Tags einsetzen oder aber die neuen Typen des Input-Tags, wie beispielsweise email, url, tel, usw. Zusätzlichen definieren wir noch eine “Section”, in der das “Control” angezeigt werden soll.

3. Eine “Section” definieren

Damit alles im Customizer angezeigt wird, müssen wir zuletzt eine Section definieren (sofern wir keine bestehende erweitern):

$wp_customize->add_section( 'custom_css', array(
	'title' => __( 'Custom CSS', 'twentyfifteen-customized' ),
	'description' => __( 'Add custom CSS here', 'twentyfifteen-customized' ),
	'priority' => 160,
	'capability' => 'edit_theme_options',
) );

Der Parameter priority gibt an, an welcher Stelle im Customizer die neue Section erscheinen soll. Die Standard-Sections haben Prioritäten zwischen 20 und 120. Wählt man also einen Wert in diesem Bereich, erscheint die neue Section an der entsprechenden Stelle. Mit dem von uns gewählten Wert von 160 (Standardwert), erscheint sie am Ende. Über den Parameter capability können wir festlegen, welche Berechtigung ein Nutzer haben muss, um die Einstellung zu verändern. Wollen wir z.B. nur Administratoren das Ändern des Custom CSS erlauben, könnten wir hier die Capability manage_options verwenden.

Ergebnis

Der gesamte Code aus den vorherigen Schritten sollte nun wie folgt aussehen und in die functions.php Datei kopiert werden:

function twentyfifteen_customized_setting_custom_css( $wp_customize ) {
	$wp_customize->add_setting( 'custom_theme_css', array(
		'type' => 'theme_mod',
	) );
	$wp_customize->add_control( 'custom_theme_css', array(
		'label' => __( 'Custom Theme CSS', 'twentyfifteen-customized' ),
		'type' => 'textarea',
		'section' => 'custom_css',
	) );
	$wp_customize->add_section( 'custom_css', array(
		'title' => __( 'Custom CSS', 'twentyfifteen-customized' ),
		'description' => __( 'Add custom CSS here', 'twentyfifteen-customized' ),
		'priority' => 160,
		'capability' => 'edit_theme_options',
	) );
}
add_action( 'customize_register', 'twentyfifteen_customized_setting_custom_css' );

Ist alles richtig eingestellt solltet ihr nun im Customizer die neue Section mit der Textarea für das Custom CSS sehen:

customizer-custom-css

Das neue Setting verwenden

Für alle die dachte wir wären schon fertig: Haben wir nicht etwas Wichtiges vergessen? Selbstverständlich! Nur weil wir ein neues Setting haben, hat diese ja noch keinen Einfluss auf das Theme. Wir müssen sie erst einmal ausgeben, damit sie auch zur Anwendung kommt.

Im Falle eines Custom CSS Setting ist der einfachste Weg der Integration eine Ausgabe im Header der Seite. Dies ist auch bei wenig CSS Code eine sehr performante Variante. Die Ausgabe ist hierbei sehr einfach über eine Callback-Funktion auf die Action wp_head zu lösen:

function twentyfifteen_customized_custom_css_output() {
	echo '<style type="text/css" id="custom-theme-css">' .
	        get_theme_mod( 'custom_theme_css', '' ) .
	     '</style>';
}
add_action( 'wp_head', 'twentyfifteen_customized_custom_css_output');

Nun können wir im Customizer unseren benutzerdefinierten CSS Code eingeben und dieser wird auch direkt live in der Vorschau angewendet:

customizer-custom-css-included

Fazit

Wir ihr sehen konntet, ist es mit der Customizer API sehr einfach, ein Child-Theme um Optionen zu erweitern. Hiermit könnt ihr den Nutzern die Anpassung ganz ohne Eingriffe in die Dateien des Themes ermöglichen. Gerade für Nutzer, die es sich nicht zutrauen, per FTP auf den Quellcode des Theme zuzugreifen, ist das eine echte Hilfe.

Ich hoffe euch hat dieser Beitrag wieder gefallen. Selbstverständlich ich euch den Code zu diesem Beitrag wieder in einem GIST zum bereitgestellt. Eventuell gehe ich nächste Woche noch auf ein paar erweiterte Optionen der Customizer API ein. Oder aber auf ein anderes spannendes Thema rund um Themes.

Veröffentlicht von

Bernhard ist fest angestellter Webentwickler, entwickelt in seiner Freizeit Plugin, schreibt in seinem Blog über WordPress und andere Themen, treibt sich gerne bei den WP Meetups in Berlin und Potsdam herum und läuft nach Feierabend den ein oder anderen Halbmarathon.

2 Kommentare » Schreibe einen Kommentar

  1. Hallo Bernhard,
    der Beitrag ist wirklich ganz toll und das Beste: Nach dem Reinkopieren in die functions.php musste ich nur noch den Theme-Namen ändern und schon lief alles ganz reibungslos.
    Natürlich habe ich es erst auf dem Localhost ausprobiert, aber bei nächster Gelegenheit werde ich das auch in die “echte” Side übernehmen.

    Gehe ich aber recht in der Annahme, dass die ganze Implemantation hinfällig ist, wenn ein Theme-update kommt? Dann werde ich auch in Zukunft nicht um einen CSS-Editor herumkommen.

    Viele Grüße
    Ludwig

    • Hallo Ludwig,

      in welche functions.php Datei hast du es denn kopiert? Wenn du den Code in die Datei des Child-Theme kopiert hast, dann geht natürlich beim nächsten Update des Parent-Themes nichts verloren. Im GIST am Ende des Artikels findest du ja ein Beispiel für ein solches Child-Theme.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.