WordPress custom colors and CSS classes fit into the editor


If you customizen the backend and add the TinyMCE editor own colors and classes will, should be on the WordPress Plugin Custom Class Selector fall back.

The plug-in approach is identical with the solution of WDMAC, but which is not available as a plugin, but just works and is just as difficult to implement. The advantage of this plugin is, that one can hope for updates and modifications and should therefore prefer.

After installation, the following steps must be taken:

  1. Create a CSS file, e.g.. custom-style.css, which will contain the CSS classes, to add to the TinyMCE editor. Link the style sheet is not forgotten in the header.php
  2. Copy the code from the plugins/custom-class-selector/functions-sample.php in the functions.php des themes
  3. Modify the copied code: Insert the classes and the style sheet name. Bsp:
function CCSConfiguration($configuration) {

    // Define the URL of the stylesheet that holds the CSS definitions for your custom styles
    $configuration['stylesheet_url'] = get_bloginfo('template_url').'/custom-style.css';

    // Define which custom styles are included in the style menu and how each is labeled
    // Format: 'Display Name' => 'classname'
    $configuration['custom_styles'] = array(
        'special gruen' => 'special_gruen',
        'kursiv gruen' => 'kursiv_gruen'
    );

    return $configuration;
}
add_filter('customclassselector_configuration', 'CCSConfiguration');

custom-style.css:

.kursiv_gruen
{
    color:#336666;
    font-style: italic;
}
.special_gruen
{
    color:#336666;
}

To delete the style with the editor again, you have the button “Remove Format” (Eraser) use.