Standardsettet med formateringsknapper i WordPress-redigeringsprogrammet er kjent for alle: fet, kursiv, lister, sitater. Men når du jevnlig må sette inn en knapp i en bestemt farge, en advarselsblokk eller en bildetekst i en profilert ramme, slår rutinen inn for fullt. Hver gang: bytt til tekstmodus, skriv style="", kopier klasser fra en huskelapp. Én knapp ble blå, en annen lyseblå. Én blokk med skygge, en annen uten.

Problemet er ikke mangel på verktøy, men at «Formater»-rullegardinmenyen i TinyMCE er skjult som standard. Og selv om du aktiverer den, er den tom: WordPress vet ikke hvilke stiler du trenger. Men du kan legge dem til der.

Det finnes tre tilnærminger: via kode i functions.php, via en utvidelse med en visuell bygger, og via den innebygde blokkredigeringsmekanismen register_block_style(). Alle tre fungerer og dekker ulike scenarioer: fra manuell kontroll over hver piksel til «klikk og bruk».

💡 Hurtigoversikt:

• Vi aktiverer «Formater»-rullegardinmenyen i den klassiske redigereren med mce_buttons_1-filteret og fyller den med våre egne stiler via tiny_mce_before_init, med steg-for-steg-kode inni.
• Vi oppretter editor-style.css for direkte forhåndsvisning i redigereren: en knapp ser ut som en knapp allerede før publisering.
• Vi installerer TinyMCE Custom Styles, en GUI-bygger for formater uten å røre kode, med autogenererte CSS-filer.
• Vi ser på den innebygde veien for Gutenberg: registrer blokkvariasjoner via register_block_style(), koble til stiler via theme.json eller wp_add_inline_style().

Hva egendefinerte stiler er og hvorfor du trenger dem

En egendefinert stil er en CSS-forhåndsinnstilling som du bruker på et markert utsnitt via redigeringsprogrammets rullegardinmeny. I stedet for å pakke inn et avsnitt i <span style="..."> for hundrede gang, velger du «Utheving» i «Formater»-menyen og får gul utheving med avrundede hjørner. Ett klikk.

Tre grunner til å sette opp dette én gang og glemme det:

• Konsistens. Alle knapper, advarsler og bildetekster ser like ut fra publisering til publisering. Designet sklir ikke ut.
• Hastighet. Redaktøren graver ikke i CSS og kopierer ikke magiske klasser fra notisblokken, trykker bare på én knapp.
• Sikkerhet. Ingen overskriver markeringen ved et uhell via innebygde stiler i tekstmodus.

Typiske scenarioer: handlingsknapp (theme-button), «Viktig»-blokk med ikon og farget kantlinje, punktliste med haker, bildetekst i profilert stil, kodeutheving inne i et avsnitt.

Metode 1: Kode, via functions.php og editor-style.css

Veien for dem som ikke er redde for å åpne functions.php én gang. Resultat: «Formater»-rullegardinmenyen dukker opp i TinyMCE-verktøylinjen, og inni ligger dine egne stiler. Ti linjer med PHP, én CSS-fil, null unødvendige utvidelser.

Steg 1. Aktiver «Formater»-knappen

Som standard er rullegardinlisten for formater styleselect skjult. Dette filteret returnerer den til første linje i redigeringsprogrammet. Plasser koden i functions.php til det aktive temaet eller, mer korrekt, child theme:

1
function myprefix_mce_buttons_1( $buttons ) {
2
    array_unshift( $buttons, 'styleselect' );
3
    return $buttons;
4
}
5
add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );

mce_buttons_1-kroken legger til knappen i første verktøylinjerad. Hvis du foretrekker andre eller tredje rad, bruk mce_buttons_2 eller mce_buttons_3.

Lagret functions.php, åpnet et innlegg, en «Formater»-rullegardinmeny dukket opp i øverste rad til venstre. Fortsatt tom foreløpig.

Steg 2. Registrer dine egne stiler

La oss nå fylle menyen med faktiske formater. Legg til et nytt filter i samme functions.php:

1
function myprefix_add_format_styles( $init_array ) {
2
    $style_formats = array(
3
        array(
4
            'title'    => __( 'Theme Button', 'text-domain' ),
5
            'selector' => 'a',
6
            'classes'  => 'theme-button',
7
        ),
8
        array(
9
            'title'    => __( 'Highlight', 'text-domain' ),
10
            'inline'   => 'span',
11
            'classes'  => 'text-highlight',
12
        ),
13
    );
14
    $init_array['style_formats'] = json_encode( $style_formats );
15
    return $init_array;
16
}
17
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

Hva parametrene til hvert element betyr:

• title, navnet redaktøren vil se i rullegardinmenyen.
• selector, HTML-taggen som stilen brukes på. 'a' betyr at «Temaknapp» bare vil fungere på lenker.
• inline, pakker den merkede teksten inn i en tagg (vanligvis span) med den angitte klassen. Perfekt for å utheve et ord eller en frase inne i et avsnitt.
• classes, CSS-klasse (eller klasser atskilt med mellomrom) lagt til elementet.

Legg til dine egne elementer i matrisen etter samme mal. Den fullstendige listen over godtatte parametere finnes i TinyMCE-dokumentasjonen på developer.wordpress.org.

Steg 3. Skriv CSS for frontend

Menyen er fylt, men nettleseren vet ennå ikke hvordan .theme-button ser ut. Legg til CSS i temaets stilark (eller child theme):

1
.theme-button {
2
    display: inline-block;
3
    padding: 10px 15px;
4
    color: #fff;
5
    background: #1796c6;
6
    text-decoration: none;
7
}
8
.theme-button:hover {
9
    text-decoration: none;
10
    opacity: 0.8;
11
}
12
.text-highlight {
13
    background: #FFFF00;
14
}

Etter lagring er knappen stylet i frontend. Men i admin viser redigeringsprogrammet den ikke ennå.

Steg 4. Legg til editor-style.css for forhåndsvisning i redigeringsprogrammet

For å vise stiler direkte i den visuelle redigereren før publisering, trenger du en egen editor-style.css-fil. WordPress kan plukke den opp:

1
function myprefix_theme_add_editor_styles() {
2
    add_editor_style( 'editor-style.css' );
3
}
4
add_action( 'init', 'myprefix_theme_add_editor_styles' );

Opprett en fil som heter editor-style.css i temaroten og kopier CSS-en fra trinn 3 dit. Hvis du jobber med et tema laget av andre, oppretter du denne filen i barnetemaet: WordPress sjekker barnetemaet først, og når det finner editor-style.css der, laster det den i stedet for forelderens.

Resultat: markerte tekst, valgte «Highlight», gul utheving er synlig umiddelbart i editoren. Klikket på en lenke, valgte «Theme Button», den blir til en blå knapp.

Metode 2: TinyMCE Custom Styles-utvidelse, uten å røre kode

Hvis du ikke vil tukle med functions.php, men trenger stiler, finnes det en ferdig utvidelse. Den gjør det samme via et visuelt grensesnitt i administrasjonspanelet.

Installer og aktiver TinyMCE Custom Styles. Per juni 2026 har utvidelsen over 8 000 aktive installasjoner og støtter den klassiske Gutenberg-blokken fra og med versjon 1.1.1. Siste oppdatering (v1.1.5, juni 2024) tettet sikkerhetshull. Forfatteren, Tim Reeves, ser åpent etter en etterfølger, men kodebasen er stabil: utvidelsen henter ikke eksterne avhengigheter og rører ikke databasen utover sin egen tabell for innstillinger.

Utvidelsen dukker opp i den generelle listen over installerte utvidelser. Sørg for at den er aktivert før du går videre til konfigurasjon.

Etter aktivering går du til Innstillinger → TinyMCE Custom Styles. Det første skjermbildet tilbyr valg om hvor CSS-filer skal lagres. Jeg anbefaler det tredje alternativet: opprett en egen mappe (for eksempel tinymce-styles) i wp-content/uploads. Dette beskytter stilene ved oppdatering av temaet eller selve utvidelsen. Klikk «Lagre innstillinger».

Det første skjermbildet viser tre plasseringsalternativer for CSS. Velg det tredje og angi et mappenavn, for eksempel tinymce-styles.

Bla nedover siden og klikk «Legg til ny stil». En konstruktør åpnes der du angir:

• Tittel, navnet i nedtrekksmenyen (for eksempel «Stor blå knapp»).
• Type, selektorbasert (gjelder for en spesifikk tag), inline (pakkes inn i span) eller blokk.
• Klasser og CSS-egenskaper, rett i grensesnittet, uten filer.

Etter å ha lagret innstillingene klikker du på «Legg til ny stil» nederst på siden. En konstruktør åpnes med felter for tittel, type og CSS-egenskaper.

Lagre, åpne et innlegg, og finn rullegardinmenyen «Formater» i den andre verktøylinjeraden. Den nye stilen ligger allerede der. Marker tekst, velg den, og den brukes umiddelbart.

Fordelen med plugin-en: CSS-filer (editor-style.css og editor-style-shared.css) opprettes automatisk i den valgte mappen. Du henter dem via FTP, redigerer i et praktisk redigeringsprogram og laster dem opp igjen, uten en eneste endring i functions.php.

Metode 3: register_block_style(), den native veien for Gutenberg

De to foregående metodene fungerer i den klassiske TinyMCE-editoren og dens Classic-blokk inne i Gutenberg. Men hvis du utelukkende lever i blokkeditoren, finnes det en mer direkte vei: register_block_style().

Denne funksjonen registrerer en stilvariant for en spesifikk blokk, knapp, overskrift, sitat, gruppe. Varianten vises i blokkens sidepanel, og editoren legger den på med ett klikk.

Eksempel: la oss legge til en «Fancy»-variant på en knapp med gul bakgrunn og avrundede hjørner:

1
function myprefix_register_block_styles() {
2
    register_block_style(
3
        'core/button',
4
        array(
5
            'name'  => 'fancy',
6
            'label' => __( 'Fancy', 'text-domain' ),
7
        )
8
    );
9
}
10
add_action( 'init', 'myprefix_register_block_styles' );

CSS kobles enten via theme.json (for moderne blokktemaer) eller via wp_add_inline_style():

1
.is-style-fancy .wp-block-button__link {
2
    background-color: #f0c040;
3
    color: #fff;
4
    border: none;
5
    border-radius: 15px;
6
    padding: 10px 20px;
7
}

Denne tilnærmingen er ikke avhengig av TinyMCE og fungerer naturlig i Gutenberg. For temaer med theme.json (alle moderne blokktemaer) kan stiler beskrives direkte i styles.blocks-seksjonen, uten en eneste linje PHP.

⁉️🤔 Vanlige spørsmål

Formatene vises ikke i editoren. Hva er galt?

Gå først til Innstillinger → Advanced Editor Tools og forsikre deg om at «Formats»-knappen ikke er fjernet fra verktøylinjen. AET tar over kontrollen av knapperader, og mce_buttons_1-filteret ditt kan bli ignorert inntil du eksplisitt legger til knappen via pluginens grensesnitt. Sjekk også at mce_buttons_1-filteret er registrert og returnerer en array med elementet 'styleselect'. Tøm nettleserbuffer og serverbuffer, ofte ligger problemet bare her.

Kan jeg knytte en stil til flere selektorer samtidig?

Ja. I stedet for strengen 'selector' => 'a', send inn en array: 'selector' => 'a, button, span'. TinyMCE vil bruke stilen på den første matchende overordnede taggen fra listen. I praksis er dette nyttig når én visuell stil skal fungere på både lenker og <button>-knapper. Rekkefølgen i arrayen har betydning: hvis den valgte teksten ligger inne i en lenke som er nøstet i en div, og selektorene angir 'div, a', vil stilen bli brukt på div, ikke a. Plasser mer spesifikke selektorer først.

Hvordan skiller editor-style.css seg fra editor-style-shared.css?

Pluginen TinyMCE Custom Styles oppretter to filer. editor-style.css lastes bare i TinyMCE-editoren. editor-style-shared.css lastes både i editoren og på frontend, stiler derfra er synlige for besøkende på nettstedet. Hvis en stil bare trengs for redigeringsbekvemmelighet, legg den i editor-style.css. Hvis stilen skal fungere på nettstedet, i editor-style-shared.css. Med den manuelle tilnærmingen er den delte filens motstykke temaets hovedstilark, og editor-style.css (en separat fil registrert via add_editor_style()) påvirker bare forhåndsvisningen inne i TinyMCE.

Er det obligatorisk å opprette et barnetema for disse redigeringene?

Nei, koden fungerer også i hovedtemaets functions.php. Men ved neste temaoppdatering vil alle redigeringer bli overskrevet. Regelen er enkel: all tilpasning via functions.php legges i et barnetema, dette er en forsikring mot å miste endringer. Hvis du ikke har et barnetema ennå, opprett det på ti minutter ved å følge veiledningen for barnetema: to filer, style.css med en header og functions.php med import av forelderstiler, så vil dine egendefinerte formater overleve enhver oppdatering.

Pluginen har ikke vært oppdatert siden 2024. Bør jeg installere den?

Per juni 2026 ligger TinyMCE Custom Styles fortsatt i WordPress.org-katalogen med over 8 000 aktive installasjoner. Forfatteren ser åpent etter en etterfølger, men kodebasen er ikke forlatt: den siste oppdateringen (v1.1.5, juni 2024) lukket sårbarheter. Det er en risiko, men den er håndterbar: pluginen henter ikke eksterne avhengigheter og graver seg ikke dypt inn i databasen. Hvis pluginen i fremtiden slutter å bli oppdatert, kan du alltid overføre stiler til den manuelle metoden (trinn 1-4 over) uten å miste CSS. Et alternativ med aktiv utvikling er Advanced Editor Tools (AET) fra Automattic, men dens «Create CSS classes menu»-funksjon roter ofte til menyen med unødvendige klasser. TinyMCE Custom Styles gir manuell kontroll over hvert element, så de er ikke konkurrenter, men utfyller snarere hverandre.

Kode, plugin eller blokker: hva du bør velge for ditt scenario

Valget koker ned til to spørsmål: hvilken editor du jobber i og om du er klar til å åpne functions.php én gang.

Jobber du i den klassiske editoren eller Classic-blokken i Gutenberg og ikke er redd for kode, velg metode 1. Ti linjer PHP, én CSS-fil, full kontroll.

Ønsker du en visuell formatbygger uten å røre kode og med automatisk CSS-generering, installer TinyMCE Custom Styles. Husk risikoen for langsiktig støtte, men per i dag leverer pluginen det den lover.

Lever du i blokkeditoren, behersk register_block_style(). Denne veien er naturlig for Gutenberg, er ikke avhengig av TinyMCE og støttes av WordPress-kjernen.

I alle de tre scenarioene får du det viktigste: formatering på ett klikk i stedet for manuell kopiering av klasser og innebygde stiler. Og det er en time eller to spart tid per måned på ethvert regelmessig publisert nettsted.