Standarduppsättningen av formateringsknappar i WordPress-redigeraren är bekant för alla: fetstil, kursiv, listor, citat. Men när du regelbundet behöver infoga en knapp i en specifik färg, ett varningsblock eller en bildtext i en profilerad ram, slår rutinen till med full kraft. Varje gång: växla till textläge, skriv style="", kopiera klasser från ett fusklapp. En knapp blev blå, en annan ljusblå. Ett block med skugga, ett annat utan.

Problemet är inte avsaknaden av verktyg, utan att rullgardinsmenyn "Format" i TinyMCE är dold som standard. Och även om du aktiverar den är den tom: WordPress vet inte vilka stilar du behöver. Men du kan lägga till dem där.

Det finns tre tillvägagångssätt: via kod i functions.php, via ett plugin med en visuell konstruktör och via blockredigerarens inbyggda mekanism register_block_style(). Alla tre fungerar och täcker olika scenarier: från manuell kontroll över varje pixel till "klicka och applicera".

💡 Snabb översikt:

• Vi aktiverar rullgardinsmenyn "Format" i den klassiska redigeraren med filtret mce_buttons_1 och fyller den med våra egna stilar via tiny_mce_before_init, med steg-för-steg-kod inuti.
• Vi skapar editor-style.css för live-förhandsvisning direkt i redigeraren: en knapp ser ut som en knapp redan före publicering.
• Vi installerar TinyMCE Custom Styles, en GUI-konstruktör för format utan att röra kod, med automatiskt genererade CSS-filer.
• Vi tittar på den inbyggda vägen för Gutenberg: registrera blockvarianter via register_block_style(), koppla stilar via theme.json eller wp_add_inline_style().

Vad anpassade stilar är och varför du behöver dem

En anpassad stil är en CSS-förinställning som du applicerar på ett markerat fragment via redigerarens rullgardinsmeny. Istället för att för hundrade gången slå in ett stycke i <span style="..."> väljer du "Markering" i menyn "Format" och får gul överstrykning med rundade hörn. Ett klick.

Tre skäl att ställa in detta en gång och sedan glömma:

• Konsekvens. Alla knappar, varningar och bildtexter ser likadana ut från publicering till publicering. Designen glider inte iväg.
• Snabbhet. Redaktören gräver inte i CSS och kopierar inte magiska klasser från anteckningsblocket, utan trycker bara på en knapp.
• Säkerhet. Ingen skriver av misstag över märkspråket via inline-stilar i textläge.

Typiska scenarier: call-to-action-knapp (theme-button), "Viktigt"-block med ikon och färgad ram, punktlista med bockmarkeringar, bildtext i profilerad stil, kodmarkering inuti ett stycke.

Metod 1: Kod, via functions.php och editor-style.css

Vägen för den som inte är rädd för att öppna functions.php en gång. Resultat: rullgardinsmenyn "Format" dyker upp i TinyMCE-verktygsfältet, och inuti finns dina egna stilar. Tio rader PHP, en CSS-fil, noll onödiga plugins.

Steg 1. Aktivera knappen "Format"

Som standard är rullgardinslistan för format styleselect dold. Detta filter tar tillbaka den till redigerarens första rad. Placera koden i det aktiva temats functions.php eller, mer korrekt, i ett 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' );

Hooken mce_buttons_1 lägger till knappen i den första verktygsfältsraden. Om du föredrar den andra eller tredje, använd mce_buttons_2 eller mce_buttons_3.

Sparade functions.php, öppnade ett inlägg, en rullgardinsmeny "Format" dök upp i den översta raden till vänster. Fortfarande tom så länge.

Steg 2. Registrera dina egna stilar

Nu fyller vi menyn med faktiska format. Lägg till ett andra filter i samma 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' );

Vad varje elements parametrar betyder:

• title, namnet som redaktören ser i rullgardinsmenyn.
• selector, HTML-taggen som stilen appliceras på. 'a' betyder att "Temaknapp" bara fungerar på länkar.
• inline, slår in den markerade texten i en tagg (vanligtvis span) med den angivna klassen. Perfekt för att markera ett ord eller en fras inuti ett stycke.
• classes, CSS-klass (eller klasser separerade med mellanslag) som läggs till elementet.

Lägg till dina egna objekt i arrayen enligt samma mall. Den fullständiga listan över accepterade parametrar finns i TinyMCE-dokumentationen på developer.wordpress.org.

Steg 3. Skriv CSS för frontend

Menyn är fylld, men webbläsaren vet ännu inte hur .theme-button ser ut. Lägg till CSS i temats stilmall (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
}

Efter att ha sparat är knappen stylad på frontend. Men i admin visas den inte i redigeraren ännu.

Steg 4. Lägg till editor-style.css för förhandsvisning i redigeraren

För att visa stilar direkt i den visuella redigeraren före publicering behöver du en separat editor-style.css-fil. WordPress kan plocka upp den:

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

Skapa en fil med namnet editor-style.css i temats rot och kopiera CSS-koden från steg 3 dit. Om du arbetar med någon annans tema, skapa filen i barntemat: WordPress kontrollerar barntemat först och, om editor-style.css finns där, laddar den istället för föräldratemats.

Resultat: markerad text, valde "Highlight", gul markering syns direkt i editorn. Klickade på en länk, valde "Theme Button", den blir en blå knapp.

Metod 2: TinyMCE Custom Styles-plugin, utan att röra kod

Om du inte vill pilla med functions.php men behöver stilar finns det ett färdigt plugin. Det gör samma sak via ett visuellt gränssnitt i admin.

Installera och aktivera TinyMCE Custom Styles. I juni 2026 har pluginet 8 000+ aktiva installationer och stöder det klassiska Gutenberg-blocket från och med version 1.1.1. Den senaste uppdateringen (v1.1.5, juni 2024) stängde säkerhetshål. Författaren, Tim Reeves, söker öppet efter en efterträdare, men kodbasen är stabil: pluginet drar inga externa beroenden och rör inte databasen utöver sin egen inställningstabell.

Pluginet visas i den allmänna listan över installerade plugins. Se till att det är aktiverat innan du går vidare till konfigurationen.

Efter aktivering, gå till Inställningar → TinyMCE Custom Styles. Den första skärmen erbjuder val om var CSS-filer ska lagras. Jag rekommenderar det tredje alternativet: skapa en separat mapp (till exempel tinymce-styles) i wp-content/uploads. Detta skyddar stilarna vid uppdatering av temat eller själva pluginet. Klicka på "Spara inställningar".

Den första skärmen visar tre placeringsalternativ för CSS. Välj det tredje och ange ett mappnamn, till exempel tinymce-styles.

Scrolla ner på sidan och klicka på "Lägg till ny stil". En konstruktor öppnas där du ställer in:

• Titel, namnet i rullgardinsmenyn (till exempel "Stor blå knapp").
• Typ, selektorbaserad (tillämpas på en specifik tagg), inline (omsluter i span) eller block.
• Klasser och CSS-egenskaper, direkt i gränssnittet, utan filer.

Efter att ha sparat inställningarna, klicka på "Lägg till ny stil" längst ner på sidan. En konstruktor öppnas med fält för titel, typ och CSS-egenskaper.

Spara, öppna ett inlägg och leta reda på rullgardinsmenyn "Format" i den andra verktygsraden. Den nya stilen finns redan där. Markera text, välj den, tillämpas direkt.

Fördelen med pluginet: CSS-filerna (editor-style.css och editor-style-shared.css) skapas automatiskt i den valda mappen. Du hämtar dem via FTP, redigerar i en bekväm editor och laddar upp dem igen, utan att redigera en enda rad i functions.php.

Metod 3: register_block_style(), den inbyggda vägen för Gutenberg

De två tidigare metoderna fungerar i den klassiska TinyMCE-redigeraren och dess klassiska block i Gutenberg. Men om du uteslutande lever i blockredigeraren finns det en mer direkt väg: register_block_style().

Denna funktion registrerar en stilvariant för ett specifikt block, knapp, rubrik, citat, grupp. Varianten visas i blockets sidopanel, och redigeraren applicerar den med ett klick.

Exempel: låt oss lägga till en "Fancy"-variant till en knapp med gul bakgrund och rundade hörn:

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 kopplas antingen via theme.json (för moderna blockteman) 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
}

Detta tillvägagångssätt är inte beroende av TinyMCE och fungerar inbyggt i Gutenberg. För teman med theme.json (alla moderna blockteman) kan stilar beskrivas direkt i styles.blocks-sektionen, utan en enda rad PHP.

⁉️🤔 Vanliga frågor

Format visas inte i redigeraren. Vad är fel?

Gå först till Inställningar → Advanced Editor Tools och kontrollera att "Formats"-knappen inte är borttagen från verktygsfältet. AET tar över kontrollen av knapprader, och ditt mce_buttons_1-filter kan ignoreras tills du uttryckligen lägger till knappen via pluginets gränssnitt. Kontrollera också att mce_buttons_1-filtret är registrerat och returnerar en array med elementet 'styleselect'. Rensa webbläsarens cache och servercachen, ofta ligger problemet bara här.

Kan jag binda en stil till flera selektorer samtidigt?

Ja. Istället för strängen 'selector' => 'a', skicka en array: 'selector' => 'a, button, span'. TinyMCE applicerar stilen på den första matchande föräldertaggen från listan. I praktiken är detta användbart när en visuell stil ska fungera på både länkar och <button>-knappar. Ordningen i arrayen spelar roll: om den markerade texten är inuti en länk som är nästlad i en div, och selektorerna anger 'div, a', kommer stilen att appliceras på div, inte a. Placera mer specifika selektorer först.

Hur skiljer sig editor-style.css från editor-style-shared.css?

Pluginet TinyMCE Custom Styles skapar två filer. editor-style.css laddas endast i TinyMCE-redigeraren. editor-style-shared.css laddas både i redigeraren och på frontend, stilar från den är synliga för webbplatsbesökare. Om en stil bara behövs för redigeringsbekvämlighet, lägg den i editor-style.css. Om stilen ska fungera på webbplatsen, i editor-style-shared.css. Med den manuella metoden är den delade filens motsvarighet temats huvudstilmall, och editor-style.css (en separat fil registrerad via add_editor_style()) påverkar bara förhandsgranskningen inuti TinyMCE.

Är det obligatoriskt att skapa ett barntema för dessa redigeringar?

Nej, koden fungerar också i huvudtemats functions.php. Men vid nästa temauppdatering kommer alla redigeringar att skrivas över. Regeln är enkel: all anpassning via functions.php läggs i ett barntema, detta är en försäkring mot att förlora ändringar. Om du inte har ett barntema än, skapa det på tio minuter genom att följa guiden för barnteman: två filer, style.css med ett sidhuvud och functions.php med import av föräldratemats stilar, så överlever dina anpassade format varje uppdatering.

Pluginet har inte uppdaterats sedan 2024. Bör jag installera det?

I juni 2026 finns pluginet TinyMCE Custom Styles kvar i WordPress.org-katalogen med 8 000+ aktiva installationer. Författaren söker öppet efter en efterträdare, men kodbasen är inte övergiven: den senaste uppdateringen (v1.1.5, juni 2024) stängde sårbarheter. Det finns en risk, men den är hanterbar: pluginet drar inte in externa beroenden och gräver inte djupt i databasen. Om pluginet i framtiden slutar uppdateras kan du alltid överföra stilar till den manuella metoden (steg 1-4 ovan) utan att förlora CSS. Ett alternativ med aktiv utveckling är Advanced Editor Tools (AET) från Automattic, men dess "Create CSS classes menu"-alternativ skräpar ofta ner menyn med onödiga klasser. TinyMCE Custom Styles ger manuell kontroll över varje element, så de är inte konkurrenter utan kompletterar snarare varandra.

Kod, plugin eller block: vad du ska välja för ditt scenario

Valet kokar ner till två frågor: vilken redigerare du arbetar i och om du är redo att öppna functions.php en gång.

Arbetar du i den klassiska redigeraren eller det klassiska blocket i Gutenberg och inte är rädd för kod, ta metod 1. Tio rader PHP, en CSS-fil, full kontroll.

Vill du ha en visuell formatkonstruktör utan att röra kod och med automatisk CSS-generering, installera TinyMCE Custom Styles. Kom ihåg risken med långsiktigt stöd, men i dagsläget levererar pluginet vad det lovar.

Lever du i blockredigeraren, bemästra register_block_style(). Denna väg är inbyggd för Gutenberg, är inte beroende av TinyMCE och stöds av WordPress core.

I vilket som helst av de tre scenarierna får du huvudsaken: formatering med ett klick istället för manuell kopiering av klasser och inline-stilar. Och det är en timme eller två sparad tid per månad på varje regelbundet publicerad webbplats.