How to Add Custom Style Options to WordPress Post Editor | Web Development

The post editor in WordPress, as its name implies, is meant to let you edit posts and content. By default, it doesn’t allow you to add in custom CSS classes. If you want to add custom CSS styles or classes, the only way is to switch to “Text” mode and add it to the HTML code.

Since WordPress is so customizable, there are ways to make your life easier by adding custom style options to the WordPress post editor. Using these custom options, you can apply the CSS styles with just a few clicks. You no longer have to switch to text mode or remember all the CSS classes that go into your posts to make them look nicer.

There are a couple of ways you can add custom style options to WordPress post editor. The first one is to use a free plugin, and the second is to add a code snippet. Both methods work very similarly, so follow the one you are comfortable with.

Note: before proceeding, I assume that you know basic HTML and CSS and can understand things like CSS classes, block level elements, HTML elements, attributes, etc.

1. Using a Plugin

The easiest way to add custom style options in the WordPress post editor is to use a plugin called TinyMCE Custom Styles.

The good thing about this plugin is that it automatically creates an editor stylesheet where you can add custom CSS styles. This is very useful when you want to see the front-end styles related to links, images, forms, buttons, etc., applied inside the post editor.

1. To get started, download, install and activate TinyMCE Custom Styles like any other WordPress plugin. After activating, go to the plugin settings page by navigating to “Settings -> TinyMCE Custom Styles.”

2. Right off the bat, the plugin will display an error message asking to choose where you’d like to place the editor stylesheet file. Depending on your theme, you can choose between three options. Read those options carefully, and choose the one that is suitable for you. In my case I chose the second option because I’m using a custom Genesis child theme. Click on the “Save all Settings” button to save the changes.

3. Scroll down and click on the “Add new style” button. Now, enter the name of the style, select a type (i.e, inline, block, or selector), enter the type value, and then the CSS class.

4. On the rightmost side don’t forget to select if the element is a “Wrapper” or not. If you select this option, the style will create a new block-level element around the selected block-level element in the post editor.

5. If you want to you can even directly add custom CSS styles by clicking on “Add new style” appearing under the “CSS Styles” category. However, I recommend you add those styles in the “editor-style.css” file located in your theme directory (if you’ve selected the second option like me in the second step). It makes it easy to manage.

6. Once you are done, click on the “Save all settings” button appearing at the end of the page.

7. That’s it. From now on you will see a new dropdown menu called “Formats” in the post editor. In that dropdown menu you can find the newly added custom style option along with other pre-configured ones. To use the style, just click on it, and the necessary CSS code will be automatically added to the post editor. You see that code in the text mode.

8. If you’ve added required styles to the editor-style.css file, those styles will be reflected in the post editor when you use the style option from the dropdown menu.

In the future if you disable or remove the plugin, the editor stylesheet will not be deleted. However, you can no longer access the custom options in the post editor.

Related: How to Delete Unused Database Tables in WordPress

2. Manual Method

If you don’t like to use a plugin, then you can achieve the same thing by adding a simple code snippet to your “functions.php” file. There are two parts to this: one is for adding the button to the toolbar to insert CSS code, and the second is to make the CSS style live in the post editor.

Add Custom CSS Style Buttons to the Toolbar

Add the following to the end of your “functions.php” file. This code is actually provided by WordPress itself.

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
 
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
 
// 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
        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', 'my_mce_before_init_insert_formats' );

You need to customize the code to reflect your style options. In the above code each array is a separate style option. Enter your style title next to “title,” block type next to “block,” CSS class next to “classes,” and if the element is a wrapper, type “true” next to “wrapper.” If it is not, type “false.”

Anytime you want to add a new style option, simply duplicate the array and modify the fields. In my case I populated the first array to reflect my “Blue Button” option.

Once you are done with the customization, save and upload the amended “functions.php” file to your server.

Create Editor Stylesheet

Create a file with the name “editor-style.css.” Now, add relevant CSS styles you would like to see in the post editor. Don’t forget that the CSS classes you are creating in the “editor-style.css” file should match with the CSS classes in the above style options code.

Now, open your theme’s “functions.php” file and add the following code.

//Add custom editor stylesheet
function mte_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
    }
add_action( 'init', 'mte_add_editor_styles' );

Upload both the “editor-style.css” and “functions.php” file to your server. That’s all there is to do. From now on you can use the custom style options from the WordPress post editor.

You can see the styles applied in real-time.

Comment below sharing your thoughts and experiences regarding using the above methods to add custom style options in the WordPress post editor.