Add custom CSS classes to the wysiwyg drop-down (4 posts)

  1. tamlyn
    Posted 5 years ago #

    How can I add custom classes to the drop-down 'Class' menu that appears when editing a link or image in TinyMCE (the one that allows you to select 'alignleft' and 'wp-caption')?

    Some of the links on my client's site have a special icon and this is done by adding a class of 'internal'. Rather than ask my client to faff around with the HTML it would be nice if they could just select the class from the drop-down.

  2. tamlyn
    Posted 5 years ago #

    Solution is in the mce_css hook. Add the following to your functions.php to import all your custom styles:

    function ses_tinymce_css($wp) {
            $wp .= ',' . get_bloginfo('stylesheet_url');
            return $wp;
    add_filter( 'mce_css', 'ses_tinymce_css' );

    Many thanks to Lee Willis for this elegant solution.

  3. McPace
    Posted 5 years ago #

    Thank you very much!!

  4. McPace
    Posted 5 years ago #

    This is really great, however a side effect is that the content section takes on a very odd CSS. Partially from the theme, and partially from default wordpress. For example I have grey background, dark grey text, but the text is centered and the links are default colors... makes for a disconnected experience.

Topic Closed

This topic has been closed to new replies.

About this Topic