Bygge et tilpasset innstillingspanel for et WordPress-tema er en oppgave som kan strekke seg over uker. WordPress Settings API krever at du skriver massevis av standardkode: registrering, feltrendering, validering, lagring. Og når prosjektet står i brann, er det en uforsvarlig luksus å skrive alt dette fra bunnen av.

Redux Framework løser dette problemet radikalt: i stedet for manuelt strev med Settings API beskriver du de nødvendige feltene i én konfigurasjonsfil, og rammeverket tar seg av alt annet, rendering, validering, escaping, import/eksport og til og med dynamisk CSS. På WordPress.org har utvidelsen mer enn 32 millioner nedlastinger og over en million aktive installasjoner, og dette er ikke markedsføringsoppblåsing, men en direkte konsekvens av at Redux virkelig sparer uker med utvikling.

I denne guiden går vi gjennom steg-for-steg-oppsett av Redux Framework fra bunnen av til et fungerende temainnstillingspanel, inkludert live demonstrasjon i tilpasseren og trygg bruk av lagrede verdier på frontend.

💡 Rask oversikt:

• Installere Redux Framework: tre måter å integrere i et WordPress-prosjekt
• Koble til rammeverket og opprette en konfigurasjonsfil
• Sette opp panelargumenter: plassering i meny, tilpasser, Google Fonts
• Legge til seksjoner og inndatafelt gjennom det enhetlige Redux API-et
• Hente ut lagrede verdier i temamaler med feilbeskyttelse

Hva er Redux Framework og hvorfor du trenger det

Redux Framework er et gratis rammeverk med åpen kildekode for innstillinger i WordPress-temaer og utvidelser. Det er bygget på toppen av standard WordPress Settings API, men abstraherer kompleksiteten fullstendig. I stedet for dusinvis av kall til register_setting, add_settings_field og settings_fields skriver du en deklarativ tabell i PHP, og får et fullt fungerende, responsivt innstillingspanel med 49 felttyper å velge mellom.

Viktig å ikke forveksle med JavaScript-biblioteket Redux for tilstandshåndtering, dette er helt forskjellige produkter med samme navn. WordPress-rammeverket dukket opp før JS-biblioteket.

Nøkkelfunksjonalitet du får «ut av esken»:

• 49 felttyper: fra vanlig tekst og avkrysningsboks til ACE-editor, repeater, Google Maps, blokksorterer og bildeglidebryter;
• Automatisk CSS-utdata: for typografi-, farge-, gradient- og avstandsfelt, bare spesifiser en CSS-selektor så genererer Redux selv et stilark med Google Fonts;
• Tilpasserintegrasjon: det samme argumentet customizer => true, så dupliseres hele panelet i WordPress-tilpasseren med live forhåndsvisning;
• Importer/eksporter innstillinger: innebygd verktøy for å overføre konfigurasjon mellom nettsteder;
• Kompilator: en hook som fyres av når et felt med flagget compile => true endres, du kan for eksempel bygge SCSS på nytt;
• Validering og escaping: hver verdi går gjennom sanitering som tilsvarer felttypen, et tekstfelt godtar ikke en tabell, et numerisk felt filtrerer ut strenger.

Siden 2024 har rammeverket blitt utviklet under Team Updrafts vinger (David Anderson, skaperen av UpdraftPlus). Gjeldende versjon, 4.5.11 (mars 2026), full kompatibilitet med WordPress 7.0 og PHP 8.5. Prosjektet lever på redux.io, dokumentasjon på Redux dokumentasjonsside.

Installere Redux Framework

Det er tre måter å legge Redux til et prosjekt. Valget avhenger av temarkitekturen din og hvordan du planlegger å distribuere det.

Som en separat utvidelse

Installer Redux Framework fra WordPress.org-katalogen som en vanlig utvidelse. Etter aktivering vil ikke innstillingspanelet vises, utvidelsen tilbyr bare API-et. Du beskriver alle innstillinger i en konfigurasjonsfil inne i temaet ditt.

Fordeler: temaet forblir lett (rammeverkets kjerne blåser ikke opp arkivet); rammeverket oppdateres uavhengig gjennom standard WordPress-mekanisme.

Ulemper: temaet ditt krever tilstedeværelse av en tredjepartsutvidelse, brukeren må installere og aktivere den separat; uten utvidelsen forsvinner innstillingspanelet, og du må sørge for en elegant fallback i temakoden.

I temakjernen

Kopier ReduxCore-mappen inn i temaet ditt og koble den til i functions.php. Rammeverket blir en integrert del av temaet, brukeren trenger ikke å installere en ekstra utvidelse.

Fordeler: innstillingspanelet ser ut som en naturlig del av temaet, brukeren installerer ikke noe ekstra.

Ulemper: temarkivets størrelse øker med omtrent 2 MB; hver rammeverksoppdatering krever en temaoppdatering fra din side; Theme Check-utvidelsen kan gi advarsler.

I en avhengig temautvidelse

Anbefalt tilnærming for premiumtemaer. Opprett en separat følgeutvidelse for temaet ditt (det er også praktisk å ha egendefinerte innholdstyper, shortcodes, widgeter i den) og bygg Redux inn i den. I temaets functions.php legger du til en sjekk for tilstedeværelsen av denne utvidelsen gjennom TGMPA eller en lignende mekanisme.

Fordeler: ren arkitektur (temafunksjonalitet er atskilt fra presentasjon); rammeverket blåser ikke opp temarkivet; rammeverksoppdateringer påvirker ikke temakoden direkte.

Ulemper: krever skriving og vedlikehold av en separat utvidelse; litt høyere inngangsterskel for andre utviklere som skal sette seg inn i prosjektet.

Redux-konfigurasjon avhenger ikke av installasjonsmetode, videre steg er identiske for alle varianter.

Generell konfigurasjon: koble til rammeverket

Inne i Redux Framework-utvidelsen (eller arkivet lastet ned fra det offisielle Redux-nettstedet) finner du ReduxCore-mappen, den inneholder hele kjernen.

Opprett en mappe i utvidelsen din (eller temaet), for eksempel optionpanel, og kopier innholdet i ReduxCore inn i den. Legg en tom config.php-fil ved siden av, vi skal beskrive alle seksjoner og panelfelt i den.

Koble nå til rammeverket. I hovedutvidelsesfilen (eller temaets functions.php) legg til:

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

Sjekken class_exists forhindrer en fatal feil dersom en annen del av nettstedet allerede har lastet Redux (for eksempel via en separat plugin). Hvis rammeverket ikke finnes, vil innstillingspanelet rett og slett ikke lastes, og nettstedet fortsetter å fungere.

Etter dette kan du gå videre til å opprette seksjoner og felt.

Opprette innstillingspanelet

Argumenter for rammeverket

Først setter du en global variabel for å lagre alle innstillinger, den trengs for å hente ut verdier i temamaler:

1
$opt_name = 'mytheme_options';

Prefikset er obligatorisk, det forhindrer navnekonflikter med andre plugin-er som bruker Redux. God praksis: brandname_themename.

La oss nå sette sammen argument-arrayet. Her er en minimal fungerende konfigurasjon:

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

Gjennomgang av nøkkelargumenter:

• menu_type: submenu, panelet vises under menyvalget «Utseende»; menu, separat toppnivåelement i admin;
• customizer: true aktiverer duplisering av alle felt i WordPress Customizer med live forhåndsvisning, brukeren ser endringer før de lagres;
• dev_mode: aktiver under utvikling (utvidet feilsøking, demoimport), men slå definitivt av før lansering;
• update_notice: alltid false for temaer og plugin-er med innebygd Redux, brukerne dine bør ikke motta varsler om rammeverksoppdateringer separat fra produktet ditt;
• show_import_export: legger til et verktøy for å overføre alle innstillinger mellom nettsteder med ett klikk.

Full liste med over 40 argumenter finner du i argumentguiden.

Legge til seksjoner og felt

En seksjon er en logisk gruppe felt (fane på innstillingsskjermen). Minimal seksjon:

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

Seksjonsikoner: Redux 4.x støtter innebygde WordPress Dashicons (fullstendig liste på developer.wordpress.org). For egendefinerte ikoner bruker du CSS-klasser fra ditt ikonsett (for eksempel Font Awesome).

Hvert felt er et assosiativt array med obligatoriske nøkler id, type og title. Eksempler på ofte brukte 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
),

For å opprette en underseksjon legger du til argumentet 'subsection' => true, feltet vil da vises som en nestet fane inne i den overordnede seksjonen.

Liste over alle 49 typer med konfigurasjonseksempler i felttypedelen av Redux-dokumentasjonen.

Bruk av innstillinger i temaet

Redux lagrer alle verdier i én global variabel, den samme du oppga i $opt_name. For å hente en verdi i en mal, må du først deklarere den som global. Men direkte global-deklarasjon utenfor en funksjon eller action er dårlig praksis. Den riktige tilnærmingen:

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-funksjonen gjør to ting: forhindrer PHP Notice «undefined index» ved tilgang til en nøkkel som ikke finnes, og gir en standardverdi. I malen ser bruken slik ut:

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
}

Hvis innstillingspanelet ennå ikke er konfigurert (for eksempel at brukeren aktiverte temaet, men ikke installerte den avhengige plugin-en), vil $mytheme_options være en tom array, og mytheme_get_option() vil stille returnere $default, uten en haug med advarsler i debug.log.

For dynamisk CSS kan du bruke Redux sin innebygde funksjonalitet, spesifiser output-argumentet i feltkonfigurasjonen:

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

Redux vil automatisk generere og bygge inn CSS-regelen <style>body{background-color:#fff;}</style>, uten en eneste linje manuell kode.

Installasjons- og feltoppsettprosessen vises tydelig i denne videoveiledningen: fra å koble til rammeverket til å opprette den første seksjonen med selects og switcher:

⁉️🤔 Ofte stilte spørsmål

Hvordan skiller Redux Framework seg fra Carbon Fields, ACF Options Pages og andre løsninger?

Redux tilbyr 49 felttyper «ut av boksen» (mot ~25 for Carbon Fields og ~30 for ACF Pro) og fokuserer spesifikt på temainnstillingspaneler, ikke på postmetafelter. ACF Options Pages er et tillegg over metafeltmotoren, mens Redux opprinnelig ble designet for innstillingspaneler: innebygd import/eksport, kompilator, live forhåndsvisning i customizer, dynamisk CSS med Google Fonts. Carbon Fields er nærmere i ånden, men krever Composer og navnerom, i en rekke hostingmiljøer er dette en barriere. Konklusjon: hvis du allerede bruker ACF for metafelter, ta ACF Options Pages for å unngå å multiplisere entiteter; hvis du bygger et tema fra bunnen av og trenger et kraftig innstillingspanel, vil Redux gi flere funksjoner gratis.

Fungerer Redux Framework med blokktemaer (Full Site Editing)?

Ja, men med forbehold. Redux viser innstillingspanelet gjennom det klassiske admin-grensesnittet (Settings API), ikke gjennom nettstedredigereren. For en hybrid tilnærming, blokktema pluss Redux-panel for globale innstillinger (farger, typografi, analyseskript), fungerer kombinasjonen. Fra og med versjon 4.5.11 er direkte integrasjon med theme.json ikke implementert: verdier må hentes ut i maler gjennom mytheme_get_option() og legges inn som CSS-variabler. For et rent FSE-miljø der alle innstillinger bør ligge i nettstedredigereren, er Redux overflødig; for klassiske og hybride temaer, et av de beste alternativene.

Hva gjør jeg hvis Redux kommer i konflikt med en annen plugin som bruker det samme biblioteket?

Dette er et kjent «dobbel inkludering»-problem. Sjekken if ( ! class_exists( 'Redux' ) ) før require_once garanterer at rammeverket lastes nøyaktig én gang: WordPress kjører PHP sekvensielt, og den aller første require_once gjør påfølgende kall ufarlige. Hvis både temaet ditt og en tredjepartsplugin drar inn Redux, vil kopien som ble initialisert først lastes, og paneler for begge produktene vil fortsette å fungere. Ved en betydelig forskjell i hovedversjoner er inkompatibilitet på API-nivå mulig, dette fikses ved å oppdatere den etterslepende siden til den aktuelle utgivelsen.

Trengs det en lisens for å bruke Redux Framework i et kommersielt tema?

Nei. Redux distribueres under GPLv2, samme lisens som WordPress. Du kan fritt inkludere rammeverket i kommersielle temaer og plugins, selge dem på ThemeForest, distribuere gjennom ditt eget nettsted. Den eneste GPLv2-begrensningen, avledede verk må også være under GPLv2, men dette kravet gjelder kildekode, ikke sluttbrukerens nettstedinnhold. Redux Pro (ekstra felter, utvidet customizer, prioritert support) er et separat betalt produkt, ikke nødvendig for rammeverkets drift.

Hva gjør jeg hvis Redux-panelet sluttet å åpne seg etter en WordPress-oppdatering?

Scenario: etter en større WP-oppdatering hvit skjerm på temainnstillingssiden. Handlingsrekkefølge: først, sjekk at du har Redux versjon ikke lavere enn 4.5.11 (kompatibilitet med WP 7.0). For det andre, aktiver 'dev_mode' => true i et minutt og se på PHP-feilutskriften på innstillingsskjermen, Redux i dev-modus viser detaljert logg. For det tredje, hvis feilen strømmer fra et spesifikt felt, sjekk om du bruker en utdatert type (search fjernet i Redux 3.x, divide omdøpt). Aktuell liste over felter finnes alltid i Redux-dokumentasjonen.

Er det verdt å bruke Redux Framework i 2026

Redux Framework er et modent, aktivt støttet produkt, med 32 millioner nedlastinger og et fellesskap på mer enn 270 bidragsytere på GitHub. Hvis du bygger et klassisk eller hybrid WordPress-tema og trenger et innstillingspanel med et rikt sett av felter, live forhåndsvisning i customizer og dynamisk CSS, vil Redux spare deg for uker med utvikling og gi et resultat som møter standardene for WordPress-sikkerhet (PHPCS, escaping, validering).

Arkitektonisk er den beste måten å integrere på å ta rammeverket ut i en avhengig tema-plugin gjennom require_once med class_exists-sjekk. Dette gir både en ren kodebase, beskyttelse mot dobbel inkludering-konflikter og en transparent oppdateringsvei.

Når Redux ikke er nødvendig: du lager et lettvektstema uten innstillingspanel; jobber i et rent FSE-miljø (blokktema med theme.json); du har allerede ACF utplassert med Options Pages for metafelter. I disse tilfellene er det å dra inn Redux for én av/på-knapp som å skyte spurv med kanon: rammeverket vil legge til ~2 MB til temastørrelsen uten proporsjonal nytte.

Før du starter arbeidet, se på den offisielle dokumentasjonen på Redux-utviklernettstedet og depotet på GitHub, der kan du også rapportere en feil eller foreslå en funksjon. Hvis du trenger hjelp med en spesifikk felttype eller et argument, skriv i kommentarer, så finner vi ut av det sammen.