Att bygga en anpassad inställningspanel för ett WordPress-tema är en uppgift som kan dra ut på tiden i veckor. WordPress Settings API kräver att man skriver massor av standardkod: registrering, fältrendering, validering, sparande. Och när projektet brinner är det en omotiverad lyx att skriva allt detta från grunden.

Redux Framework löser problemet radikalt: istället för manuellt krångel med Settings API beskriver du de fält du behöver i en konfigurationsfil, och ramverket tar hand om allt annat, rendering, validering, escaping, import/export och till och med dynamisk CSS. På WordPress.org har pluginet över 32 miljoner nedladdningar och mer än en miljon aktiva installationer, och detta är inte marknadsföringsinflation, utan en direkt följd av att Redux verkligen sparar veckor av utvecklingstid.

I den här guiden går vi steg för steg igenom hur du sätter upp Redux Framework från grunden till en fungerande panel för temainställningar, inklusive livedemonstration i anpassaren och säker användning av sparade värden på frontend.

💡 Snabb överblick:

• Installera Redux Framework: tre sätt att integrera i ett WordPress-projekt
• Ansluta ramverket och skapa en konfigurationsfil
• Konfigurera panelargument: position i menyn, anpassaren, Google Fonts
• Lägga till sektioner och inmatningsfält via det enhetliga Redux API:t
• Hämta sparade värden i temamallar med felskydd

Vad Redux Framework är och varför du behöver det

Redux Framework är ett gratis ramverk med öppen källkod för inställningar i WordPress-teman och plugins. Det är byggt ovanpå standard WordPress Settings API, men abstraherar helt bort dess komplexitet. Istället för dussintals anrop till register_setting, add_settings_field och settings_fields skriver du en deklarativ array i PHP och får en fullt fungerande, responsiv inställningspanel med 49 fälttyper att välja mellan.

Viktigt att inte förväxla med JavaScript-biblioteket Redux för state management, det är helt olika produkter med samma namn. WordPress-ramverket dök upp före JS-biblioteket.

Viktiga funktioner du får "out of the box":

• 49 fälttyper: från vanlig text och kryssruta till ACE-editor, repeater, Google Maps, blocksorterare och bildslider;
• Automatisk CSS-utdata: för typografi-, färg-, gradient- och avståndsfält anger du bara en CSS-selektor så genererar Redux själv en stilmall med Google Fonts;
• Anpassarintegration: samma argument customizer => true, och hela panelen dupliceras i WordPress anpassare med liveförhandsvisning;
• Importera/exportera inställningar: inbyggt verktyg för att överföra konfiguration mellan webbplatser;
• Compiler: en hook som körs när ett fält med flaggan compile => true ändras, du kan till exempel bygga om SCSS;
• Validering och escaping: varje värde genomgår sanering som motsvarar fälttypen, ett textfält accepterar inte en array, ett numeriskt fält filtrerar bort strängar.

Sedan 2024 har ramverket utvecklats under Team Updrafts vingar (David Anderson, skapare av UpdraftPlus). Aktuell version, 4.5.11 (mars 2026), full kompatibilitet med WordPress 7.0 och PHP 8.5. Projektet finns på redux.io, dokumentation på Redux dokumentationssajt.

Installera Redux Framework

Det finns tre sätt att lägga till Redux i ett projekt. Valet beror på din temaarkitektur och hur du planerar att distribuera det.

Som ett separat plugin

Installera Redux Framework från WordPress.org-katalogen som ett vanligt plugin. Efter aktivering visas inte inställningspanelen, pluginet tillhandahåller bara API:t. Du beskriver alla inställningar i en konfigurationsfil inuti ditt tema.

Fördelar: temat förblir lättviktigt (ramverkskärnan tynger inte arkivet); ramverket uppdateras oberoende via standardmekanismen i WordPress.

Nackdelar: ditt tema kräver att ett tredjepartsplugin finns, användaren måste installera och aktivera det separat; utan pluginet försvinner inställningspanelen, och du måste tillhandahålla en elegant fallback i temakoden.

I temats kärna

Kopiera mappen ReduxCore inuti ditt tema och anslut den i functions.php. Ramverket blir en integrerad del av temat, användaren behöver inte installera ett extra plugin.

Fördelar: inställningspanelen ser ut som en naturlig del av temat, användaren installerar inget extra.

Nackdelar: temats arkivstorlek ökar med cirka 2 MB; varje ramverksuppdatering kräver en temauppdatering från din sida; Theme Check-pluginet kan utfärda varningar.

I ett beroende tema-plugin

Rekommenderad metod för premiumteman. Skapa ett separat följeplugin för ditt tema (det är också praktiskt att ha anpassade inläggstyper, shortcodes, widgets i det) och bädda in Redux i det. I temats functions.php lägger du till en kontroll för om detta plugin finns via TGMPA eller en liknande mekanism.

Fördelar: ren arkitektur (temafunktionalitet är separerad från presentation); ramverket tynger inte temats arkiv; ramverksuppdateringar påverkar inte temakoden direkt.

Nackdelar: kräver att man skriver och underhåller ett separat plugin; något högre instegströskel för andra utvecklare som ska sätta sig in i projektet.

Redux-konfigurationen beror inte på installationsmetod, de vidare stegen är identiska oavsett variant.

Allmän konfiguration: ansluta ramverket

Inuti Redux Framework-pluginet (eller arkivet som laddats ner från den officiella Redux-sajten) hittar du mappen ReduxCore, den innehåller hela kärnan.

Skapa en mapp i ditt plugin (eller tema), till exempel optionpanel, och kopiera innehållet i ReduxCore dit. Lägg en tom config.php-fil bredvid den, i den kommer vi att beskriva alla sektioner och panelfält.

Anslut nu ramverket. I pluginets huvudfil (eller temats functions.php) lägger du till:

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

Kontrollen class_exists förhindrar ett fatalt fel om en annan del av webbplatsen redan har laddat Redux (till exempel via en separat plugin). Om ramverket saknas laddas inställningspanelen helt enkelt inte, och webbplatsen fortsätter att fungera.

Efter detta kan du gå vidare till att skapa sektioner och fält.

Skapa inställningspanelen

Ramverksargument

Sätt först en global variabel för att lagra alla inställningar, den behövs för att hämta värden i temamallar:

1
$opt_name = 'mytheme_options';

Prefixet är obligatoriskt, det förhindrar namnkrockar med andra plugins som använder Redux. God praxis: brandname_themename.

Nu sätter vi ihop argument-arrayen. Här är en minimal fungerande 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 );

Genomgång av nyckelargument:

• menu_type: submenu, panelen visas under menyalternativet "Utseende"; menu, ett separat toppnivåobjekt i admin;
• customizer: true aktiverar duplicering av alla fält i WordPress anpassningsvy med live-förhandsvisning, användaren ser ändringar innan de sparas;
• dev_mode: aktivera under utveckling (utökad felsökning, demoimport), men stäng definitivt av före release;
• update_notice: alltid false för teman och plugins med inbäddad Redux, dina användare ska inte få notiser om ramverksuppdateringar separat från din produkt;
• show_import_export: lägger till ett verktyg för att överföra alla inställningar mellan webbplatser med ett klick.

Fullständig lista med över 40 argument finns i argumentguiden.

Lägga till sektioner och fält

En sektion är en logisk grupp av fält (flik på inställningsskärmen). Minimal 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
) );

Sektionsikoner: Redux 4.x stöder inbyggda WordPress Dashicons (fullständig lista på developer.wordpress.org). För anpassade ikoner använder du CSS-klasser från ditt ikonbibliotek (till exempel Font Awesome).

Varje fält är en associativ array med de obligatoriska nycklarna id, type och title. Exempel på vanliga typer:

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
),

För att skapa en undersektion lägger du till argumentet 'subsection' => true, fältet visas då som en nästlad flik inuti den överordnade sektionen.

Lista över alla 49 typer med konfigurationsexempel finns i fälttypsavsnittet i Redux-dokumentationen.

Använda alternativ i temat

Redux lagrar alla värden i en global variabel, samma som du angav i $opt_name. För att hämta ett värde i en mall måste du först deklarera den som global. Men direkt global-deklaration utanför en funktion eller action är dålig praxis. Rätt tillvägagångssätt:

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
}

Wrapper-funktionen gör två saker: förhindrar PHP Notice "undefined index" vid åtkomst av en icke-existerande nyckel och tillhandahåller ett standardvärde. I mallen ser användningen ut så här:

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
}

Om inställningspanelen ännu inte är konfigurerad (till exempel om användaren aktiverade temat men inte installerade det beroende pluginet) kommer $mytheme_options att vara en tom array, och mytheme_get_option() returnerar tyst $default, utan en massa varningar i debug.log.

För dynamisk CSS använder du Redux inbyggda funktion, ange output-argumentet i fältkonfigurationen:

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

Redux genererar och bäddar automatiskt in CSS-regeln <style>body{background-color:#fff;}</style>, utan en enda rad manuell kod.

Installations- och fältkonfigurationsprocessen visas tydligt i denna videohandledning: från att ansluta ramverket till att skapa den första sektionen med selects och switchar:

⁉️🤔 Vanliga frågor

Hur skiljer sig Redux Framework från Carbon Fields, ACF Options Pages och andra lösningar?

Redux erbjuder 49 fälttyper "out of the box" (jämfört med cirka 25 för Carbon Fields och cirka 30 för ACF Pro) och fokuserar specifikt på temainställningspaneler, inte på postmeta-fält. ACF Options Pages är ett tillägg ovanpå metafältsmotorn, medan Redux ursprungligen designades för alternativpaneler: inbyggd import/export, kompilator, liveförhandsvisning i anpassaren, dynamisk CSS med Google Fonts. Carbon Fields ligger närmare i andan, men kräver Composer och namnrymder, vilket i ett antal webbhotellsmiljöer är ett hinder. Slutsats: om du redan använder ACF för metafält, ta ACF Options Pages för att undvika att multiplicera entiteter; om du bygger ett tema från grunden och behöver en kraftfull alternativpanel ger Redux fler funktioner gratis.

Fungerar Redux Framework med blockteman (Full Site Editing)?

Ja, men med brasklappar. Redux matar ut inställningspanelen via det klassiska admin-gränssnittet (Settings API), inte via webbplatsredigeraren. För en hybridansats, blocktema plus Redux-panel för globala inställningar (färger, typografi, analysskript), fungerar kombinationen. Från och med version 4.5.11 är direkt integration med theme.json inte implementerad: värden måste hämtas i mallar via mytheme_get_option() och infogas som CSS-variabler. För en ren FSE-miljö där alla inställningar bör finnas i webbplatsredigeraren är Redux överflödigt; för klassiska teman och hybridteman är det ett av de bästa alternativen.

Vad gör man om Redux krockar med ett annat plugin som använder samma bibliotek?

Detta är ett känt "dubbelinkluderings"-problem. Kontrollen if ( ! class_exists( 'Redux' ) ) före require_once garanterar att ramverket laddas exakt en gång: WordPress kör PHP sekventiellt, och den allra första require_once gör efterföljande anrop ofarliga. Om ditt tema och ett tredjepartsplugin båda drar in Redux kommer den kopia som initierades först att laddas, och panelerna för båda produkterna fortsätter att fungera. Vid betydande skillnad i huvudversioner är inkompatibilitet på API-nivå möjlig, vilket åtgärdas genom att uppdatera den eftersläpande sidan till den aktuella versionen.

Behövs en licens för att använda Redux Framework i ett kommersiellt tema?

Nej. Redux distribueras under GPLv2, samma licens som WordPress. Du kan fritt inkludera ramverket i kommersiella teman och plugins, sälja dem på ThemeForest, distribuera via din egen webbplats. Den enda GPLv2-begränsningen, att härledda verk också måste vara under GPLv2, gäller källkod, inte slutanvändarens webbplatsinnehåll. Redux Pro (ytterligare fält, utökad anpassare, prioriterad support) är en separat betalprodukt, som inte krävs för ramverkets drift.

Vad gör man om Redux-panelen slutar öppnas efter en WordPress-uppdatering?

Scenario: efter en större WP-uppdatering visas en vit skärm på temainställningssidan. Åtgärdsordning: först, kontrollera att du har Redux version inte lägre än 4.5.11 (kompatibilitet med WP 7.0). Andra, aktivera 'dev_mode' => true under en minut och titta på PHP-felutmatningen på inställningsskärmen, Redux i dev-läge visar detaljerad logg. Tredje, om felet flödar från ett specifikt fält, kontrollera om du använder en föråldrad typ (search borttagen i Redux 3.x, divide omdöpt). Aktuell fältlista finns alltid i Redux dokumentation.

Är det värt att använda Redux Framework 2026

Redux Framework är en mogen, aktivt underhållen produkt, med 32 miljoner nedladdningar och en community på över 270 bidragsgivare på GitHub i ryggen. Om du bygger ett klassiskt eller hybrid-WordPress-tema och behöver en inställningspanel med en rik uppsättning fält, liveförhandsvisning i anpassaren och dynamisk CSS, kommer Redux att spara dig veckor av utveckling och ge ett resultat som uppfyller WordPress säkerhetsstandarder (PHPCS, escaping, validering).

Arkitektoniskt är det bästa sättet att integrera att lyfta ut ramverket till ett temaberoende plugin via require_once med class_exists-kontroll. Detta ger både en ren kodbas, skydd mot dubbelinkluderingskonflikter och en transparent uppdateringsväg.

När Redux inte behövs: du gör ett lättviktstema utan inställningspanel; arbetar i en ren FSE-miljö (blocktema med theme.json); du har redan ACF distribuerat med Options Pages för metafält. I dessa fall är det som att skjuta sparvar med kanon att dra in Redux för en enda on/off-knapp: ramverket kommer att lägga till cirka 2 MB till temats storlek utan proportionell nytta.

Innan du börjar arbeta, titta på den officiella dokumentationen på Redux utvecklarwebbplats och arkivet på GitHub, där kan du också rapportera en bugg eller föreslå en funktion. Om du behöver hjälp med en specifik fälttyp eller ett argument, skriv i kommentarerna, så reder vi ut det tillsammans.