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.
Thread Starter
TucoKV
(@tucokv)
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
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' );
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' );
Thread Starter
TucoKV
(@tucokv)
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
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.
Thread Starter
TucoKV
(@tucokv)
I’ve got you now. Thank you very much for your help.
Best regards
