Follow

How to Add Styles to the WYSIWYG Editor

When the users of the CMS are not familiar with HTML , it is useful to add custom styles to the visual WYSIWYG editor interface to ensure all elements are properly formatted.

Instead of having to write HTML or CSS code, the user will just simply select the element or text and apply the relevant format using the style dropdown menu available in the visual editor's 'kitchen sink'.

Registering your styles

Adding the described dropdown menu is pretty easy. TinyMCE, the visual editor that comes with WordPress, has an API that can be used to define custom styles that can be inserted into post content from the Visual editor.

The process involves activating a built-in but hidden 'button' in TinyMCE called styleselect, then defining each style that you want to show in the Styleselect pulldown menu.

The most robust way to register styles is by using the style_formats array within the TinyMCE configuration array, which allows you to specify each format along with its configuration settings defining the format's behaviour.

// Callback function to filter the MCE settings
function your_theme_mce_before_init_insert_formats($init_array) {  
	// Define the style_formats array
	$style_formats = array(  
		// Each array child is a format with its own settings
		array(  
			'title' => '.translation',  
			'block' => 'blockquote',  
			'classes' => 'translation',
			'wrapper' => true,
 
		),  
		array(  
			'title' => '⇠.rtl',  
			'block' => 'blockquote',  
			'classes' => 'rtl',
			'wrapper' => true,
		),
		array(  
			'title' => '.ltr⇢',  
			'block' => 'blockquote',  
			'classes' => 'ltr',
			'wrapper' => true,
		),
	);  
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );  
 
	return $init_array;  
 
} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'your_theme_mce_before_init_insert_formats' );

Style format arguments

  • inline – Name of the inline element to produce for example “span”. The current text selection will be wrapped in this inline element.
  • block – Name of the block element to produce for example “h1″. Existing block elements within the selection gets replaced with the new block element.
  • selector – CSS 3 selector pattern to find elements within the selection by. This can be used to apply classes to specific elements or complex things like odd rows in a table. Note that if you combine both selector and block then you can get more nuanced behaviour where the button changes the class of the selected tag by default, but adds the block tag around the cursor if the selected tag isn't found.
  • classes – Space separated list of classes to apply to the selected elements or the new inline/block element.
  • styles – Name/value object with CSS style items to apply such as colour etc.
  • attributes – Name/value object with attributes to apply to the selected elements or the new inline/block element.
  • exact – Disables the merge similar styles feature when used. This is needed for some CSS inheritance issues such as text-decoration for underline/strikethrough.
  • wrapper – State that tells that the current format is a container format for block elements. For example a div wrapper or blockquote.

The code

The following example code is based on the tutorial Adding Custom Styles in WordPress TinyMCE Editor. Add it to the theme's functions.php and modify the style array according to your needs.

/** 
 * Apply styles to the visual editor 
 */    
add_filter('mce_css', 'your_theme_mcekit_editor_style');  
function your_theme_mcekit_editor_style($url) {  
 
    if (!empty($url))  
        $url .= ',';  
 
    // Change the path here if using different directories  
    $url .= trailingslashit(get_stylesheet_directory_uri()) . '/editor-styles.css';  
 
    return $url;  
}  
 
/** 
 * Filter the array of buttons loaded by TinyMCE and insert the 'styleselect' pulldown menu
 */   
add_filter('mce_buttons_2', 'your_theme_mce_editor_buttons');  
function your_theme_mce_editor_buttons($buttons) {  
    array_unshift($buttons, 'styleselect');  
    return $buttons;  
}  
 
/** 
 * Filter MCE settings to add styles/classes to the "Styles" drop-down 
 */   
add_filter('tiny_mce_before_init', 'your_theme_mce_before_init');  
function your_theme_mce_before_init($settings) {  
 
    $style_formats = array(  
        array(  
            'title' => 'Download Link',  
            'selector' => 'a',  
            'classes' => 'download'  
            ),  
        array(  
            'title' => 'Testimonial',  
            'selector' => 'p',  
            'classes' => 'testimonial',  
        ),  
        array(
	    'title' => 'Dropcap',
	    'inline' => 'span',
	    'classes' => 'dropcap'
	),
        array(  
            'title' => 'Red Uppercase Text',  
            'inline' => 'span',  
            'styles' => array(  
                'color' => '#ff0000',  
                'fontWeight' => 'bold',  
                'textTransform' => 'uppercase'  
            )  
        )  
    );  
 
    $settings['style_formats'] = json_encode($style_formats);  
 
    return $settings;  
 
}  
 
/* 
 * Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts' 
 */  
add_action('wp_enqueue_scripts', 'your_theme_mcekit_editor_enqueue');
function your_theme_mcekit_editor_enqueue() {  
  $StyleUrl = get_stylesheet_directory_uri() . 'editor-styles.css'; // Customstyle.css is relative to the current file  
  wp_enqueue_style('myCustomStyles', $StyleUrl);  
}  

For further information see Adding Custom Styles in WordPress TinyMCE Editor

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk