I am using the following code in my function.php file to add a Format dropdown to the WordPress visual editor with just one option, Custom 1.


function custom_styles_button($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
add_filter('mce_buttons_2', 'custom_styles_button');

function my_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
            'title' => 'Custom 1',  
            'block' => 'span',  
            'classes' => 'custom-1',
            'wrapper' => true,

    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' ); 

function add_editor_styles() {
    add_editor_style( 'editor-style.php' );
add_action( 'init', 'add_editor_styles' );

My editor.php contains the following code;


header("Content-type: text/css"); 
$test = '#006699';


.custom-1 { 
    color : <?php echo $test ?>;


So when I take select a piece of text in the WordPress visual editor and make it Custom-1 it's color in visual editor becomes #006699. Which is fine. However, I want to be able to control the color dynamically from within the Customizer, I am using the Kirki framework to select a color and my code in the editor-style.php looks like;


$test = get_theme_mod( 'graviton_custom_1_text_color', '#FFFFFF' );
header("Content-type: text/css"); 


.custom-1 { 
    color : <?php echo $test ?>;


But this does not work, in the Custom format dropdown in the visual editor the Custom 1 select stays highlighted and the text color remains black. I know that the code;

$test = get_theme_mod( 'graviton_custom_1_text_color', '#FFFFFF' );

does correctly put the right color value into $test but I don't understand why it then does not follow through to the style when I am using the same variable.

1 Answer 1


It doesn't work because WordPress isn't loaded within the context of editor-style.php, and you're actually getting a fatal error (get_theme_mod undefined). Enable error logging and you'll see what I mean.

Rather than pointing directly to a custom PHP file, you should use an "endpoint" within WordPress:

add_editor_style( admin_url( 'admin-ajax.php?action=editor-style' ) );

Now you can "listen" for when this virtual stylesheet is requested and kick out all your awesome CSS with WordPress loaded:

function wpse_226550_editor_style() {
    header( 'Content-Type: text/css; charset=UTF-8' );
    echo $css; // Example!

add_action( 'wp_ajax_nopriv_editor-style', 'wpse_226550_editor_style' );
add_action( 'wp_ajax_editor-style', 'wpse_226550_editor_style' );

Don't be put off by the "ajax" reference - admin-ajax.php is a popular technique in WordPress for sending all kinds of custom responses, but without having to manually load WordPress yourself (e.g. require './path/to/wordpress/wp-load.php'; - bad practice, path assumptions).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.