🛠 Lägga till ett anpassat fält i WordPress-inställningar: add_settings_field

Standard WordPress-inställningar täcker de flesta vardagliga uppgifter. Men förr eller senare behöver du ett fält som inte finns i admin: ett företags telefonnummer i avsnittet Allmänt, en API-nyckel för en tjänst, ett fält för licensnummer eller sidfotstext.

Tema- och pluginutvecklare hanterar detta via Settings API, en uppsättning WordPress-funktioner för att registrera egna sektioner och fält på standard-inställningssidor. Den viktigaste är add_settings_field(): den lägger till ett anpassat fält i en angiven sektion och sida.

När du är klar med den här handledningen har du fungerande kod som visar ett textfält i admin, sparar värdet i databasen och visar det på sajten. Inga tredjepartsplugins, bara det inbyggda API:et.

💡 Snabb översikt:

• Förbered din miljö: skapa ett barntema eller installera plugin Code Snippets så att din kod inte försvinner när huvudtemat uppdateras.
• Registrera inställningen: anropa register_setting() på hooken admin_init, annars sparar inte WordPress fältdata.
• Lägg till en sektion och ett fält: använd add_settings_section() för ett nytt block och add_settings_field() för inmatningsfältet inuti det.
• Skriv ut värdet: använd get_option() var som helst i en mall för att visa sparad data på sajten.

Vad add_settings_field är och var det används

Funktionen add_settings_field() dök upp i WordPress 2.7.0 och har sedan dess varit det primära verktyget för att utöka inställningssidor. Enligt WordPress dokumentation lägger den till ett nytt fält i en befintlig sektion på en av adminsidorna.

Vad detta innebär i praktiken. Du kan visa ett extra fält på vilken standardsida som helst: Allmänt (general), Skriva (writing), Läsa (reading), Diskussion (discussion) eller Media (media). Och om du skapade en egen inställningssida via add_options_page() hamnar fältet där också.

Typiska scenarier:

• Ett "Telefonnummer"-fält i de allmänna inställningarna, så att chefen inte behöver röra kod för att uppdatera numret.
• Ett API-nyckelfält för ditt plugin, där användaren anger nyckeln i admin istället för att redigera wp-config.php.
• En grupp fält för en anpassad sektion (telefon, e-post, adress), med add_settings_section() plus flera add_settings_field()-anrop.

Observera: add_settings_field() skriver bara ut fältets HTML. Själva sparandet hanteras av register_setting(); utan den ignorerar WordPress den inmatade datan.

Add_settings_field syntax och parametrar

Funktionens signatur, fyra obligatoriska parametrar och två valfria:

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

Låt oss gå igenom varje parameter.

$id, den unika fältidentifieraren. Detta värde blir HTML-attributet id på <input>-taggen du skriver ut i callback-funktionen. Använd ett prefix för att undvika konflikter, till exempel myplugin_phone_number.

$title, fältetiketten som visas i admin till vänster om själva inmatningsfältet. Skriv den tydligt: "Telefonnummer", "API-nyckel för tjänst".

$callback, namnet på din funktion som skriver ut fältets HTML (input, textarea, select). Det är här du skriver echo. Funktionen måste deklareras i förväg; skicka den som en sträng: 'my_field_callback'.

$page, inställningssidans slug. Standardvärden: general, reading, writing, discussion och media. Om du skapade en anpassad sida, använd dess slug. Avgör var fältet visas.

$section (valfri), sluggen för den sektion fältet tillhör. Standard är 'default', vilket är den översta sektionen på sidan. Om du skapade en egen sektion via add_settings_section(), ange dess ID här.

$args (valfri), en array med extra inställningar. Stödda nycklar är label_for (värdet på HTML-attributet for på <label>) och class (en CSS-klass för fältomslaget).

Alla parametrar och deras beteende beskrivs i den officiella Settings API-guiden på WordPress.org.

Praktiskt exempel: lägga till ett textfält i Allmänna inställningar

Låt oss sätta ihop allt. Målet: visa ett textfält för "Telefonnummer" på sidan Inställningar → Allmänt, spara det angivna värdet och hämta det med get_option().

Koden placeras i barntemats functions.php eller via plugin Code Snippets. Det andra alternativet är säkrare: snippet:en försvinner inte vid en temauppdatering.

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

Vad som händer här rad för rad. register_setting() talar om för WordPress: spara värdet av fältet my_contact_phone som ett alternativ i tabellen wp_options när "Spara ändringar" klickas på sidan general.

add_settings_section() skapar ett nytt block med rubriken "Organisationskontakter" på sidan för allmänna inställningar. Callback-funktionen my_custom_section_callback() skriver ut beskrivningstexten ovanför sektionens fält.

add_settings_field() placerar vårt fält inuti den sektionen och länkar det till callback-funktionen my_phone_field_callback(), som renderar <input type="text">. Funktionen get_option() infogar det sparade värdet i attributet value, och esc_attr() escapar utdatan.

All kod är hookad till admin_init, som körs när admin laddas och garanterar att sektionen och fältet redan är registrerade när inställningssidan renderas.

Efter att du lagt till koden, öppna wp-admin/options-general.php så ser du resultatet:

Ange ett nummer, klicka på Spara ändringar, så skrivs värdet till databasen. För att visa telefonnumret på sajten, använd get_option() var som helst i en mall:

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

Var koden ska placeras och hur du testar

Tre placeringsalternativ, från sämst till bäst.

Huvudtema (functions.php). Gör inte detta. När temat uppdateras skrivs filen över och din anpassning försvinner.

Barntema (****functions.php** i barntemat).** Ett fungerande alternativ för redigeringar knutna till en specifik sajt. Koden överlever uppdateringar av huvudtemat.

Code Snippets-plugin. Det bästa valet för testning och långsiktigt underhåll. Du kan aktivera/avaktivera snippet:en med ett klick, utan att röra filsystemet. Dessutom får du isolering: om snippet:en orsakar ett fatalt fel avaktiverar WordPress den automatiskt och sajten går inte ner.

Testprocedur. Skapa en fullständig säkerhetskopia av sajten (databas + filer), detta är standardförsiktighet vid alla admin-redigeringar. Lägg till koden med din valda metod. Öppna inställningssidan och kontrollera att fältet visas. Ange ett värde och spara. Kontrollera beständighet: uppdatera sidan, fältet ska vara ifyllt med det du angav.

Om fältet inte visas, kontrollera att du inte blandat ihop sektions-ID i parametern $section för add_settings_field(). Ett vanligt misstag: sektionen skapas med ett ID, men ett annat skickas till fältet.

Videohandledning i ämnet

För att befästa materialet, titta på en videogenomgång av Settings API av en WordPress-utvecklare. Den visar hela cykeln: registrera en sektion, lägga till ett fält, spara och skriva ut på sajten.

⁉️🤔 Vanliga frågor

Kan jag lägga till flera fält i en sektion?

Ja. Anropa add_settings_field() så många gånger du behöver fält. Skicka samma sektions-ID i parametern $section. Varje fält får ett unikt $id och en egen callback. Ordningen på add_settings_field()-anropen avgör fältordningen på sidan.

Hur lägger jag till en select, textarea eller checkbox istället för ett textfält?

Fälttypen sätts inuti callback-funktionen via HTML. För en select, bygg en <select> med <option>-taggar; för en textarea, en <textarea>-tagg; för en checkbox, <input type="checkbox">. Värdet sparas på samma sätt via register_setting() och hämtas via get_option(). Det specifika ligger bara i HTML:en.

Behöver jag escapa utdata i callback-funktionen?

Ja, absolut. Använd esc_attr() för attributvärden (value, name, id) och esc_html() för text mellan taggar. Detta skyddar mot XSS och säkerställer att specialtecken i det sparade värdet inte förstör layouten.

Kan jag lägga till ett fält på mitt eget plugins sida?

Ja. Skapa en sida via add_options_page() eller add_menu_page(), registrera sedan sektioner och fält på samma sätt. Använd din sidas slug i parametern $page för add_settings_field(). Mekaniken är inte annorlunda jämfört med standardsidor.

Vad händer om värdet inte sparas efter att jag klickat på "Spara ändringar"?

Du har nästan säkert hoppat över register_setting(). Utan denna funktion vet inte WordPress att fältet behöver sparas och ignorerar det vid submit. Kontrollera: den första parametern i register_setting() måste matcha sidnamnet (t.ex. 'general'), och den andra måste matcha ditt fälts name-attribut.

Sammanfattning: när det är meningsfullt att utöka admin-inställningar

WordPress Settings API är en mogen och stabil mekanism: add_settings_field() har inte ändrats sedan version 2.7 och är fortfarande relevant 2026. Att lägga till egna fält i admin är motiverat i tre fall:

• Du utvecklar ett tema eller plugin och vill ge användaren ett gränssnitt för att mata in data, utan att redigera kod.
• Du behöver ett inställningsfält på sajtnivå (telefonnummer, API-nyckel, katalog-ID) och det ska vara tillgängligt via admin, inte via wp-config.php.
• Du anpassar en kundsajt och vill att chefen själv ska kunna ändra data utan att kontakta utvecklaren.

Om fältet bara är för dig och ändras en gång om året är det enklare att hårdkoda värdet. Settings API glänser där inställningar används av någon annan än utvecklaren.

Börja enkelt: lägg till ett textfält enligt exemplet ovan. När du behärskar det grundläggande flödet, registrering, callback, sparande, utskrift, gå vidare till selects, fältgrupper och anpassade inställningssidor. Och vilken fälttyp arbetar du oftast med? Berätta för oss i kommentarerna.