Estilos personalizados en el editor TinyMCE de WordPress

Cuando hacemos un sitio web con WordPress, sobretodo si es para un cliente, nos encontramos con limitaciones el editor, por defecto el editor de Wp viene con estos botones:

Vamos a ver dos formas de ampliar las funcionalidades de este editor, en al primera añadiremos botones standard, en la segunda añadiremos estilos personalizados.

Añadir botones al editor de WordPress

En el fichero functions.php de nuestra plantilla añadiremos este codigo:

function add_more_buttons($buttons) {
 $buttons[] = 'hr';
 $buttons[] = 'del';
 $buttons[] = 'sub';
 $buttons[] = 'sup';
 $buttons[] = 'fontselect';
 $buttons[] = 'fontsizeselect';
 $buttons[] = 'cleanup';
 $buttons[] = 'styleselect';
 return $buttons;
}
add_filter("mce_buttons_3", "add_more_buttons");

Con este resultado

Estilos custom en el TinyMCE

add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );
function my_mce_before_init( $settings ) {
    $style_formats = array(
    	array(
    		'title' => 'Enlace',
    		'selector' => 'a',
    		'classes' => 'link'
    	),
        array(
        	'title' => 'seccion',
        	'block' => 'div',
        	'classes' => 'seccion',
        	'wrapper' => true
        ),
        array(
        	'title' => 'Titulo principal',
        	'inline' => 'h1',
        	'styles' => array(
        		'color' => '#f00',
        		'fontWeight' => 'bold'
        	)
        )
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}

Ahora vamos a personalizar los estilos creados:

add_action( 'admin_init', 'add_my_editor_style' );
function add_my_editor_style() {
	add_editor_style();
}

Y por último creamos la hoja de estilos con el nombre editor-style.css

.link{
        color: #f00;
        text-decoration: none;
}

Estos estilos los tendremos disponibles en nuestro editor de WordPress!