Adding custom CSS to tinyMCE in WordPress

I am trying to add custom CSS styles to a new menu in tinyMCE. I started using the tinymce-kit plugin. I managed to create a new menu in the editor, however, it does not contain the classes that I defined. Instead, it appears to have a set of default classes labeled Headings, Inline, Blocks and Alignment.

Here is my functions.php:

    <?php function my_theme_enqueue_styles() {
        $parent_style = 'ambition'; // This is 'ambition' for the ambition theme.
    
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
   
    function scanwp_buttons( $buttons ) {
        array_unshift( $buttons, 'fontselect' );
        array_unshift( $buttons, 'fontsizeselect' ); 
        return $buttons; }
         add_filter( 'mce_buttons_2', 'scanwp_buttons' );
        function scanwp_font_size( $initArray ){
        $initArray['fontsize_formats'] = "9px 10px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px";
        return $initArray; }
        add_filter( 'tiny_mce_before_init', 'scanwp_font_size' );
    
    if ( is_admin() ) { 	include('tinymce-kit.php'); }
    
    /**  * Registers an editor stylesheet for the theme.  */ function wpdocs_theme_add_editor_styles() {
        add_editor_style( 'editor-style.css' ); } add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' ); ?>

Here is the tinymce-kit.php

    <?php
    /*
     * Helper functions for changing the visual editor appearance.
     *
     * version 0.1
     *
     * To enable: add this directory to your theme's folder,
     * edit editor-styles.css then add the user selectable class names
     * to the $classes array below and include this file in your theme's
     * functions.php file by adding 
    
    	if ( is_admin() ) {
    		include('tinymce-kit/tinymce-kit.php');
    	}
    
     * If your theme has a settings page, you can also add an option so the user
     * can enable or disable this: if ( is_admin() && get_option('style_the_editor') ) ...
     *
     * @package TinyMCE Kit
     *
     * Released under the GPL v.2, http://www.gnu.org/copyleft/gpl.html
     *
     * This program is distributed in the hope that it will be useful,
     * but WITHOUT ANY WARRANTY; without even the implied warranty of
     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     * GNU General Public License for more details.
     */
    
    
    // Apply styles to the visual editor
    
    add_filter('mce_css', 'mcekit_editor_style');
    function mcekit_editor_style($url) {
    
    	if ( !empty($url) )
    		$url .= ',';
    
    	// Change the path here if using different directories
    	$url .= trailingslashit( get_stylesheet_directory_uri() ) . 'editor-styles.css';
    
    	return $url;
    }
    
    
    // Change TinyMCE's settings
    
    /**
     * Add the "Styles" drop-down in the editor.
     * This filter will add it to the beginning of the second row of buttons.
     * To add to another place see function wp_tiny_mce() in wp-admin/includes/post.php
     */
    add_filter('mce_buttons_2', 'mcekit_editor_buttons');
    function mcekit_editor_buttons($buttons) {
    
    	array_unshift($buttons, 'styleselect');
    
    	return $buttons;
    }
    
    /**
     * Set the CSS classes in the Styles drop-down in the editor.
     * These classes can be added by the users and should be defined in your main style.css file too.
     * This usually works well with "inline" type of styles like color, font, text-decoration, etc.
     */
    add_filter('tiny_mce_before_init', 'mcekit_editor_settings');
    function mcekit_editor_settings($settings) {
    
    	if ( !empty($settings['theme_advanced_styles']) )
    		$settings['theme_advanced_styles'] .= ';';
    	else
    		$settings['theme_advanced_styles'] = '';
    
    	/**
    	 * The format for this setting is "Name to display=class-name;".
    	 * More info: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/theme_advanced_styles
    	 *
    	 * To be able to translate the class names they can be set in a PHP array (to keep them readable)
    	 * and then converted to TinyMCE's format. You will need to replace 'tinymce-kit' with your theme's textdomain.
    	 */
    	$classes = array(
    		__('Prose', 'tinymce-kit') => '.prose',
    		__('Middle', 'tinymce-kit') => '.middle',
    		__('Flatline', 'tinymce-kit') => '.flatline'
    	);
    
    	$class_settings = '';
    	foreach ( $classes as $name => $value ) {
    		$class_settings .= "{$name}={$value};";
    	}
    
    	$settings['theme_advanced_styles'] .= trim($class_settings, '; ');
    
    	return $settings;
    }
    ?>

my editor-style.css

    /*  * Example styles for use in the visual editor.  *  * Two types of styles can be defined here: general styles to make the editor look  * more like the theme and CSS classes that can be selected by the user. 
    *  * @package TinyMCE Kit  *  * Released under the GPL v.2, http://www.gnu.org/copyleft/gpl.html  *  * This program is distributed in the hope that it will be useful,  * but WITHOUT ANY WARRANTY; without even the implied warranty of  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the  * GNU General Public License for more details.  */  
    
    /* Indented prose  */ 
      p.prose { font-size: 120%; line-height: 1.4; text-indent: 30px; margin-bottom: 0px; color: #000000; font-family: georgia, palatino, serif; }
    
    /* centered text  */ 
      p.middle { font-size: 120%; line-height: 1.4; color: #000000; text-align: center; margin-bottom: 0px; font-family: georgia, palatino, serif; }
    
    
    /* Unindented prose with paragraph spacing */ 
      p.flatline { font-size: 120%; line-height: 1.4; margin-bottom: 0px;    color: #000000; font-family: georgia, palatino, serif; }

and the relevant portion of my style.css:

    /* Indented prose  */ 
       p.prose { font-size: 120%; line-height: 1.4; text-indent: 30px;    margin-bottom: 0px; color: #000000; font-family: georgia, palatino, serif; }
    
    /* centered text  */ 
      p.middle { font-size: 120%; line-height: 1.4; color: #000000; text-align: center; margin-bottom: 0px; font-family: georgia, palatino, serif; }
    
    
    /* Unindented prose with paragraph spacing */ 
      p.flatline { font-size: 120%; line-height: 1.4; margin-bottom: 0px;    color: #000000; font-family: georgia, palatino, serif; }

I have tried both the TinyMCE Advanced plugin and the Advanced TinyMCE Configuration plugins to limited effect.

TinyMCE advanced worked after a fashion, putting my styles in a menu. However, the paragraph selection was very sloppy. It would apply the formatting to adjacent paragraphs. Switching from the visual editor to the text editor, I could see that it was putting the </p> in the wrong location. That plugin is now disabled.

Advanced TinyMCE configuration works after a fashion as well. I entered the following under style_formats:

    [
       { title: 'Prose', inline: 'span', styles: { "line-height": '1.4',  "font-size": '120%', "text-indent": '30px', "margin-bottom": '0px',  "color": '#000000',  "font-family": 'georgia'} },
       { title: 'Center', inline: 'span', styles: { "line-height": '1.4', "font-size": '120%', "margin-bottom": '0px', "color": '#000000', "font-family": 'georgia', "text-align": 'center' } },
        { title: 'Flatline', inline: 'span', styles: { "line-height": '1.4', "font-size": '120%', "margin-bottom": '0px', "color": '#000000', "font-family": 'georgia'} }
    ]

The ‘Formats’ menu now displays my styles. However, for some reason, it is ignoring "text-indent": '30px' and not indenting the start of the paragraph. Further experimentation led me to enter the following under style_formats through the plugin:

    [
       { title: 'Prose', block: 'p', classes: 'prose'  },
       { title: 'Center', block: 'p', classes: 'center' },
       { title: 'Flatline', block: 'p', classes: 'flatline' }
    ]

which caused it to behave exactly the way it did under TinyMCE Advanced. It indented, but it inserted the </p> in the wrong location. However, when I tried

    [
       { title: 'Prose', inline: 'span', classes: 'prose'  },
       { title: 'Center', inline: 'span', classes: 'center'},
       { title: 'Flatline', inline: 'span', classes: 'flatline'}
    ]

The TinyMCE visual editor would load, only without the ‘Formats’ menu. Once, I did see the contents of the ‘Formats’ menu appear at the upper left corner of my WordPress dashboard, but I haven’t been able to replicate that.

I am so close to a solution, but am not quite there yet. Any assistance would be appreciated.

I am running WordPress 4.9.5, and TinyMCE 4.6.7 hosted through HostGator. My browser is Firefox 59.0.2 (64-bit), running on OSX 10.11.6.

• This topic was modified 6 years ago by Antony W. Serio. Reason: link formating and code indents
• This topic was modified 6 years ago by Antony W. Serio. Reason: code spacing

The page I need help with: [log in to see the link]