Ein benutzerdefiniertes Einstellungsfeld für ein WordPress-Theme zu entwickeln, ist eine Aufgabe, die sich über Wochen hinziehen kann. Die WordPress Settings API erfordert das Schreiben einer Menge Boilerplate-Code: Registrierung, Felddarstellung, Validierung, Speicherung. Und wenn das Projekt brennt, ist es ein unvertretbarer Luxus, all dies von Grund auf neu zu schreiben.

Das Redux Framework löst dieses Problem radikal: Statt des manuellen Aufwands mit der Settings API beschreiben Sie die benötigten Felder in einer Konfigurationsdatei, und das Framework kümmert sich um alles Weitere, Darstellung, Validierung, Escaping, Import/Export und sogar dynamisches CSS. Auf WordPress.org hat das Plugin mehr als 32 Millionen Downloads und über eine Million aktive Installationen, und das ist keine Marketing-Inflation, sondern eine direkte Folge der Tatsache, dass Redux wirklich Wochen an Entwicklungszeit spart.

In dieser Anleitung: die schrittweise Einrichtung des Redux Framework von Grund auf bis zu einem funktionierenden Theme-Options-Panel, einschließlich Live-Demonstration im Customizer und der sicheren Verwendung gespeicherter Werte im Frontend.

💡 Kurzer Überblick:

• Redux Framework installieren: drei Wege zur Integration in ein WordPress-Projekt
• Framework einbinden und Konfigurationsdatei erstellen
• Panel-Argumente einrichten: Position im Menü, Customizer, Google Fonts
• Sektionen und Eingabefelder über die einheitliche Redux-API hinzufügen
• Gespeicherte Werte in Theme-Templates mit Fehlerschutz auslesen

Was das Redux Framework ist und warum Sie es brauchen

Das Redux Framework ist ein kostenloses Open-Source-Options-Framework für WordPress-Themes und Plugins. Es baut auf der standardmäßigen WordPress Settings API auf, abstrahiert deren Komplexität jedoch vollständig. Anstelle dutzender Aufrufe von register_setting, add_settings_field und settings_fields schreiben Sie ein deklaratives Array in PHP und erhalten ein voll funktionsfähiges, responsives Einstellungsfeld mit 49 Feldtypen zur Auswahl.

Wichtig: Nicht mit der JavaScript-Bibliothek Redux für State-Management verwechseln, das sind völlig unterschiedliche Produkte mit demselben Namen. Das WordPress-Framework erschien vor der JS-Bibliothek.

Wesentliche Funktionen, die Sie „out of the box" erhalten:

• 49 Feldtypen: von einfachem Text und Checkbox bis hin zu ACE Editor, Repeater, Google Maps, Block-Sorter und Bild-Slider;
• Automatische CSS-Ausgabe: für Typografie-, Farb-, Verlaufs- und Abstandsfelder, geben Sie einfach einen CSS-Selektor an und Redux generiert selbst ein Stylesheet mit Google Fonts;
• Customizer-Integration: dasselbe Argument customizer => true, und das gesamte Panel wird im WordPress Customizer mit Live-Vorschau dupliziert;
• Import/Export von Einstellungen: integriertes Werkzeug zum Übertragen der Konfiguration zwischen Websites;
• Compiler: ein Hook, der ausgelöst wird, wenn sich ein Feld mit dem Flag compile => true ändert, Sie können damit beispielsweise SCSS neu kompilieren;
• Validierung und Escaping: jeder Wert durchläuft eine dem Feldtyp entsprechende Bereinigung, ein Textfeld akzeptiert kein Array, ein numerisches filtert Zeichenketten heraus.

Seit 2024 entwickelt sich das Framework unter der Leitung von Team Updraft (David Anderson, Erfinder von UpdraftPlus). Aktuelle Version 4.5.11 (März 2026), volle Kompatibilität mit WordPress 7.0 und PHP 8.5. Das Projekt lebt auf redux.io, die Dokumentation auf der Redux-Dokumentationsseite.

Redux Framework installieren

Es gibt drei Wege, Redux zu einem Projekt hinzuzufügen. Die Wahl hängt von Ihrer Theme-Architektur und der geplanten Vertriebsart ab.

Als separates Plugin

Installieren Sie das Redux Framework aus dem WordPress.org-Verzeichnis als reguläres Plugin. Nach der Aktivierung erscheint das Options-Panel nicht, das Plugin stellt nur die API bereit. Sie beschreiben alle Einstellungen in einer Konfigurationsdatei innerhalb Ihres Themes.

Vorteile: Das Theme bleibt schlank (der Framework-Kern bläht das Archiv nicht auf); das Framework aktualisiert sich unabhängig über den standardmäßigen WordPress-Mechanismus.

Nachteile: Ihr Theme setzt das Vorhandensein eines Drittanbieter-Plugins voraus, der Nutzer muss es separat installieren und aktivieren; ohne das Plugin verschwindet das Einstellungsfeld, und Sie müssen einen sauberen Fallback im Theme-Code vorsehen.

Im Theme-Kern

Kopieren Sie den Ordner ReduxCore in Ihr Theme und binden Sie ihn in functions.php ein. Das Framework wird integraler Bestandteil des Themes, der Nutzer muss kein zusätzliches Plugin installieren.

Vorteile: Das Einstellungsfeld wirkt wie ein nativer Teil des Themes, der Nutzer installiert nichts Zusätzliches.

Nachteile: Die Größe des Theme-Archivs wächst um etwa 2 MB; jedes Framework-Update erfordert ein Theme-Update Ihrerseits; das Theme-Check-Plugin kann Warnungen ausgeben.

In einem abhängigen Theme-Plugin

Empfohlener Ansatz für Premium-Themes. Erstellen Sie ein separates Begleit-Plugin für Ihr Theme (darin lassen sich auch bequem Custom Post Types, Shortcodes, Widgets unterbringen) und betten Sie Redux darin ein. Fügen Sie in der functions.php des Themes eine Prüfung auf das Vorhandensein dieses Plugins über TGMPA oder einen ähnlichen Mechanismus hinzu.

Vorteile: saubere Architektur (Theme-Funktionalität ist von der Präsentation getrennt); das Framework bläht das Theme-Archiv nicht auf; Framework-Updates wirken sich nicht direkt auf den Theme-Code aus.

Nachteile: erfordert das Schreiben und Pflegen eines separaten Plugins; etwas höhere Einstiegshürde für andere Entwickler, die sich in das Projekt einarbeiten.

Die Redux-Konfiguration hängt nicht von der Installationsmethode ab, die weiteren Schritte sind für jede Variante identisch.

Allgemeine Konfiguration: das Framework einbinden

Suchen Sie im Redux-Framework-Plugin (oder im von der offiziellen Redux-Seite heruntergeladenen Archiv) den Ordner ReduxCore, er enthält den gesamten Kern.

Erstellen Sie in Ihrem Plugin (oder Theme) einen Ordner, zum Beispiel optionpanel, und kopieren Sie den Inhalt von ReduxCore hinein. Legen Sie daneben eine leere config.php-Datei an, in der wir alle Sektionen und Panel-Felder beschreiben werden.

Nun binden Sie das Framework ein. Fügen Sie in der Haupt-Plugin-Datei (oder der functions.php des Themes) Folgendes hinzu:

1
<?php
2
if ( ! class_exists( 'Redux' ) ) {
3
    require_once plugin_dir_path( __FILE__ ) . 'optionpanel/ReduxCore/framework.php';
4
}

Die class_exists-Prüfung verhindert einen fatalen Fehler, falls ein anderer Teil der Website Redux bereits geladen hat (etwa über ein separates Plugin). Fehlt das Framework, wird das Einstellungs-Panel schlicht nicht geladen, und die Website funktioniert weiter.

Danach können Sie mit dem Anlegen von Sektionen und Feldern fortfahren.

Das Options-Panel anlegen

Framework-Argumente

Legen Sie zunächst eine globale Variable an, die alle Einstellungen speichert, sie wird benötigt, um Werte in den Theme-Templates auszulesen:

1
$opt_name = 'mytheme_options';

Der Präfix ist verpflichtend, er verhindert Namenskonflikte mit anderen Plugins, die Redux nutzen. Bewährte Praxis: brandname_themename.

Nun stellen wir das Argumente-Array zusammen. Hier eine minimale, funktionsfähige Konfiguration:

1
$args = array(
2
    'opt_name'             => $opt_name,
3
    'display_name'         => 'Theme Settings',
4
    'display_version'      => '1.0.0',
5
    'menu_type'            => 'submenu',
6
    'allow_sub_menu'       => true,
7
    'menu_title'           => 'Theme Settings',
8
    'page_title'           => 'Theme Settings Panel',
9
    'page_parent'          => 'themes.php',
10
    'page_permissions'     => 'manage_options',
11
    'page_slug'            => 'theme_options',
12
    'dev_mode'             => false,
13
    'update_notice'        => false,
14
    'customizer'           => true,
15
    'save_defaults'        => true,
16
    'show_import_export'   => true,
17
    'async_typography'     => true,
18
    'admin_bar'            => true,
19
    'global_variable'      => $opt_name,
20
);
21
 
22
Redux::set_args( $opt_name, $args );

Aufschlüsselung der wichtigsten Argumente:

• menu_type: submenu, das Panel erscheint innerhalb des Menüpunkts „Design"; menu, separater Eintrag auf oberster Ebene im Admin;
• customizer: true aktiviert die Spiegelung aller Felder im WordPress-Customizer mit Live-Vorschau, der Nutzer sieht Änderungen vor dem Speichern;
• dev_mode: während der Entwicklung aktivieren (erweitertes Debugging, Demo-Import), aber vor dem Release unbedingt deaktivieren;
• update_notice: bei Themes und Plugins mit eingebettetem Redux immer false, Ihre Nutzer sollten keine Benachrichtigungen über Framework-Updates getrennt von Ihrem Produkt erhalten;
• show_import_export: fügt ein Werkzeug hinzu, um alle Einstellungen mit einem Klick zwischen Websites zu übertragen.

Die vollständige Liste mit über 40 Argumenten finden Sie im Leitfaden zu den Argumenten.

Sektionen und Felder hinzufügen

Eine Sektion ist eine logische Gruppe von Feldern (Tab auf dem Einstellungsbildschirm). Minimale Sektion:

1
Redux::set_section( $opt_name, array(
2
    'title'  => 'Site Header',
3
    'id'     => 'header_section',
4
    'icon'   => 'dashicons-heading',
5
    'fields' => array(
6
        array(
7
            'id'       => 'header_logo',
8
            'type'     => 'media',
9
            'title'    => 'Logo',
10
            'subtitle' => 'Upload logo image',
11
            'default'  => array( 'url' => get_template_directory_uri() . '/images/logo.png' ),
12
        ),
13
        array(
14
            'id'      => 'sticky_header',
15
            'type'    => 'switch',
16
            'title'   => 'Sticky Header',
17
            'default' => true,
18
        ),
19
    ),
20
) );

Sektions-Icons: Redux 4.x unterstützt die eingebauten WordPress-Dashicons (vollständige Liste auf developer.wordpress.org). Für eigene Icons nutzen Sie CSS-Klassen aus Ihrem Icon-Set (zum Beispiel Font Awesome).

Jedes Feld ist ein assoziatives Array mit den Pflichtschlüsseln id, type und title. Beispiele für häufig verwendete Typen:

1
// Select with search
2
array(
3
    'id'      => 'sidebar_layout',
4
    'type'    => 'select',
5
    'title'   => 'Sidebar Layout',
6
    'options' => array(
7
        'right' => 'Sidebar Right',
8
        'left'  => 'Sidebar Left',
9
        'none'  => 'No Sidebar',
10
    ),
11
    'default' => 'right',
12
),
13
 
14
// RGBA color picker
15
array(
16
    'id'      => 'accent_color',
17
    'type'    => 'color_rgba',
18
    'title'   => 'Accent Color',
19
    'default' => array(
20
        'color' => '#2271b1',
21
        'alpha' => 1,
22
    ),
23
),
24
 
25
// Typography with Google Fonts
26
array(
27
    'id'          => 'body_typography',
28
    'type'        => 'typography',
29
    'title'       => 'Text Font',
30
    'google'      => true,
31
    'font-backup' => true,
32
    'line-height' => true,
33
    'font-size'   => true,
34
    'default'     => array(
35
        'font-family' => 'Inter',
36
        'font-size'   => '16px',
37
    ),
38
),

Um eine Untersektion anzulegen, fügen Sie das Argument 'subsection' => true hinzu, das Feld erscheint dann als verschachtelter Tab innerhalb der übergeordneten Sektion.

Die Liste aller 49 Typen mit Konfigurationsbeispielen finden Sie im Abschnitt zu den Feldtypen in der Redux-Dokumentation.

Verwendung von Optionen im Theme

Redux speichert alle Werte in einer globalen Variable, derselben, die Sie in $opt_name angegeben haben. Um einen Wert in einem Template abzurufen, deklarieren Sie ihn zunächst als global. Eine direkte global-Deklaration außerhalb einer Funktion oder Action ist jedoch schlechte Praxis. Der korrekte Ansatz:

1
function mytheme_get_option( $option_id, $default = '' ) {
2
    global $mytheme_options;
3
    return isset( $mytheme_options[ $option_id ] ) ? $mytheme_options[ $option_id ] : $default;
4
}

Die Wrapper-Funktion erfüllt zwei Aufgaben: Sie verhindert den PHP-Hinweis „undefined index" beim Zugriff auf einen nicht vorhandenen Schlüssel und stellt einen Fallback-Wert bereit. Im Template sieht die Verwendung so aus:

1
$logo = mytheme_get_option( 'header_logo' );
2
if ( ! empty( $logo['url'] ) ) {
3
    echo '<img src="' . esc_url( $logo['url'] ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '">';
4
}

Ist das Einstellungspanel noch nicht konfiguriert (weil der Nutzer das Theme aktiviert, das abhängige Plugin aber nicht installiert hat), ist $mytheme_options ein leeres Array, und mytheme_get_option() gibt stillschweigend $default zurück, ohne eine Flut von Warnungen im debug.log.

Für dynamisches CSS nutzen Sie die eingebaute Fähigkeit von Redux, indem Sie das output-Argument in der Feldkonfiguration angeben:

1
array(
2
    'id'     => 'body_bg_color',
3
    'type'   => 'color',
4
    'title'  => 'Background Color',
5
    'output' => array( 'background-color' => 'body' ),
6
),

Redux generiert und bettet automatisch die CSS-Regel <style>body{background-color:#fff;}</style> ein, ohne eine einzige Zeile manuellen Code.

Der Installations- und Feldkonfigurationsprozess wird in diesem Video-Tutorial anschaulich gezeigt: vom Einbinden des Frameworks bis zur Erstellung des ersten Abschnitts mit Auswahlfeldern und Schaltern:

⁉️🤔 Häufig gestellte Fragen

Wie unterscheidet sich Redux Framework von Carbon Fields, ACF Options Pages und anderen Lösungen?

Redux bietet 49 Feldtypen „out of the box" (gegenüber ca. 25 bei Carbon Fields und ca. 30 bei ACF Pro) und fokussiert sich speziell auf Theme-Einstellungspanels, nicht auf Post-Meta-Felder. ACF Options Pages ist ein Add-on über der Meta-Feld-Engine, während Redux von Grund auf für Optionspanels konzipiert wurde: integrierter Import/Export, Compiler, Live-Vorschau im Customizer, dynamisches CSS mit Google Fonts. Carbon Fields ist vom Ansatz her ähnlicher, erfordert jedoch Composer und Namespaces, was in manchen Hosting-Umgebungen eine Hürde darstellt. Fazit: Wenn Sie bereits ACF für Meta-Felder einsetzen, greifen Sie zu ACF Options Pages, um nicht mehrere Systeme parallel zu betreiben; wenn Sie ein Theme von Grund auf neu entwickeln und ein leistungsfähiges Optionspanel benötigen, liefert Redux mehr Funktionen ohne Zusatzkosten.

Funktioniert Redux Framework mit Block-Themes (Full Site Editing)?

Ja, aber mit Einschränkungen. Redux gibt das Einstellungspanel über die klassische Admin-Oberfläche aus (Settings API), nicht über den Site-Editor. Für einen hybriden Ansatz, Block-Theme plus Redux-Panel für globale Einstellungen (Farben, Typografie, Analytics-Skripte), funktioniert die Kombination. Mit Version 4.5.11 ist eine direkte Integration mit theme.json nicht implementiert: Werte müssen in Templates über mytheme_get_option() ausgelesen und als CSS-Variablen eingebunden werden. Für eine reine FSE-Umgebung, in der alle Einstellungen im Site-Editor leben sollen, ist Redux überflüssig; für klassische und hybride Themes ist es eine der besten Optionen.

Was tun, wenn Redux mit einem anderen Plugin kollidiert, das dieselbe Bibliothek verwendet?

Dies ist ein bekanntes Problem der „doppelten Einbindung". Die Prüfung if ( ! class_exists( 'Redux' ) ) vor require_once stellt sicher, dass das Framework genau einmal geladen wird: WordPress führt PHP sequenziell aus, und das allererste require_once macht nachfolgende Aufrufe wirkungslos. Wenn sowohl Ihr Theme als auch ein Drittanbieter-Plugin Redux einbinden, lädt die Kopie, die zuerst initialisiert wurde, und die Panels beider Produkte funktionieren weiterhin. Bei einem deutlichen Unterschied in den Hauptversionen ist eine Inkompatibilität auf API-Ebene möglich, die durch ein Update der zurückliegenden Seite auf die aktuelle Version behoben wird.

Wird eine Lizenz benötigt, um Redux Framework in einem kommerziellen Theme zu verwenden?

Nein. Redux wird unter GPLv2 vertrieben, derselben Lizenz wie WordPress. Sie können das Framework frei in kommerzielle Themes und Plugins einbinden, auf ThemeForest verkaufen und über Ihre eigene Website vertreiben. Die einzige GPLv2-Einschränkung, dass abgeleitete Werke ebenfalls unter GPLv2 stehen müssen, bezieht sich auf den Quellcode, nicht auf den Inhalt der Endnutzer-Website. Redux Pro (zusätzliche Felder, erweiterter Customizer, Prioritäts-Support) ist ein separates kostenpflichtiges Produkt und für den Betrieb des Frameworks nicht erforderlich.

Was tun, wenn sich das Redux-Panel nach einem WordPress-Update nicht mehr öffnen lässt?

Szenario: Nach einem größeren WP-Update erscheint ein weißer Bildschirm auf der Theme-Einstellungsseite. Vorgehensweise: Erstens prüfen, ob Sie mindestens Redux-Version 4.5.11 verwenden (Kompatibilität mit WP 7.0). Zweitens für eine Minute 'dev_mode' => true aktivieren und die PHP-Fehlerausgabe auf dem Einstellungsbildschirm ansehen, Redux zeigt im Dev-Modus ein detailliertes Protokoll. Drittens, wenn der Fehler von einem bestimmten Feld ausgeht, prüfen, ob Sie einen veralteten Typ verwenden (search wurde in Redux 3.x entfernt, divide umbenannt). Die aktuelle Feldliste finden Sie stets in der Redux-Dokumentation.

Lohnt sich der Einsatz von Redux Framework im Jahr 2026

Redux Framework ist ein ausgereiftes, aktiv gepflegtes Produkt, hinter dem 32 Millionen Downloads und eine Community von mehr als 270 Mitwirkenden auf GitHub stehen. Wenn Sie ein klassisches oder hybrides WordPress-Theme entwickeln und ein Einstellungspanel mit einem reichhaltigen Satz an Feldern, Live-Vorschau im Customizer und dynamischem CSS benötigen, spart Ihnen Redux Wochen an Entwicklungszeit und liefert ein Ergebnis, das den WordPress-Sicherheitsstandards entspricht (PHPCS, Escaping, Validierung).

Architektonisch ist der beste Weg der Integration, das Framework über require_once mit class_exists-Prüfung in ein abhängiges Theme-Plugin auszulagern. Das ergibt eine saubere Codebasis, Schutz vor Konflikten durch doppelte Einbindung und einen transparenten Update-Pfad.

Wann Redux nicht benötigt wird: Sie erstellen ein schlankes Theme ohne Einstellungspanel; Sie arbeiten in einer reinen FSE-Umgebung (Block-Theme mit theme.json); Sie haben bereits ACF mit Options Pages für Meta-Felder im Einsatz. In diesen Fällen Redux für einen einzelnen An/Aus-Schalter einzubinden, hieße, mit Kanonen auf Spatzen zu schießen: Das Framework vergrößert das Theme um ca. 2 MB ohne entsprechenden Nutzen.

Werfen Sie vor Arbeitsbeginn einen Blick in die offizielle Dokumentation auf der Redux-Entwicklerseite und das Repository auf GitHub, dort können Sie auch einen Fehler melden oder eine Funktion vorschlagen. Wenn Sie Hilfe zu einem bestimmten Feldtyp oder Argument benötigen, schreiben Sie es in die Kommentare, wir finden gemeinsam eine Lösung.