How to Add Custom Styles to WordPress Visual Editor135

6How to Add Custom Styles to WordPress Visual Editor

Adding a custom style to WordPress allows you to input your style without switching to text editor.

Why and when you need custom styles for WordPress Visual Editor

Although, you can use text editor regularly to add custom HTML and CSS styles in your website. But, if you are using some of the styles regularly, you can add them to visual editor as it makes easier to reuse them when needed.

Using visual editor, save your time and brings consistency in your styles. Also, updating styles at one place will automatically update the following style on all other places within your website.

Here, we will guide you to add custom styles in Visual Editor in 2 different methods

Method 1: Add custom styles in Visual Editor using plugin

To add custom styles in Visual Editor using plugin, follow the steps below:

  • Install and activate ‘TinyMCE Custom Styles’ plugin.
  • After activated, go to Settings > TinyMCE Custom Styles to configure settings
  • This plugin can use your theme or child theme’s stylesheets, or you can set location yourselves. After done click ‘Save All Settings’
  • Now scroll down to style section and click on add new style.
  • Enter details as you need. Demo picture shown below:

oneee

  • After you added a CSS style, click on ‘Save all settings’
  • Now you will be able to see Formats drop down menu in your WordPress visual editor. Demo picture shown below:

orange

Method 2: Manually add custom styles to WordPress Visual Editor

To manually add custom styles to WordPress Visual Editor, follow the steps below:

  • Firstly, add the code below in your theme’s functions.php file or 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');

(note: this code adds Formats drop down menu in WordPress visual editor.)

  • Again, add the code below to your theme’s function.php file or site-specific pugin.
/*

* 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' );

(note: this will add custom styles in the Formats drop down menu. However, they wont have affect right now.)

  • Now, we will add code to the custom styles. You need to add the code below into your theme or child theme’s style.css and 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;

}

Effect of the code:

last

(note: if your theme doesnot have an editor stylesheet file, create a CSS file, name it custom-editor-style.css and insert code below in 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' );