The visual editor of WordPress offers basic options for formatting. However, you might need to use custom elements, be it buttons, slogans, advertising messages with a specific format. 

Switching from visual editor to text editor, and adding CSS code each time, takes a huge amount of time. Do you know that you can now add custom formatting options to your visual editor? 

In this tutorial, we will introduce two methods: the simple method (with an Plugin) and the advanced method (without Plugin).

Without further ado, I will present these two methods to you. However, remember that the online form comments is at your disposal in case of misunderstanding on aspect of the tutorial. If you find it interesting, what's more normal than sharing it with your friends on social networks?

The simple method (with an Plugin)

It is an alternative for those who do not want to waste time. Le Plugin to install is TinyMCE and TinyMCE know more Profesional Formats ans Styles (Rather long as a name, isn't it?), which you can download from WordPress.org.

Once you have activated the Pluginyou will need to access this location " settings >> TinyMCE Profs Styles To configure the Plugin.

Ce Plugin allows you to choose a style file, either from the active theme or from child theme Or from a custom location in the folder " wp-content Of your installation. For my part, I chose the first option, that is to say the style file of the active theme. 

However, you must be aware that by choosing this option, if the theme were to be updated, then the style file (" style.css ")will be (Which will cancel your changes).

Control-of-plugin

Once you have selected the location of your files, save the changes. You will now be able to make a change to your theme's style files. To add a new style, scroll down and click on the button add new style ».

how add-a-new-style

Unlike the other method, the only thing you will have to do here is enter CSS codes. 

Le online form adding a new style is quite simple to understand:

  • The column " title » serves as the button title and will be visible in the visual editor
  • The "type" column allows you to define the type of the element
  • The column "type value" matches the name of the element's tag (Span, div, p, button, etc..)
  • The column " class » corresponds to the attribute " class Of the tag
  • The column " css styles » corresponds to a CSS style (You can add more than one)
  • The column " attributes » speaks for itself.

The other columns (Wrapper & Exact) did not produce a satisfactory result, so we considered that they are not essential.

The result of the exercise

With practice you will come to such results (These are mine, you can certainly do better).

The method of developers (without Plugin)

With this method, we will have to modify some files of the active theme. You should therefore make a backup of your theme, which will be useful in case of problems.

presentation of new styles on the visual editor

The first thing to do is add a new drop down menu on the visual editor. So I would ask you to copy this code and add it to the file " functions.php Of the active theme, or on one of the plugins assets.

function bpc_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); return $ buttons; } add_filter ('mce_buttons_2', 'bpc_mce_buttons_2');

This code adds a new dropdown menu on the second row of the toolbartools of the visual editor. So you have to flip this line to see it.

Now what we're going to do is add some elements to this menu. And for that, we will use this script.

/ * * Callback function to filter the MCE settings * / function my_mce_before_init_insert_formats ($ init_array) {// Style definition $ style_formats = array (// Each child array has configurations array ('title' => 'Block Content', ' block '=>' span ',' classes '=>' content-block ',' wrapper '=> true,), array (' title '=>' Blue Button ',' block '=>' span ',' classes' => 'blue-button', 'wrapper' => true,), array ('title' => 'Bouton Rouge', 'block' => 'span', 'classes' =>' red-button ' , 'wrapper' => true,),); // Add the array in JSON format $ init_array ['style_formats'] = json_encode ($ style_formats); return $ init_array; } // Add a filter to the initialization of the visual editor add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

What you can add to the file functions.php Or in a Plugin active. In this code, you can see that we have added new 3 submenus. 

By studying the code carefully, you will notice that each menu has a title (Official Qualification) that you will see on the drop-down menu, the name of the tag (block), the class of the tag (classes) and of course the option that allows you to wrap the contents from the submenu in the tag (block).

To display these new buttons on your theme, you must necessarily add this style to the " style.css Of your active theme (you can customize this code later).

.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: point; 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: point; color: #ffffff; padding: 6px 24px; text-decoration: none; }

In summary, you must paste this code on the style file of your active theme (" style.css ") or on the style file of " child theme » and finally on the visual editor style customization file (" editor-style.css ").

In case you don't know, on WordPress you can access the theme editor by clicking on the "sub-menu" editor "Of menu « Appearence » (Appearence >> editor).

how access-al-editor-the-theme

The files to be modified are on the right (hope you did not forget to make a backup, because it is tricky to modify these files).

lists-of-files-available-the-theme

Please note: if your theme does not offer a visual editor customization file (" editor-style.css "), then you will need to create one and upload it to your theme directory. The principle of sending the file is identical to that of sending WordPress FTP.

The only difference here is that you will have to look for the active theme folder. You will then need to integrate your file into the system

Function custom-editor () {add_editor_style ('custom-editor-style.css'); } Add_action ('init', 'custom_editor');

That's all there is to it. Now you can make changes as you wish, let your talent speak !!! That's it for this tutorial, Ihope that it will help you. Please feel free to contact us if you do not understand some points.