How to Add Both Custom Fonts and Formatting to WYSIWYG Editor in WordPress
I’m using Elementor Pro and JetEngine plugin on my WordPress site. When editing text on a CPT post using the standard WordPress page editor, I can only access the WYSIWYG editor, which doesn’t allow me to edit styles, font sizes, and other formatting options out of the box.
I found code snippets that can be integrated into the functions.php file to activate some of these features:
This snippet adds custom formatting features:
// Callback function to insert 'styleselect' into the $buttons array
add_filter( 'mce_buttons_2', 'dgtlnk_mce_buttons' );
function dgtlnk_mce_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
This snippet adds custom fonts:
// Callback function to filter the MCE settings
add_filter( 'tiny_mce_before_init', 'dgtlnk_mce_before_init_insert_formats' );
function dgtlnk_mce_before_init_insert_formats( $init_array ) {
// Define the style_formats array
$style_formats = array(
// Each array child is a format with it's own settings
array(
'title' => 'Create Button',
'selector' => 'a',
'classes' => 'btn',
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
Both snippets work great when added separately. However, when I add both to the functions.php file, they merge into one, and the formatting features from the first snippet are replaced by the custom font selection from the second code.
How can I add both the formatting features from the first snippet and the custom font selection from the second snippet to the WYSIWYG editor, along with the ability to select font sizes (I haven’t found a code snippet for that yet)?
The issue occurs because both snippets are trying to modify the TinyMCE editor’s configuration, but the second snippet overwrites the entire style_formats array instead of merging with existing formats. To combine custom formatting with font selection and add font sizes, you need to properly merge the configurations and add additional buttons to the TinyMCE toolbar.
Contents
- Understanding the Conflict
- Combined Solution for Custom Fonts and Formatting
- Adding Font Size Selection
- Complete Integration Guide
- Alternative Plugin Solutions
- Troubleshooting Common Issues
Understanding the Conflict
The conflict arises because both snippets modify TinyMCE’s style_formats configuration differently:
- The first snippet adds a
styleselectdropdown button to the toolbar - The second snippet completely overwrites the
style_formatsarray instead of merging existing formats
When both are active, the second snippet’s json_encode($style_formats) replaces any existing styles, including default WordPress formats and your custom formatting options.
Combined Solution for Custom Fonts and Formatting
Here’s how to properly combine both features without conflicts:
// Add styleselect button to the second row of TinyMCE buttons
add_filter( 'mce_buttons_2', 'dgtlnk_custom_tinymce_buttons' );
function dgtlnk_custom_tinymce_buttons( $buttons ) {
// Add styleselect dropdown if not already present
if ( !in_array( 'styleselect', $buttons ) ) {
array_unshift( $buttons, 'styleselect' );
}
// Add font size dropdown
array_unshift( $buttons, 'fontsizeselect' );
return $buttons;
}
// Merge custom formats with existing TinyMCE formats
add_filter( 'tiny_mce_before_init', 'dgtlnk_custom_tinymce_formats' );
function dgtlnk_custom_tinymce_formats( $init_array ) {
// Get existing formats if they exist
$style_formats = isset( $init_array['style_formats'] ) ? json_decode( $init_array['style_formats'], true ) : array();
// Add your custom formatting options
$custom_formats = array(
array(
'title' => 'Create Button',
'selector' => 'a',
'classes' => 'btn',
),
array(
'title' => 'Highlight',
'inline' => 'span',
'styles' => array(
'backgroundColor' => '#ffff00',
),
),
array(
'title' => 'Drop Cap',
'inline' => 'span',
'classes' => 'drop-cap',
'wrapper' => true,
),
);
// Merge custom formats with existing ones
$style_formats = array_merge( $style_formats, $custom_formats );
// Add custom fonts to the font_formats setting
$custom_fonts = array(
'Arial, Helvetica, sans-serif' => 'Arial',
'"Times New Roman", Times, serif' => 'Times New Roman',
'Georgia, serif' => 'Georgia',
'Verdana, Geneva, sans-serif' => 'Verdana',
'Courier New, Courier, monospace' => 'Courier New',
'Comic Sans MS, cursive, sans-serif' => 'Comic Sans MS',
);
// Get existing fonts if they exist
$font_formats = isset( $init_array['font_formats'] ) ? $init_array['font_formats'] : '';
// Add custom fonts to existing fonts
foreach( $custom_fonts as $font_family => $font_name ) {
if ( !strpos( $font_formats, $font_name ) ) {
$font_formats .= "{$font_name}={$font_family};";
}
}
// Update the init array
$init_array['style_formats'] = json_encode( $style_formats );
$init_array['font_formats'] = $font_formats;
$init_array['fontsize_formats'] = '8px 10px 12px 14px 16px 18px 20px 24px 28px 32px 36px 48px';
return $init_array;
}
Adding Font Size Selection
The code above includes the fontsizeselect button and defines available font sizes. To ensure font sizes work properly, you may also need to add this CSS to your theme:
/* Add this to your theme's stylesheet */
.mce-content-body p {
font-size: 16px; /* Default font size */
}
/* Define custom font sizes if needed */
.size-8 { font-size: 8px; }
.size-10 { font-size: 10px; }
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-20 { font-size: 20px; }
.size-24 { font-size: 24px; }
.size-28 { font-size: 28px; }
.size-32 { font-size: 32px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
Complete Integration Guide
Step 1: Backup Your Functions.php
Before making changes, always backup your theme’s functions.php file.
Step 2: Add the Combined Code
Replace both of your existing snippets with the complete code provided above. This will:
- Add the
styleselectdropdown for custom formatting - Add the fontsizeselect dropdown for font sizes
- Add custom font options to the font selector
- Preserve existing TinyMCE functionality
Step 3: Verify in the Editor
After adding the code, go to a post/page and check the TinyMCE toolbar. You should see:
- A styleselect dropdown with your custom formats
- A font selector with your custom fonts
- A font size dropdown with various size options
Step 4: Test Custom Formatting
Create a test post and apply each formatting option to ensure:
- Custom buttons work correctly
- Font selection applies properly
- Font sizes display as expected
Alternative Plugin Solutions
If you prefer not to modify code, consider these plugin options:
-
TinyMCE Advanced - A popular plugin that enhances the default WordPress editor with additional formatting options and font controls.
-
Ultimate TinyMCE - Provides extensive TinyMCE customization including custom fonts, styles, and advanced formatting options.
-
Custom Font Manager - Specifically designed for adding custom fonts to WordPress with easy integration with the editor.
Troubleshooting Common Issues
Formats Not Appearing
If your custom formats don’t appear in the editor:
- Check that the
styleselectdropdown is visible in the toolbar - Verify there are no JavaScript errors in the browser console
- Ensure your CSS classes are properly defined in your theme
Font Issues
If fonts aren’t displaying correctly:
- Make sure fonts are properly loaded (either via Google Fonts or your theme’s font system)
- Check that font-family values match exactly in your CSS
- Clear your browser cache to see changes
Code Conflicts
If you encounter conflicts with other plugins:
- Deactivate other plugins temporarily to identify conflicts
- Use a child theme to avoid theme updates overwriting your changes
- Consider using a plugin like Code Snippets to manage your custom code without modifying theme files
By implementing this combined solution, you’ll have both custom formatting options and font selection working harmoniously in your WordPress WYSIWYG editor, giving you full control over your content’s appearance while maintaining the editor’s core functionality.