There is often a problem in WordPress : the default apparence of the Tinymce. Tinymce is the editor of posts and pages.In this tutorial, I will try to give some tricks I learn to customize it.

1 – Add custom stylesheet to the editor

A recurring issue is that there is a huge difference between the look of your content in the editor and what you get as a final result. One of the solution can be to add a custom stylesheet to Tinymce.

First you have to declare it in function.php :

add_editor_style('editor_style.css');

Then create a file in the root of your template directory called editor_style.css.
You name it whatever you like but it must correspond to what you declare in function.php.

And finally add some styles in your file and the job is done !

p{
    font-familly : "Helvetica", Arial, sans-serif;
    font-size : 14px;
}

2 – Add more options / buttons

Sometimes we want to add tables, titles… but there is no way to do it with the default configuration. So one of the option is to add the plugin Tinymce Advanced.

This plugin will allows you to add more buttons on the tool bar like table, titles, font color… and styles ! This one is important because we will need it after in this tutorial.

Capture d’écran 2014-01-11 à 11.59.17

 

As I said, there is an admin interface where you can add as many tool bars you want. You can rearrange the buttons, add separators, spaces… And all with drag and drop which is very convenient.

Capture d’écran 2014-01-11 à 11.49.39

 

There are also options and especially this one which can be very useful in some case :

Capture d’écran 2014-01-11 à 11.51.18

So, I recommend you to download this plugin, mainly if you want to add customs styles.

download Tinymce Advanced

 More info

3 – Add custom styles

Ok now we feel more comfortable with the editor, but there is still something which is not very convenient. When we want to add a custom « block », we can do it with shortcodes (but I won’t explain this here). The thing is that shortcodes can’t let you see the final result of the block.

For example, we want to add a button. If a shortcode allow you to this, it could be like this :

[button text="my button"]

But,
we can also add a .button class to our custom stylesheet so we’ll just apply this this class to the text « my button ».

First, be sure to add Tinymce Advanced plugin and activate it. Then go to Settings > Tinymce Advanced and add the « styles » dropdown button in your tool bar. Save the configuration.

Add a style (in our case it will be the class .button) in your custom stylesheet (part 1).

.button{
	background-color: #888;
	border:1px solid #777;
	padding:10px 20px;
	color: #FFF;
	display:inline-block;
}

 

Then add this to you function.php :

add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title'    =>  'My Button',
            'inline'    => 'button',
            'classes'   => 'button',
            'wrapper'   => true
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}

And now you get this style available in the style dropdown menu.

A quick explaining of the lines of code.
$style_formats : an array of array. You can add as many array on it as you want. each array represent a style.

The array keys available are :

  • title : title of the style in the dropdown menu
  • 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 behavior 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 color 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.

 

And that all folks ! I hope that this will help you.