Connect with us

Add Custom Styles to WordPress Visual Editor

solution

Add Custom Styles to WordPress Visual Editor

Do you want more styling options for your text in WordPress ? The WP has text and Visual Editor which allows you to add, create and edit the styles of the content in your site. But writing HTML or CSS code in text editor is difficult for getting custom styles. So, you have to use Visual Editor in WordPress. Here, we provided 2 easy and simple ways for adding Custom Styles to WordPress Visual Editor. Have a look on it.

Why you need custom styles for WordPress Visual Editor

The WordPress Visual Editor has some default formatting styles which allows you to edit, create and format the content you have written. If you need to add any custom style you will write the code in HTML or CSS in the text editor. If you want the same style repeatedly it is difficult to write the same code whenever needed. So, you have to add some custom styles to your WordPress Visual editor.

Steps to add Custom styles to Visual Editor of WordPress

Here, we are providing two methods for adding custom styles to your WordPress Visual editor. One is by using plugins, and the other is by adding code to Visual editor manually.

Method1: Add Custom Styles to WordPress Visual Editor using Plugins

An easy way to add custom styles to your WordPress is using Plugins. We have many WordPress Plugins to add styles to your WordPress Visual Editor. The WordPress plugins like

  • Just TinyMCE Custom Styles.
  • Styles and Layouts.
  • Vanilla Bean.
  • My Custom Styles.
  • Very Simple Custom Styles etc

Among these plugins, Just TinyMCE Custom Styles is the most popular and preferable plugin. The Just TinyMCE is one of the best plugins to add custom styles to your WordPress.

Adding Just TinyMCE Custom Styles Plugin to Visual Editor 

  • Firstly, install Just TinyMCE plugin to your WordPress.
  • Download the plugin Zip folder.
  • Extract the downloaded plugin Zip folder, i.e., wp-content/plugins.
  • Go to Administration Panel Enable Just TinyMCE plugin.
  • Click on the Install
  • Then, activate the plugin
  • Go to Settings >> select Just TinyMCE Custom Styles.
  • Next, choose the location for your style sheets.
  • Select the option Directory of the current Theme.
  • By default, it chooses the current running theme files or child theme files location.
  • Now, you can choose the location for this plugin style sheets.
  • After selecting the location, it enables you to create the styles you needed.
  • Save the changes by clicking Save all settings button.
  • Now, you can create your custom styles which are below the settings.
READ  How to Remove Word Press Spam Comments?

Creating custom styles using plugin Just TinyMCE custom styles

  • After installing and configuring the plugin, you can create your new style in the below section.
  • Here you can create the styles you needed.
  • First, you have to enter the title for the style.
  • Next, select type i.e., style should act inline, block or selectors.
  • Enter Type Value.
  • Create the class you need.
  • Create the style like border, background color and enter their values too.
  • After creating Save the changes by clicking on Save all settings.
  • Now, your new style will be created in the Visual editor.
  • In visual editor second line, you will get a drop down named as formats.
  • The newly created styles will be available in that drop down.
  • Similarly, you can create many styles as you need.
  • Open the existing or new post and add buttons in the text.
  • You can use as many times you needed.

Method 2: Add Custom Styles to WordPress Visual Editor Manually

Without using plugins, you can add code to your WordPress files to get custom styles. Here we are providing steps to create the styles manually. The process involves three steps.

1: Creating drop down menu for WordPress Visual editor

To create a custom style with code first, you have to create a drop down menu which appears in the visual editor. This drop down will have all the styles you have created, and it allows you to select and apply options. To get the drop down in Visual editor you have to add some code in the theme function.php file.

2: Add options to drop down menu

Now we need to add the custom style options to the drop down menu. The styles you created will appear in the drop down. Now, you can use the styles in the drop-down menu, select the style you required and can add it to the new post or already existing post. Now let us create a menu with three styles. The code for menu also to be placed in the themes functions.php file.

1function my_mce_before_init_insert_formats( $init_array ) { 
2
3
4    $style_formats = array( 
5        array( 
6            'title' => 'Content Block', 
7            'block' => 'span', 
8            'classes' => 'content-block',
9            'wrapper' => true,
10            
11        ), 
12        array( 
13            'title' => 'Blue Button', 
14            'block' => 'span', 
15            'classes' => 'blue-button',
16            'wrapper' => true,
17        ),
18        array( 
19            'title' => 'Red Button', 
20            'block' => 'span', 
21            'classes' => 'red-button',
22            'wrapper' => true,
23        ),
24    ); 
25    
26    $init_array['style_formats'] = json_encode( $style_formats ); 
27    
28    return $init_array; 
29  
30}
31add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

After writing the code you will get a drop down in the Visual editor with name format. It includes two buttons with green and yellow color. The buttons will have block level style.

3: Add CSS to the styles

In the above steps,  have created the drop down menu with two buttons. Now let us add CSS to the drop down menu created. CSS to the created menu has to be written in theme’s style.css and editor-style.css files. The CSS for the example has to be  written in style.css. Whereas, editor-style.css is designed for the user comfort where users can write the styles in the editor-style.css.

READ  Fixing “Missed Schedule Post Error” in WordPress

CSS code for style.css

1.content-block {
2    border:1px solid #eee;
3    padding:3px;
4    background:#ccc;
5    max-width:250px;
6    float:right;
7    text-align:center;
8}
9.content-block:after {
10    clear:both;
11}
12.pink-button {
13    background-color:#33bdef;
14    -moz-border-radius:6px;
15    -webkit-border-radius:6px;
16    border-radius:6px;
17    border:1px solid #057fd0;
18    display:inline-block;
19    cursor:pointer;
20    color:#ffffff;
21    padding:6px 24px;
22    text-decoration:none;
23}
24.green-button {
25    background-color:#bc3315;
26    -moz-border-radius:6px;
27    -webkit-border-radius:6px;
28    border-radius:6px;
29    border:1px solid #942911
30    display:inline-block;
31    cursor:pointer;
32    color:#ffffff;
33    padding:6px 24px;
34    text-decoration:none;
35}

Finally, you will get the drop down menu with two different buttons in the Visual editor.

You can use this styles in any other post or page. Also, the styles we have written above have browser compatibility. It works on any browsers.

Conclusion

You can use different custom styles more than we get in the default WordPress Visual editor. Without writing the code every time you can write once and use for every post you compose. Instead of writing long codes you can use plugins for simple and better use. It reduces the time, work and can easily add custom styles to WordPress Visual editor. We hope you get the useful information. For Best WordPress Guidance, keep visiting our site frequently.

Continue Reading
You may also like...

We are a WordPress plugin developer company that focuses on useful WordPress plugin creation and empowering people to earn passive incomes from their blogs. We build unique and groundbreaking plugins that will revolutionize your blog!

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in solution

    Sign up for our newsletter and get a free affiliate e-book!


    About Me:

    Szabi Kisded

    Hi, my name is Szabi and I'm documenting my journey selling plugins on CodeCanyon. I will show you every step of it: learning to code, plugin ideas, WordPress stuff and more. Read more…

    Mega Plugin Bundle:

    CodeCanyon Portfolio:

    Learn to Code Plugins:

    Latest Promotions:

    Recommended Theme:

    Start Your Own Blog:

    Recommended VPN Service:

    Translate Your Blog:

    AdSense Alternative:

    Best Article Spinner:

    Popular Posts:

    Latest Posts:

    To Top

    Privacy Preference Center

        Necessary

        Advertising

        Analytics

        Other