🛠 Legge til et egendefinert felt i WordPress-innstillinger: add_settings_field

Standard WordPress-innstillinger dekker de fleste daglige oppgaver. Men før eller siden trenger du et felt som ikke finnes i administrasjonspanelet: et firmatelefonnummer i Generelt-seksjonen, en API-nøkkel for en tjeneste, et felt for lisensnummer eller bunntekst.

Tema- og pluginutviklere håndterer dette gjennom Settings API, et sett med WordPress-funksjoner for å registrere egne seksjoner og felt på standard innstillingssider. Den sentrale funksjonen er add_settings_field(): den legger til et egendefinert felt i en spesifisert seksjon og side.

Ved slutten av denne veiledningen vil du ha fungerende kode som viser et tekstfelt i administrasjonspanelet, lagrer verdien i databasen og viser den på nettstedet. Ingen tredjeparts plugins, bare det innebygde API-et.

💡 Rask oversikt:

• Forbered miljøet ditt: opprett et child theme eller installer Code Snippets-pluginen slik at koden din ikke blir slettet når parent theme oppdateres.
• Registrer innstillingen: kall register_setting() på admin_init-hooken, ellers vil ikke WordPress lagre feltdataene.
• Legg til en seksjon og et felt: bruk add_settings_section() for en ny blokk og add_settings_field() for inndatafeltet inni den.
• Vis verdien: bruk get_option() hvor som helst i en mal for å vise de lagrede dataene på nettstedet.

Hva add_settings_field er og hvor det brukes

Funksjonen add_settings_field() dukket opp i WordPress 2.7.0 og har siden vært det primære verktøyet for å utvide innstillingssider. Ifølge WordPress-dokumentasjonen legger den til et nytt felt i en eksisterende seksjon på en av administrasjonssidene.

Hva dette betyr i praksis. Du kan vise et ekstra felt på hvilken som helst standardside: Generelt (general), Skriving (writing), Lesing (reading), Diskusjon (discussion) eller Media (media). Og hvis du opprettet din egen innstillingsside via add_options_page(), vil feltet havne der også.

Typiske scenarioer:

• Et «Kontakttelefon»-felt i generelle innstillinger, slik at administratoren ikke trenger å røre kode for å oppdatere nummeret.
• Et API-nøkkelfelt for pluginen din, der brukeren skriver inn nøkkelen i administrasjonspanelet i stedet for å redigere wp-config.php.
• En gruppe felt for en egendefinert seksjon (telefon, e-post, adresse), ved å bruke add_settings_section() pluss flere add_settings_field()-kall.

Merk: add_settings_field() viser bare feltets HTML. Selve lagringen håndteres av register_setting(); uten den vil WordPress ignorere de inntastede dataene.

Syntaks og parametere for add_settings_field

Funksjonssignaturen, fire obligatoriske parametere og to valgfrie:

1
add_settings_field(
2
    string $id,
3
    string $title,
4
    callable $callback,
5
    string $page,
6
    string $section = 'default',
7
    array $args = array()
8
);

La oss gå gjennom hver parameter.

$id, den unike feltidentifikatoren. Denne verdien blir HTML id-attributtet til <input>-taggen du viser i callback-funksjonen. Bruk et prefiks for å unngå konflikter, for eksempel myplugin_phone_number.

$title, feltetiketten som vises i administrasjonspanelet til venstre for selve inndatafeltet. Skriv den tydelig: «Kontakttelefon», «API-nøkkel for tjeneste».

$callback, navnet på funksjonen din som viser feltets HTML (input, textarea, select). Det er her du skriver echo. Funksjonen må være deklarert på forhånd; send den som en streng: 'my_field_callback'.

$page, sluggen til innstillingssiden. Standardverdier: general, reading, writing, discussion og media. Hvis du opprettet en egendefinert side, bruk dens slug. Bestemmer hvor feltet vises.

$section (valgfri), sluggen til seksjonen feltet tilhører. Standard er 'default', som er den øverste seksjonen på siden. Hvis du opprettet din egen seksjon via add_settings_section(), spesifiser dens ID her.

$args (valgfri), en array med ekstra innstillinger. Støttede nøkler er label_for (verdien av HTML for-attributtet på <label>) og class (en CSS-klasse for feltomslaget).

Alle parametere og deres oppførsel er beskrevet i den offisielle Settings API-guiden på WordPress.org.

Praktisk eksempel: legge til et tekstfelt i Generelle innstillinger

La oss sette det hele sammen. Målet: vise et «Kontakttelefon»-tekstfelt på siden Innstillinger → Generelt, lagre den inntastede verdien og hente den med get_option().

Koden legges i child themeets functions.php eller via Code Snippets-pluginen. Det andre alternativet er tryggere: snippet-en blir ikke slettet ved en temaoppdatering.

1
// Callback to output the section description
2
function my_custom_section_callback() {
3
    echo 'Contact information for the organization. Phone number is displayed in the site footer.';
4
}
5
 
6
// Callback to output the input field
7
function my_phone_field_callback() {
8
    $value = get_option( 'my_contact_phone', '' );
9
    echo '<input 
10
        name="my_contact_phone" 
11
        type="text" 
12
        id="my_contact_phone" 
13
        value="' . esc_attr( $value ) . '" 
14
        class="regular-text" 
15
        placeholder="+1 (555) 123-4567" 
16
    />';
17
}
18
 
19
// Register the section and field
20
function my_register_settings() {
21
    // Register the setting — without this, data will not be saved
22
    register_setting( 'general', 'my_contact_phone' );
23
 
24
    // Add a section to the General settings page
25
    add_settings_section(
26
        'my_contact_section',            // Section ID
27
        'Contact Information',            // Section title
28
        'my_custom_section_callback',    // Callback for description
29
        'general'                         // Page slug
30
    );
31
 
32
    // Add a field to the section
33
    add_settings_field(
34
        'my_contact_phone',              // Field ID
35
        'Contact Phone',                  // Field label
36
        'my_phone_field_callback',       // Callback to render the field
37
        'general',                        // Page slug
38
        'my_contact_section'             // Section ID
39
    );
40
}
41
add_action( 'admin_init', 'my_register_settings' );

Hva som skjer her linje for linje. register_setting() forteller WordPress: lagre verdien av my_contact_phone-feltet som et alternativ i wp_options-tabellen når «Lagre endringer» klikkes på general-siden.

add_settings_section() oppretter en ny blokk med overskriften «Organisasjonskontakter» på siden for generelle innstillinger. Callback-funksjonen my_custom_section_callback() viser beskrivelsesteksten over seksjonsfeltene.

add_settings_field() plasserer feltet vårt inni den seksjonen og kobler det til callback-funksjonen my_phone_field_callback(), som renderer <input type="text">. Funksjonen get_option() setter inn den lagrede verdien i value-attributtet, og esc_attr() escaper utdataene.

All koden er hooket til admin_init, som fyres når administrasjonspanelet lastes og garanterer at seksjonen og feltet allerede er registrert når innstillingssiden rendres.

Etter at du har lagt til koden, åpne wp-admin/options-general.php, så vil du se resultatet:

Skriv inn et nummer, klikk Lagre endringer, så skrives verdien til databasen. For å vise telefonnummeret på nettstedet, bruk get_option() hvor som helst i en mal:

1
$phone = get_option( 'my_contact_phone', '' );
2
if ( $phone ) {
3
    echo '<a href="tel:' . esc_attr( $phone ) . '">' . esc_html( $phone ) . '</a>';
4
}

Hvor du skal plassere koden og hvordan teste

Tre plasseringsalternativer, fra verst til best.

Parent theme (functions.php). Ikke gjør dette. Når temaet oppdateres, blir filen overskrevet og tilpasningen din forsvinner.

Child theme (****functions.php** i child theme).** Et brukbart alternativ for redigeringer knyttet til et spesifikt nettsted. Koden overlever oppdateringer av parent theme.

Code Snippets-plugin. Det beste valget for testing og langsiktig vedlikehold. Du kan aktivere/deaktivere snippet-en med ett klikk, uten å røre filsystemet. I tillegg får du isolasjon: hvis snippet-en forårsaker en fatal feil, deaktiverer WordPress den automatisk, og nettstedet vil ikke gå ned.

Testprosedyre. Opprett en full sikkerhetskopi av nettstedet (database + filer), dette er standard forholdsregel for enhver admin-redigering. Legg til koden ved hjelp av din valgte metode. Åpne innstillingssiden og bekreft at feltet vises. Skriv inn en verdi og lagre. Sjekk persistens: oppdater siden, feltet skal være fylt ut med det du skrev inn.

Hvis feltet ikke vises, sjekk at du ikke blandet sammen seksjons-ID-en i $section-parameteren til add_settings_field(). En vanlig feil: seksjonen opprettes med én ID, men en annen sendes til feltet.

Videoopplæring om emnet

For å forsterke stoffet, se en videogjennomgang av Settings API av en WordPress-utvikler. Den viser hele syklusen: registrering av en seksjon, legge til et felt, lagring og visning på nettstedet.

⁉️🤔 Ofte stilte spørsmål

Kan jeg legge til flere felt i én seksjon?

Ja. Kall add_settings_field() så mange ganger du trenger felt. Send samme seksjons-ID i $section-parameteren. Hvert felt får en unik $id og sin egen callback. Rekkefølgen på add_settings_field()-kallene bestemmer feltrekkefølgen på siden.

Hvordan legger jeg til en select, textarea eller checkbox i stedet for et tekstfelt?

Felttypen settes inni callback-funksjonen via HTML. For en select, bygg en <select> med <option>-tagger; for en textarea, en <textarea>-tagg; for en checkbox, <input type="checkbox">. Verdien lagres på samme måte via register_setting() og hentes via get_option(). Det spesifikke ligger bare i HTML-en.

Må jeg escape utdata i callback-funksjonen?

Ja, absolutt. Bruk esc_attr() for attributtverdier (value, name, id) og esc_html() for tekst mellom tagger. Dette beskytter mot XSS og sikrer at spesialtegn i den lagrede verdien ikke ødelegger layouten.

Kan jeg legge til et felt på min egen plugins side?

Ja. Opprett en side via add_options_page() eller add_menu_page(), og registrer deretter seksjoner og felt på samme måte. Bruk sidens slug i $page-parameteren til add_settings_field(). Mekanikken er ikke forskjellig fra standardsider.

Hva om verdien ikke lagres etter at jeg klikker «Lagre endringer»?

Du har nesten helt sikkert hoppet over register_setting(). Uten denne funksjonen vet ikke WordPress at feltet må lagres og ignorerer det ved innsending. Sjekk: den første parameteren til register_setting() må samsvare med sidenavnet (f.eks. 'general'), og den andre må samsvare med feltets name-attributt.

Oppsummering: når det gir mening å utvide admin-innstillinger

WordPress Settings API er en moden og stabil mekanisme: add_settings_field() har ikke endret seg siden versjon 2.7 og forblir relevant i 2026. Å legge til egne felt i administrasjonspanelet er berettiget i tre tilfeller:

• Du utvikler et tema eller en plugin og ønsker å gi brukeren et grensesnitt for å legge inn data, uten å redigere kode.
• Du trenger et innstillingsfelt på nettstedsnivå (telefonnummer, API-nøkkel, katalog-ID), og det skal være tilgjengelig gjennom administrasjonspanelet, ikke gjennom wp-config.php.
• Du tilpasser et kundenettsted og ønsker at administratoren skal kunne endre data selv uten å kontakte utvikleren.

Hvis feltet bare er for deg og endres én gang i året, er det enklere å hardkode verdien. Settings API skinner der innstillinger brukes av noen andre enn utvikleren.

Start enkelt: legg til ett tekstfelt etter eksempelet ovenfor. Når du mestrer den grunnleggende flyten, registrering, callback, lagring, visning, gå videre til selects, feltgrupper og egendefinerte innstillingssider. Og hvilken felttype jobber du oftest med? Gi oss beskjed i kommentarene.