TinyMCE Formats drop down not merging parent & child theme formats

  • I’ve developed custom formats for TinyMCE that pretty closely follows this tutorial: https://www.wpexplorer.com/wordpress-tinymce-tweaks/.

    My parent theme uses the formats menu and adds two styles. My child theme uses the format menu & adds six additional styles.

    My understanding is that this line $settings['style_formats_merge'] = true; should merge the styles and not overwrite anything.

    However, my styles from the child theme do not appear in the TinyMCE formats drop down. Only the parent theme styles appear.

    In order to get the child theme styles to appear in TinyMCE formats drop down, I cannot add my parent styles (achieved by commenting out the tiny_mce_before_init filter).

    This sucks because I can’t update my parent theme without the formats drop down breaking (i.e., broken because it won’t show my child theme styles).

    I am running WP 4.0 and have my TinyMCE Advanced plugin disabled.

    Is this a bug within TinyMCE? Am I missing something? Is there something wrong with my code? Any assistance will be appreciated.

    Parent theme format drop down code:

    /**
 * Add "Formats" drop-down
 */
function tuts_mce_editor_buttons( $buttons ) {
    array_push( $buttons, 'styleselect' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'tuts_mce_editor_buttons' );  

/**
 * Add styles/classes to the "Formats" drop-down
 */
function tuts_mce_before_init( $settings ) {  

    $style_formats = array(  

				        array(
				            'title' => 'Button',
				            'selector' => 'a',
				            'classes' => 'button'
				            ),
				        array(
				            'title' => 'Image Frame',
				            'selector' => 'img',
				            'classes' => 'frame',
				        )

    );  

	// Merge old & new styles
  	$settings['style_formats_merge'] = true;

    $settings['style_formats'] = json_encode( $style_formats );  

    return $settings;  

}
add_filter( 'tiny_mce_before_init', 'tuts_mce_before_init' );

    Child theme format drop down code:

    if ( ! function_exists( 'wpex_styles_dropdown' ) ) {
	function wpex_styles_dropdown( $settings ) {

		// Create array of new styles
		 $style_formats = array(
			array(
				'title'	=> __( 'Vol Update' ),
				'items'	=> array(
					array(
						'title'		=> __('News Item'),
						'selector'	=> 'h4',
						'styles'	=> array(
											'backgroundColor' => '#ebea64',
											'color' => '#4c4d4f',
										),
					),
					array(
						'title'		=> __('Reminders'),
						'selector'	=> 'h4',
						'styles'	=> array(
											'backgroundColor' => '#abc178',
											'color' => '#ffffff',
										),
					),
					array(
						'title'		=> __('See You There'),
						'selector'	=> 'h4',
						'styles'	=> array(
											'backgroundColor' => '#b9e1e2',
											'color' => '#4c4d4f',
										),
					),
					array(
						'title'		=> __('Deadlines'),
						'selector'	=> 'h4',
						'styles'	=> array(
											'backgroundColor' => '#e65933',
											'color' => '#ffffff',
										),
					),
					array(
						'title'		=> __('Jobs'),
						'selector'	=> 'h4',
						'styles'	=> array(
											'backgroundColor' => '#754a7e',
											'color' => '#ffffff',
										),
					),
					array(
						'title'		=> __('Involved'),
						'selector'	=> 'h4',
						'styles'	=> array(
											'backgroundColor' => '#fed535',
											'color' => '#4c4d4f',
										),
					),
					array(
						'title'		=> __('Grad Students'),
						'selector'	=> 'h4',
						'styles'	=> array(
											'backgroundColor' => '#579584',
											'color' => '#4c4d4f',
										),
					),
					array(
						'title'		=> __('Awesome'),
						'selector'	=> 'h4',
						'styles'	=> array(
											'backgroundColor' => '#f88f20',
											'color' => '#ffffff',
										),
					),
				),
			),
		);

		// Merge old & new styles
		$settings['style_formats_merge'] = true;

		// Add new styles
		$settings['style_formats'] = json_encode(  $style_formats);

		// Return New Settings
		return $settings;

	}
}
add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );

Viewing 3 replies - 1 through 3 (of 3 total)

  • I am also having this issue. I cannot merge the child dropdown styles with the parent, OR overwrite the function from the parent.

    This is the workaround I used:

    // Remove the dropdown function from the parent
add_action('init','remove_parent_mce_dropdown');

function remove_parent_mce_dropdown() {
    remove_action('tiny_mce_before_init','tuts_mce_before_init'); // The first parameter is the phase, second is the function you want to override
}

// Now write your new function, and re-instatiate it through add_filter()
function new_mce_dropdowns( $settings ) {  

    $style_formats = array(
        array(
            'title' => 'Button',
            'selector' => 'a',
            'classes' => 'button'
            ),
        array(
            'title' => 'Image Frame',
            'selector' => 'img',
            'classes' => 'frame',
        ),
        array(
            'title' => 'Map Link',
            'selector' => 'a',
            'classes' => 'view_map',
        ),
    );  

    // Merge old & new styles
    $settings['style_formats_merge'] = true;

    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'new_mce_dropdowns' );

    @lilianev, that should work totally random stranger…:)

    I meant to append this to the last post. Here is the resource I used:

    https://www.venutip.com/content/right-way-override-theme-functions

    The only tweak I really made was to remove the priority parameter. Priority is 10 by default, and I could not get the override unless the remove_action() was set to 10. There is probably a more elegant way of stacking the priority.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘TinyMCE Formats drop down not merging parent & child theme formats’ is closed to new replies.