A style button improves the visual publisher of WordPress adding

It learns to add classes to the visual publisher of WordPress

You are of that when they write an entrance in your blog uses customized classes to give format to the text? Do you have left short the bellboys of TinyMCE and you need more? In this tutorial I am going to explain you of very simple form how to add classes to visual publisher TinyMCE, defined in a style sheet CSS.

First that you must know it is that TinyMCE can be customizar totally, adding or clearing the bellboys who you want, but that we are not going it to see here. In order to do it simple, we are only going to show a characteristic that by defect is hidden and can be useful for many.

Activating the pull-down menu of format

The first step that we must give is to activate styleselect, a pull-down menu where it will be several predefined styles. The code would be something thus (logically we add it in ours functions.php, if possible in ours child theme):

//With this function we add ˜styleselect™ to the Array of shown bellboys function custom_mce_buttons_2 ($buttons) \ {array_unshift ($buttons, ˜styleselect™);
 return $buttons;} to add_filter (˜mce_buttons_2™, ˜custom_mce_buttons_2™);

What we must understand:

  • array_unshift: it adds to the Array of bellboys the button who we want to show
  • We are showing it in the second bar of TinyMCE, could use mce_buttons for first, mce_buttons_3 or mce_buttons4 for the rest. We use second because we can activarla/desactivarla from the first bar, and third or fourth in wordpress they do not come activated by defect (although we could activate them if we wanted).

As we see in the image, it already appears our pull-down menu showing the styles. Now we are going to add the classes that we have defined in a style sheet CSS and that we used frequently. I will add two as example: œ.txt_azul and œ.txt_rojo, that I can use to change to the color of letter or any other characteristic that it defines by means of CSS. Again, in ours functions.php:

function my_mce_before_init_insert_formats ($init_array) \ {  
	//We defined our styles in the Array $style_formats = Array (  
		//In each Array we defined a style associated to a class
		Array (  
			˜title™ => ˜. Blue text™, //Title that we want to give him
			˜inline™ => ˜span™, //Element that we will add
			˜classes™ => ˜txt_azul™, //Class that we will use
		Array (
			˜title™ => ˜. Red text™,  
			˜inline™ => ˜span™,  
			˜classes™ => ˜txt_rojo™,
	$init_array [˜style_formats™] = json_encode ($style_formats);  
	return $init_array;  
} to add_filter (˜tiny_mce_before_init™, ˜my_mce_before_init_insert_formats™);

With this we obtained that our pull-down menu shows to these two classes and power to apply them to the selection that we do in the visual publisher. How it will do it? It will put our selection of the following way: >texto of ejemplo</span> <span class= txt_azul. And thus with all the styles that we want.

But I want to add the class to an element that already exists¦

In that case, also he is very simple! The code is practically the same, I believe that it will not be necessary to explain it too much. We will only have to change the form in which we created the Array with each style, being thus:

 Array (˜title™ => ˜Red Selector™, ˜selector™ => ˜h1, h2, h3, h4, h5, h6, p, strong, member state™, ˜classes™ => ˜txt_rojo™,),

Of this form in our selection it will look for an element similar to which is defined in ˜selector™ and, if it exists, will add inline the class to him.

Showing the styles in the visual publisher

Indeed, the publisher does not understand these classes that we are adding, for that reason we will not see results until we do preview or we publish the entrance. But, there is a form very simple to be able to see them in the publishing one conforms we used them. For it we will have to create a style sheet new (or to use the one that we want, I prefer to have organized it more) in that we will tell him to TinyMCE how to interpret these classes. This is what we will include in our file CSS:

body#tinymce.wp-publisher .txt_azul \ {color: #36bae2;} body#tinymce.wp-publisher .txt_rojo \ {color: #ff6565;}

And thus with any style that we want to visualize. Finally it will be to tell him to TinyMCE where is our file CSS, so finally we will add in functions.php our last lines of code.

function add_custom_editor_styles () \ {add_editor_style (˜ours-fichero.css™); } add_action (˜admin_init™, ˜add_custom_editor_styles™);

Now when we apply it we can see the results live!

With this it is explained, I hope that it has been really easy to understand. Now only it is to put it in practice and to add so many styles as you need. If you he has been useful or you have any doubt you can leave a commentary and I will try to help you.


It lets a commentary

To subscribe to me!

No, thanks.