I really like the possibilities of CMS WordPress to work with the visual editor TinyMCE, these features were introduced for those who use the version of WP above 3,9. I do not promise to give you complete information on TinyMCE API, but I will give examples of code that you can use in your work.

Let's start our long and interesting lesson!

Adding a field for choosing a font family and font size

To add elements to work with fonts and their sizes, use the code below.

Here's what we got:

We can change mce_buttons_2 to mce_buttons_3 or mce_buttons_1, this will make it possible to move new elements between the first, second and third panel.

Adding custom font sizes

The default font sizes are not always suitable for the design of the text on the site. Another problem with default fonts, this is what they are configured in points, not pixels, how we got used to it. I prefer to use pixel values (10px, 12px, 13px, 14px..). Below I give an example of a function that will change the default font sizes and units in WordPress..

Adding custom fonts

By default, the engine cannot use custom font names., although they are often needed. If you have created your own template and want to customize the font selection for the user, then you need the following function.

Since some fonts may not be on the user's computer, we need to not only provide a choice of these fonts, but also connect them to WordPress? so that they are displayed correctly in the admin panel. For example, you can include a font Lato which i use above.

New and more convenient layered menu formats

If you haven't used this feature yet, then I advise you to try it in action, and the result of this function will be the menu shown in the picture below.

 

Adding new items to the dropdown menu

Adding new items to the menu is very simple and the first thing you need to know is the add-on that we will use in the code below $settings[‘style_formats_merge’] = true; this add-on will help you not to create a separate menu, but to supplement the already existing formats menu.

Under the number (2) there is an active item that encloses the selected text in a tag span with class text-highlight.

Under the number (1) inactive item, since this item will only work if the text is enclosed in a tag <a> and highlighted. I showed it in the picture below. Carefully examine the code to understand why this is happening., here I let you figure it out, and we'll move on.

Creating a button in the TinyMCE editor

Creating buttons is especially useful for us, since when creating a theme for wordpress we often create shortcodes, and the user does not need to know all the shortcodes by heart. When creating a button, the user will only need to click on it to add a shortcode or specific text. Creating a button will be divided into two parts.

1. Code for declaring a new plugin in functions.php.
2. JS script to add button to editor;

The first script will be closely linked to the JS file. So let me introduce you 2 code:

Adding a script to the functions.php file

Add javascript at /wp-content/themes/intrepidity/js/mce-button.js

Button created and inserts text.

The only disadvantage of such a button is that it takes up a lot of space in the editor., so I suggest making a button with an icon.

You can use the new included styles to customize icons, for admin panel, add them to functions.php file:

If styles need to be loaded from a plugin, you can use the following code:

Create an images folder in your theme folder, if it's not there yet. In the created folder, add an icon called check.png.

Next, add the style for the future icon to the css/my-mce-style.css file.

Rework the previously created script in the js/mce-button.js folder, comment out the caption for the text button: ‘New Button’ и icon: false.

Add a new icon parameter: ‘mce-i-my-mce-icon’, which will add to the new button the class created earlier in the admin panel style file.

If done right, then you will have a button with an icon, which, when pressed, will add an inscription.

Adding a button to the editor with a submenu

We have created a button with an icon, but if you need to create complex template functionality and a lot of buttons, this method will be difficult. In addition, it is inconvenient to work when there are a lot of buttons on the panel.. Now we will try to understand the question “how to add more free space on the editor panel?”. Change the button code in the js/mce-button.js file to the one you see below.

If you look closely at the structure of the code, then you will understand that there is nothing complicated in it and it will not be difficult to process it. Here is the result we get:

If you've done everything right so far, you will see that when you select one of the menu sub-items, the inscription “wp-admin.com.ua – wordpress lessons” will appear in the text field!”.

More often than not, pasting text without modification is not very useful., since when inserting a shortcode, additional options must be specified, who will control the work of the shortcode. You can use a pop-up window to specify options in a shortcode, let's figure out together how to create it.

tinymce wordpress popup

To create a popup window, you need to change the code in the js/mce-button.js file to the following. I'm sure if before that you read carefully and everything worked out for you, then you will not have any problems understanding the code below.

Here's what happened as a result of the work done with the pop-up window.

Lesson Conclusions

What's next? Then everything is in your hands, you can figure out how you will use the shortcodes and toolbar of the tinymce editor. The lesson turned out to be difficult and a little confusing, but we are not at the first lesson either., time to learn to code, if it doesn’t work out but you want to figure out how to embed the code in your theme, I can take the time and conduct a paid lesson.

Source of ideas and inspiration for the lesson:

WordPress 3.9+ TinyMCE 4 Tweaks: Adding Styles, Buttons, Fonts, Drop-downs & Pop-Ups

/* */