How to add custom styles to WordPress Visual Editor

If you want to add custom styles to WordPress visual editor without switching to a text editor, then this article is the one-stop destination for you. You can add custom styles with ease and apply quick formatting to your WordPress posts.

Please note that this tutorial requires the basic working knowledge of CSS.

When do you need custom styles for WordPress Visual Editor?

WordPress visual editor comes with some formatting and style options by default. However, there might be cases when you need to add your own CSS styles to the WordPress visual editor. Custom styles for WordPress visual editor are especially useful when you need to add some extra content blocks, CSS buttons, and taglines.

There is always an option to switch from the visual editor to text editor. Doing so allows you to add custom CSS and HTML code to your WordPress.

However, in order to use some styles over and over again, adding custom styles to WordPress visual editor works best. Doing this is a time-saving option since you do not need to switch back and forth between the visual editor and the text editor.

You can tweak or update styles with ease, without having to edit the posts on your website.

How to add custom styles to WordPress Visual Editor?

Follow these methods to add custom styles to WordPress visual editor.

Method 1: Add custom styles in WordPress Visual Editor using plugin

1. Install and activate the TinyMCE Custom Styles plugin. For details, refer to the guide on how to install a WordPress plugin.

2. After activation, go to Settings >> TinyMCE Custom Styles. Configure the plugin settings.

3. The plugin allows you to choose the location of the stylesheet. You can choose from your theme or child theme’s stylesheets, or you can also choose a custom location.

4. Click on the Save All Settings button to save the changes.

5. Add your custom styles. Scroll down to the style section and click on the Add new style button.

6. Enter the title for the style. This is the title that will be displayed in the drop-down menu.

7. Choose if it is a selector, block element or inline.

8. Add a CSS class and add your required CSS rules. An example is shown in the screenshot below.

9. After adding a CSS style, click on the Save All Settings button.

A custom style is successfully added in the visual editor. To create a post using this custom style:

1. Edit an existing post or create a new one. A Format drop-down menu now appears in the second row of the editor.

2. Select some text in the editor and select the required custom style in the Formats drop-down. The custom style is now applied in the text.

3. Preview your post to check if your custom styles are applied correctly.

Method 2: Add custom styles to WordPress visual editor manually

Using this method, you can manually add custom styles to WordPress visual editor. This method requires you to add code to your WordPress files.

1. Adding a custom styles drop-down menu

 

In this step, you need to add a Formats drop-down menu in the WordPress visual editor. This drop-down allows you to select and apply your custom styles.

Add the following code to the functions.php file of your theme. You can also add it to a site-specific plugin.

function wpb_mce_buttons_2($buttons) {
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

2. Adding select options to drop down menu

After adding a formats drop-down menu, you need to add the options to the drop down that you just created. These options are the CSS styles that you can add to your content.

In this tutorial, three custom styles have been added to create the content block and buttons.

Add the following code to the functions.php file of your theme. You can also add it to a site-specific plugin.

/*
* Callback function to filter the MCE settings
*/

function my_mce_before_init_insert_formats( $init_array ) {  

// Define the style_formats array

	$style_formats = array(  
/*
* Each array child is a format with it's own settings
* Notice that each array has title, block, classes, and wrapper arguments
* Title is the label which will be visible in Formats menu
* Block defines whether it is a span, div, selector, or inline style
* Classes allows you to define CSS classes
* Wrapper whether or not to add a new block-level element around any selected elements
*/
		array(  
			'title' => 'Content Block',  
			'block' => 'span',  
			'classes' => 'content-block',
			'wrapper' => true,
			
		),  
		array(  
			'title' => 'Blue Button',  
			'block' => 'span',  
			'classes' => 'blue-button',
			'wrapper' => true,
		),
		array(  
			'title' => 'Red Button',  
			'block' => 'span',  
			'classes' => 'red-button',
			'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', 'my_mce_before_init_insert_formats' ); 

Now, you can add a new post in WordPress and click on the Formats drop-down menu in the visual editor. The custom styles titles that you just created are now visible.

Note that selecting these styles won’t change the post editor at this point.

3. Add CSS Styles

After creating the style titles, the final step is to add the CSS style rules.

Add the following code to your theme or child theme’s style.css and the editor-style.css files:

.content-block { 
    border:1px solid #eee; 
    padding:3px;
    background:#ccc;
    max-width:250px;
    float:right; 
    text-align:center;
}
.content-block:after { 
    clear:both;
} 
.blue-button { 
	background-color:#33bdef;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

.red-button {
	background-color:#bc3315;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

The editor stylesheet is what changes the appearance of all your content in the visual editor. The location of this file can be found in the theme’s documentation.

If you cannot find the editor stylesheet file in your theme, you can create it. Create a new CSS file with the name custom-editor-style.css and upload it to your theme’s root directory. The following code should then be added to your theme’s functions.php file.

function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

This step completes the process of adding your custom styles into the WordPress visual editor. Add your own elements and styles to get the desired output.

For further questions, or if you need help, please open a support ticket from your HostPapa Dashboard. Click here to learn how to do it.

 

Related Articles

Get online with our affordable web hosting

Get online with our affordable web hosting

Learn more now
HostPapa Mustache