El conjunto estándar de botones de formato en el editor de WordPress es conocido por todos: negrita, cursiva, listas, citas. Pero cuando necesita insertar con frecuencia un botón de un color específico, un bloque de advertencia o un pie de foto con un marco corporativo, la rutina se impone con toda su fuerza. Cada vez: cambie al modo texto, escriba style="", copie clases de una hoja de referencia. Un botón sale azul, otro azul claro. Un bloque con sombra, otro sin ella.

El problema no es la falta de herramientas, sino que el menú desplegable «Formatos» en TinyMCE está oculto por defecto. E incluso si lo activa, está vacío: WordPress no sabe qué estilos necesita usted. Pero puede añadirlos ahí.

Existen tres enfoques: mediante código en functions.php, mediante un plugin con un constructor visual y mediante el mecanismo nativo del editor de bloques register_block_style(). Los tres funcionan y cubren escenarios diferentes: desde el control manual de cada píxel hasta «clic y aplicado».

💡 Resumen rápido:

• Activamos el menú desplegable «Formatos» en el editor clásico con el filtro mce_buttons_1 y lo poblamos con nuestros propios estilos mediante tiny_mce_before_init, con el código paso a paso incluido.
• Creamos editor-style.css para la vista previa en vivo directamente en el editor: un botón se ve como un botón incluso antes de la publicación.
• Instalamos TinyMCE Custom Styles, un constructor visual de formatos sin tocar código, con archivos CSS autogenerados.
• Exploramos la ruta nativa para Gutenberg: registramos variaciones de bloque mediante register_block_style(), conectamos estilos mediante theme.json o wp_add_inline_style().

Qué son los estilos personalizados y por qué los necesita

Un estilo personalizado es un preajuste de CSS que se aplica a un fragmento seleccionado a través del menú desplegable del editor. En lugar de envolver un párrafo en <span style="..."> por enésima vez, elige «Resaltado» en el menú «Formatos» y obtiene un resalte amarillo con esquinas redondeadas. Un clic.

Tres razones para configurar esto una vez y olvidarse:

• Consistencia. Todos los botones, advertencias y pies de foto se ven igual de una publicación a otra. El diseño no se desvía.
• Velocidad. El editor no indaga en el CSS ni copia clases mágicas de un bloc de notas, solo presiona un botón.
• Seguridad. Nadie sobrescribe accidentalmente el marcado mediante estilos en línea en el modo texto.

Escenarios típicos: botón de llamada a la acción (theme-button), bloque «Importante» con icono y borde de color, lista con viñetas de verificación, pie de foto con estilo corporativo, resaltado de código dentro de un párrafo.

Método 1: Código, mediante functions.php y editor-style.css

La ruta para quienes no temen abrir functions.php una vez. Resultado: el menú desplegable «Formatos» aparece en la barra de herramientas de TinyMCE, y dentro están sus propios estilos. Diez líneas de PHP, un archivo CSS, cero plugins innecesarios.

Paso 1. Active el botón «Formatos»

Por defecto, la lista desplegable de formatos styleselect está oculta. Este filtro la devuelve a la primera línea del editor. Coloque el código en el functions.php del tema activo o, más correctamente, del tema hijo:

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

El hook mce_buttons_1 añade el botón a la primera fila de la barra de herramientas. Si prefiere la segunda o la tercera, use mce_buttons_2 o mce_buttons_3.

Guardado functions.php, abierta cualquier entrada, apareció un menú desplegable «Formatos» en la fila superior a la izquierda. Aún vacío por ahora.

Paso 2. Registre sus propios estilos

Ahora llenemos el menú con formatos reales. Añada un segundo filtro al mismo 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' );

Qué significan los parámetros de cada elemento:

• title, el nombre que el editor verá en el menú desplegable.
• selector, la etiqueta HTML a la que se aplica el estilo. 'a' significa que «Botón del tema» solo funcionará en enlaces.
• inline, envuelve el texto seleccionado en una etiqueta (normalmente span) con la clase especificada. Perfecto para resaltar una palabra o frase dentro de un párrafo.
• classes, clase CSS (o clases separadas por espacio) añadida al elemento.

Añada sus propios elementos al array siguiendo la misma plantilla. La lista completa de parámetros aceptados está en la documentación de TinyMCE en developer.wordpress.org.

Paso 3. Escriba el CSS para el frontend

El menú está lleno, pero el navegador aún no sabe qué aspecto tiene .theme-button. Añada el CSS a la hoja de estilos del tema (o tema hijo):

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
}

Tras guardar, el botón se estiliza en el frontend. Pero en el panel de administración, el editor aún no lo muestra.

Paso 4. Añada editor-style.css para la vista previa en el editor

Para mostrar los estilos directamente en el editor visual antes de la publicación, necesita un archivo editor-style.css separado. WordPress puede recogerlo:

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

Cree un archivo editor-style.css en la raíz del tema y copie allí el CSS del paso 3. Si trabaja con un tema de terceros, cree este archivo en el tema hijo: WordPress verificará primero el tema hijo y, al encontrar allí editor-style.css, lo cargará en lugar del del tema padre.

Resultado: seleccionó un texto, eligió «Highlight», el resaltado amarillo se ve de inmediato en el editor. Hizo clic en un enlace, eligió «Theme Button», se convierte en un botón azul.

Método 2: plugin TinyMCE Custom Styles, sin tocar código

Si no quiere lidiar con functions.php pero necesita estilos, existe un plugin listo para usar. Hace lo mismo mediante una interfaz visual en el administrador.

Instale y active TinyMCE Custom Styles. A junio de 2026, el plugin tiene más de 8.000 instalaciones activas y es compatible con el bloque clásico de Gutenberg a partir de la versión 1.1.1. La última actualización (v1.1.5, junio de 2024) cerró vulnerabilidades. El autor, Tim Reeves, busca abiertamente un sucesor, pero el código es estable: el plugin no incorpora dependencias externas y no toca la base de datos más allá de su propia tabla de opciones.

El plugin aparece en la lista general de plugins instalados. Asegúrese de que esté activado antes de proceder a la configuración.

Tras la activación, vaya a Ajustes → TinyMCE Custom Styles. La primera pantalla ofrece elegir dónde almacenar los archivos CSS. Recomiendo la tercera opción: crear una carpeta separada (por ejemplo tinymce-styles) en wp-content/uploads. Esto protegerá los estilos al actualizar el tema o el propio plugin. Haga clic en «Save Settings».

La primera pantalla muestra tres opciones de ubicación para el CSS. Elija la tercera y defina un nombre de carpeta, por ejemplo tinymce-styles.

Desplace la página hacia abajo y haga clic en «Add New Style». Se abrirá un constructor donde podrá configurar:

• Title, el nombre en el menú desplegable (por ejemplo «Large Blue Button»).
• Type, basado en selector (se aplica a una etiqueta específica), en línea (envuelve en span) o bloque.
• Classes y propiedades CSS, directamente en la interfaz, sin archivos.

Tras guardar la configuración, haga clic en «Add New Style» al final de la página. Se abrirá un constructor con campos para título, tipo y propiedades CSS.

Guarde, abra cualquier entrada y localice el menú desplegable «Formats» en la segunda fila de la barra de herramientas. El nuevo estilo ya está ahí. Seleccione el texto, elíjalo y se aplica al instante.

La ventaja del plugin: los archivos CSS (editor-style.css y editor-style-shared.css) se crean automáticamente en la carpeta seleccionada. Usted los obtiene por FTP, los edita en un editor cómodo y los vuelve a subir, sin tocar ni una sola línea del functions.php.

Método 3: register_block_style(), la vía nativa para Gutenberg

Los dos métodos anteriores funcionan en el editor clásico TinyMCE y en su bloque Clásico dentro de Gutenberg. Pero si usted vive exclusivamente en el editor de bloques, existe un camino más directo: register_block_style().

Esta función registra una variación de estilo para un bloque específico, botón, encabezado, cita, grupo. La variación aparece en el panel lateral del bloque y el editor la aplica con un clic.

Ejemplo: añadamos una variación «Elegante» a un botón con fondo amarillo y esquinas redondeadas:

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

El CSS se conecta mediante theme.json (para temas de bloque modernos) o mediante 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
}

Este enfoque no depende de TinyMCE y funciona de forma nativa en Gutenberg. Para temas con theme.json (todos los temas de bloque modernos), los estilos pueden describirse directamente en la sección styles.blocks, sin una sola línea de PHP.

⁉️🤔 Preguntas frecuentes

Los formatos no se muestran en el editor. ¿Qué ocurre?

Primero, vaya a Ajustes → Advanced Editor Tools y asegúrese de que el botón «Formatos» no se ha eliminado de la barra de herramientas. AET intercepta el control de las filas de botones y su filtro mce_buttons_1 puede ignorarse hasta que añada explícitamente el botón a través de la interfaz del plugin. Compruebe también que el filtro mce_buttons_1 está registrado y devuelve un array con el elemento 'styleselect'. Limpie la caché del navegador y la del servidor; a menudo el problema se reduce solo a esto.

¿Puedo vincular un estilo a varios selectores a la vez?

Sí. En lugar de la cadena 'selector' => 'a', pase un array: 'selector' => 'a, button, span'. TinyMCE aplicará el estilo a la primera etiqueta padre coincidente de la lista. En la práctica, esto es útil cuando un mismo estilo visual debe funcionar tanto en enlaces como en botones <button>. El orden en el array importa: si el texto seleccionado está dentro de un enlace anidado en un div y los selectores especifican 'div, a', el estilo se aplicará a div, no a a. Ponga primero los selectores más específicos.

¿En qué se diferencia editor-style.css de editor-style-shared.css?

El plugin TinyMCE Custom Styles crea dos archivos. editor-style.css se carga solo en el editor TinyMCE. editor-style-shared.css se carga tanto en el editor como en el frontend; los estilos de este archivo son visibles para los visitantes del sitio. Si un estilo se necesita solo para comodidad de edición, póngalo en editor-style.css. Si el estilo debe funcionar en el sitio, en editor-style-shared.css. Con el enfoque manual, el análogo del archivo compartido es la hoja de estilos principal del tema, y editor-style.css (un archivo separado registrado mediante add_editor_style()) solo afecta a la vista previa dentro de TinyMCE.

¿Es obligatorio crear un tema hijo para estas modificaciones?

No, el código funciona también en el functions.php del tema principal. Pero en la siguiente actualización del tema, todas las modificaciones se sobrescribirán. La regla es simple: cualquier personalización mediante functions.php va en un tema hijo; esto es un seguro contra la pérdida de cambios. Si aún no tiene un tema hijo, créelo en diez minutos siguiendo la guía de temas hijo: dos archivos, style.css con una cabecera y functions.php con la importación de los estilos del tema padre, y sus formatos personalizados sobrevivirán a cualquier actualización.

El plugin no se actualiza desde 2024. ¿Debería instalarlo?

A fecha de junio de 2026, el plugin TinyMCE Custom Styles sigue en el catálogo de WordPress.org con más de 8.000 instalaciones activas. El autor busca abiertamente un sucesor, pero el código no está abandonado: la última actualización (v1.1.5, junio de 2024) cerró vulnerabilidades. Existe un riesgo, pero es manejable: el plugin no incorpora dependencias externas ni profundiza en la base de datos. Si en el futuro el plugin dejara de actualizarse, usted siempre puede transferir los estilos al método manual (pasos 1 a 4 anteriores) sin perder el CSS. Existe una alternativa con desarrollo activo, Advanced Editor Tools (AET) de Automattic, pero su opción «Crear menú de clases CSS» a menudo satura el menú con clases innecesarias. TinyMCE Custom Styles da control manual sobre cada elemento, así que no son competidores, sino que más bien se complementan.

Código, plugin o bloques: qué elegir según su escenario

La elección se reduce a dos preguntas: en qué editor trabaja usted y si está dispuesto a abrir functions.php una vez.

Si trabaja en el editor clásico o en el bloque Clásico de Gutenberg y no le teme al código, elija el método 1. Diez líneas de PHP, un archivo CSS, control total.

Si quiere un constructor visual de formatos sin tocar código y con generación automática de CSS, instale TinyMCE Custom Styles. Tenga presente el riesgo de soporte a largo plazo, pero a día de hoy el plugin cumple lo que promete.

Si vive en el editor de bloques, domine register_block_style(). Esta vía es nativa de Gutenberg, no depende de TinyMCE y cuenta con el respaldo del núcleo de WordPress.

En cualquiera de los tres escenarios, usted obtiene lo principal: aplicar formato en un clic en lugar de copiar manualmente clases y estilos en línea. Y eso supone una o dos horas de tiempo ahorradas al mes en cualquier sitio que se publique con regularidad.