Do you want to add custom styles on WordPress visual editor? Adding Custom Styles lets you quickly apply formatting without going to the text editor. In this article, we will show you how to add custom styles to the WordPress visual editor.
Note: This tutorial requires basic knowledge of CSS.
When will you need to add a custom style on the WordPress Visual Editor?
By default, WordPress's visual editor offers basic formatting and styling options. However, sometimes you will need to have custom styles handy which will allow you to for example add CSS buttons, contents, hooks, etc.
You can always switch from visual editor to text editor and add custom HTML and CSS code. But if you regularly use certain styles then it would be better to add them in the visual editor so that you can easily reuse them.
This will save you a huge amount of time, and also allow you to always use the same styles everywhere on your Website.
More importantly, you can easily edit or update styles without having to edit the articles on your site.
We will now discover how to do this on WordPress.
1 Method: Add a custom style with a plugin
The first thing you need to do is to install and activate the plugin " TinyMCE Custom Styles ". For more details see our step by step guide on how to install a WordPress Plugin.
After activation, you must visit " Settings> Settings »TinyMCE Custom Styles To configure the plugin settings.
The plugin allows you to choose the location of stylesheet files. It can use your theme or child theme style, or you can choose a custom location.
After that, you have to click on the button " save all settings To store your settings.
Now you can add your custom styles. You need to scroll to the style section and click on the button Add new style ».
You must first enter a title for the style. This title will be displayed in the drop-down menu. Then you need to define. Whether it is a row, a block, or a selection element.
After that add a CSS class and then add your CSS rules as shown in the screenshot below.
Once you have added a CSS style, simply click on the “save all settings” button to save your changes.
You can now edit an existing article or create a new one. You will notice a format in the drop-down menu, in the second row of the WordPress visual editor.
Just select a text in the editor, then choose your custom style from the drop-down menu to apply it.
You can now preview your article to see if your custom styles apply correctly.
2 Method: Manually Add Styles to the Visual Editor
This method requires you to manually add code to your WordPress files. If this is your first time doing this, then check out our tutorial on how to add a WordPress Plugin.
Step 1: Add a custom style from the drop-down menu of the WordPress Visual Editor.
First, we'll add a drop-down menu on the WordPress visual editor. This drop-down menu will then allow us to select and apply our custom styles.
You must add the following code to your functions.php file or on your plugin.
function wpb_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); return $ buttons; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Step 2: How to add options in the drop-down menu
Now you will need to add some options to the drop down menu you just created. You will then be able to choose and apply these options from the formats in the drop-down menu.
For this tutorial, we will add three custom styles to create contents block and buttons.
You will need to add the following code to the "functions.php" file of your functions.php or a specific plugin.
/ * * 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');
You can now add a new post on WordPress and click on the formats from the visual editor drop down menu. You will notice that your custom styles are now visible.
However, their selection will not make any difference on the visual editor of WordPress.
3 Step: Add a CSS Style
Now the last step is to add CSS style rules for your custom styles.
You will need to add this CSS in the style.css file of your theme or that of the child theme.
.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; }
The editor style sheet controls the appearance of your contents in the visual editor. Check the documentation to see how to find the location of this file.
If your theme doesn't have a stylesheet file, then you can always create one. Just create a new CSS file and name it " Custom-editor-style.css ».
You need to upload this file to your theme's root directory, then add this code to your 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');
That's all. You have just added your custom styles in the WordPress visual editor. You can now make the customizations that you think are right.
Feel free to share this tutorial with your friends on your favorite social networks.
