How to Use the TinyMCE WYSIWYG Editor in WordPress Customizer (Step-by-Step)

The WordPress Customizer is a powerful tool for allowing users to preview theme changes in real time — but its default controls are fairly limited.

If you’ve ever wanted to offer a rich-text editor inside the Customizer (with bold, links, lists, and colors), you can integrate TinyMCE, the same editor that powers the Classic Editor.

In this tutorial, you’ll learn how to add a TinyMCE WYSIWYG editor to your Customizer panels with live preview updates using PHP and JavaScript.

Step 1: Create the TinyMCE Custom Control

Start by creating a new custom control class in your theme’s /inc/customizer-controls.php:


if ( class_exists( 'WP_Customize_Control' ) ) {
	class WP_Customize_TinyMCE_Control extends WP_Customize_Control {
		public $type = 'tinymce_editor';

		public function render_content() {
			?>
			<label>
				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
				<?php if ( ! empty( $this->description ) ) : ?>
					<span class="description customize-control-description"><?php echo $this->description; ?></span>
				<?php endif; ?>
				<input type="hidden" <?php $this->link(); ?> value="<?php echo esc_textarea( $this->value() ); ?>" />
			</label>
			<?php
		}

		public function enqueue() {
			wp_enqueue_editor();
			wp_enqueue_script( 'word-count' );
		}
	}
}

🧠 Tip: You can read more about creating custom controls in the WordPress Customizer API.

Step 2: Add JavaScript to Initialize TinyMCE

</Next, create a file named js/customizer-tinymce.js and initialize TinyMCE for your control:

(function ($) {
	"use strict";

	wp.customize.controlConstructor["tinymce_editor"] = wp.customize.Control.extend({
		ready: function () {
			var control = this;
			var element = control.container.find('input[type="hidden"]');
			var id = "editor-" + control.id.replace("[", "-").replace("]", "");
			var textarea = $("").attr("id", id).val(element.val());
			element.after(textarea);

			var editorSettings = {
				tinymce: {
					wpautop: true,
					plugins: "lists link textcolor colorpicker hr",
					toolbar1: "formatselect,bold,italic,bullist,numlist,link,forecolor,backcolor,hr",
					setup: function (editor) {
						editor.on("change keyup", function () {
							element.val(editor.getContent()).trigger("change");
						});
					}
				},
				quicktags: true,
				mediaButtons: false
			};

			setTimeout(function () {
				wp.editor.initialize(id, editorSettings);
			}, 100);
		}
	});
})(jQuery);

This creates a fully functional Visual + Text editor right inside your Customizer panel.

📘 See TinyMCE official documentation for details on available plugins and toolbar buttons.

Step 3: Enqueue the Script

Add the script to your Customizer controls by updating functions.php:

function ultra_nutrition_enqueue_tinymce_scripts() {
	wp_enqueue_script(
		'ultra-nutrition-customizer-tinymce',
		get_template_directory_uri() . '/js/customizer-tinymce.js',
		array( 'jquery', 'customize-controls' ),
		'1.0.0',
		true
	);
}
add_action( 'customize_controls_enqueue_scripts', 'ultra_nutrition_enqueue_tinymce_scripts' );

👉 You can learn more about script enqueuing in the WordPress Script API.

Step 4: Use the TinyMCE Control in Your Customizer

Here’s how to use your new control in a section such as the Hero Section:

function ultra_nutrition_section_hero( $wp_customize ) {
	$wp_customize->add_section( 'hero_section', array(
		'title'    => 'Hero Section',
		'priority' => 30,
	) );

	$wp_customize->add_setting( 'hero_title', array(
		'default'           => 'Fuel Your Ultra Performance',
		'sanitize_callback' => 'wp_kses_post',
	) );

	$wp_customize->add_control( new WP_Customize_TinyMCE_Control( $wp_customize, 'hero_title', array(
		'label'       => 'Hero Title',
		'description' => 'Add your hero title with HTML formatting.',
		'section'     => 'hero_section',
	) ) );
}
add_action( 'customize_register', 'ultra_nutrition_section_hero' );

🧩 The wp_kses_post() function ensures only safe HTML is saved — check the WordPress sanitization guide for more on this.

Step 5: Add Optional Styling

Enhance the editor’s appearance inside the Customizer with CSS:

.customize-control-tinymce_editor .wp-editor-wrap {
	margin-top: 8px;
}
.customize-control-tinymce_editor iframe {
	min-height: 150px;
}

Enqueue it:

function ultra_nutrition_enqueue_customizer_css() {
	wp_enqueue_style(
		'ultra-nutrition-customizer',
		get_template_directory_uri() . '/css/customizer.css',
		array(),
		'1.0.0'
	);
}
add_action( 'customize_controls_enqueue_scripts', 'ultra_nutrition_enqueue_customizer_css' );

Advanced: Custom Toolbar Configuration

You can modify the TinyMCE toolbar or add custom plugins. Example:

var editorSettings = {
	tinymce: {
		plugins: "lists,link,charmap,hr",
		toolbar1: "bold italic underline | bullist numlist | link unlink | hr",
		height: 200,
		menubar: false,
		setup: function (editor) {
			editor.on("change keyup", function () {
				element.val(editor.getContent()).trigger("change");
			});
		}
	}
};

For full configuration options, visit TinyMCE Toolbar Configuration.

Key Benefits

🎨 Rich text editing inside the Customizer
🔄 Live preview updates with no page reloads
🧰 Full control over toolbar and formatting options
🛡️ Secure and sanitized with wp_kses_post()
⚙️ Lightweight integration — no external plugins needed

Wrapping Up

Adding the TinyMCE WYSIWYG editor to your WordPress Customizer is an elegant way to give users advanced content editing right from the live preview. It improves usability, speeds up theme customization, and makes your theme feel professional.

You can combine this with other Customizer enhancements — for example, see how to add export/import functionality for Customizer settings or create reusable Customizer sections.

Quick Summary

Feature	Description
Editor Type	TinyMCE WYSIWYG
Use Case	Add formatted text editing to Customizer
Integration	PHP + JS
Security	Uses `wp_kses_post()` sanitization
External Docs	WordPress Customizer API, TinyMCE Docs