WordPress.org

1. TucoKV
   Member
   Posted 1 year ago #
   

   How can I add a button that will use a class that I'll create in wordpress' CSS files to TinyMCE editor?

   I don't explicitly need to add a button, I might add into "format" dropdown list with my setting, if someone can guide me how or tell me of appropriate plugin?

   Please help me out, this is really urgent. I've seen most of the WP plugins, and most of them have unnecessary functions.

   Thanks

2. Jackson
   Member
   Posted 1 year ago #
   

   Add this to your theme's functions.php file.

   This will add your custom classes to the dropdown.

   function custom_mce_styles( $init ) {
       $init['theme_advanced_buttons2_add_before'] = 'styleselect';
       $init['theme_advanced_styles'] = 'Style Name=styleclass,Style Name2=styleclass2';
       return $init;
   }
   
   add_filter( 'tiny_mce_before_init', 'custom_mce_styles'  );

   Obviously you'll replace Style Name=styleclass,Style Name2=styleclass2 with your own comma sep. list of names and classes.

3. TucoKV
   Member
   Posted 1 year ago #
   

   Ok, thanks, but I can't get it to work.

   I've created .highlighted in my CSS file, and I want to implement it to the dropdown.

   So should I add this:
   

   function custom_mce_styles( $init ) {
       $init['theme_advanced_buttons2_add_before'] = 'styleselect';
       $init['theme_advanced_styles'] = 'Highlighted Style=highlighted';
       return $init;
   }
   
   add_filter( 'tiny_mce_before_init', 'custom_mce_styles'  );

   Please rewrite the code if it's not correct (I guess it's not).

   And where exactly do I add it in functions.php (does it matter as I guess it should follow some hierarchy in that file)

   Thank you very much for your help

4. Jackson
   Member
   Posted 1 year ago #
   

   You can add that code anywhere within your functions.php file. I just tried it and the result was a 'Styles' dropdown in the second row of buttons in the visual editor with one option - 'Highlighted'.

   To style the appearance of the display within the visual editor, you need to create an editor stylesheet in your theme folder - ex: editor-style.css

   Use this in your functions.php file to make TinyMCE apply the style within the editor.

   function my_mce_css() {
   	return get_bloginfo('template_url').'/editor-style.css';
   }
   
   add_filter( 'mce_css', 'my_mce_css' );

5. Jackson
   Member
   Posted 1 year ago #
   

   Note - if you want the style dropdown on the first row of buttons

   function custom_mce_styles( $init ) {
       $init['theme_advanced_buttons1_add_before'] = 'styleselect';
       $init['theme_advanced_styles'] = 'Highlighted Style=highlighted';
       return $init;
   }
   
   add_filter( 'tiny_mce_before_init', 'custom_mce_styles'  );

6. TucoKV
   Member
   Posted 1 year ago #
   

   Thank you very much. I've got it to work, but I didn't get you on how to make it work on WYSIWYG mode.

   What should I put in the CSS file you're mentioning?

   Thank you

7. Jackson
   Member
   Posted 1 year ago #
   

   You would put the appropriate style rules for your custom classes, ex:
   .highlighted { background-color: yellow; }
   Then when the user applies your custom style in the editor, it will match what is shown on the front-end of the site.

8. TucoKV
   Member
   Posted 1 year ago #
   

   I've got you now. Thank you very much for your help.

   Best regards

Topic Closed

This topic has been closed to new replies.