WP Munk > Blog > WordPress Tutorials > How to Add Custom Styling to WordPress Post Editor?

How to Add Custom Styling to WordPress Post Editor?

There are various options available in order to perform the style formatting arrangement in the wordpress post editor. Most of the time when you create a site in wordpress then you may have several thoughts in order to customize the options that must be delivered, so that the quality of the product must be well and good. Button must be one of the item which need to designed in attractive manner that will satisfy our need if we just drag and drop of it rather we need to perform some editing work in order to enhance the attractiveness. Each and every function like taglines, content blocks and other CSS data in the wordpress can be customized as per our need. Let us discuss some of the custom styles that are been performed under the post editor of wordpress.

Manual Process To Customize The Visual Editor

Here is some of the best option to customize the visual editor without any additional installation of plugin through online. At the beginning of editing process in theme files itself, so it’s necessary to take a backup of it and proceed further. There are two things which we mainly focus to bring the change at regular basis in button style and content block of the post. In order to customize the css of drop down list, you need to incorporate the code in the site-specific plugin. The below code will help you to wrap up the editor style to the different word and make you to save the time.

Coding Operation To Customize The Visual Editor

<?php //* Add custom styles to the Styles drop down menu in the TinyMCE Editor //* @link http://anythinggraphic.net/custom-styles-in-wordpress-editor function themeit_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons; } add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' ); function themeit_tiny_mce_before_init( $settings ) { $style_formats = array( array( 'title' => 'Orange Bordered Button', 'inline' => 'span', 'classes' => 'orange-bordered-button button' ),
	array( 'title' => 'Slightly Larger Blue Text', 'inline' => 'span', 'classes' => 'color-blue bigger' ),
);

$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );
?>

This will be really useful for most of the wordpress user in order to customize the style in the post editor in all versions. Moreover it’s also necessary to perform some operation in order to custom the css file to the editor. This mainly helps to perform all the modification in the content and other part of the files that are available in the css code without any pressure. It’s not necessary to be a big coding professional to perform this operation rather some basic knowledge will automatically help to move into the deep concept behind it.
Syntactical Usage Of Post Editor

Add_editor_style() is one of the main feature of post editor that need to be used as a child theme in the wordpress that covers to customize the menu item editor in distinct manner. WordPress is something related to the ocean in which huge information can be gathered and customize to take the web designing world to the next level.

About The Author


Mohammad Tajim

Hello, I am Mohammad Tajim a WordPress Developer with over 14 years of experience building WP Products. I made Munk WordPress Theme and other themes available at metricthemes.com. Follow me on twitter @tajim