How To Add Dynamic Editor Style in WordPress

What I mean by Dynamic Editor Style is adding CSS style based on user setting/option. For example you have a font option via the customizer where user can select font to use or maybe link color option like my previous tutorial about color option in customizer.

What is Editor Style?

For you who don’t know, Editor Style is a theme feature in WordPress where we can style the “Visual Editor” so it will look similar with the front-end.

As you can see, it uses a CSS file in a theme. So, we can’t change the content of that stylesheet file dynamically. But with a little Ajax, we can do that.

Another way to add Editor Style

WordPress have filter. I explained about it long time ago in this tutorial: Add Editor Style from Plugin.

But instead of linking to a real CSS file, we use “fake” CSS file via Ajax Callback Function.

/* Add Editor Style */
add_filter( 'mce_css', 'my_dynamic_link_color_mce_css' );

/**
 * Add Link Color Option in Editor Style (MCE CSS)
 * @since 1.1.0
 */
function my_dynamic_link_color_mce_css( $mce_css ){
    $mce_css .= ', ' . add_query_arg( array( 'action' => 'my_color_mce_css', '_nonce' => wp_create_nonce( 'my-color-mce-nonce', __FILE__ ) ), admin_url( 'admin-ajax.php' ) );
    return $mce_css;
}

The above code did not use real CSS file, but instead it linked to this Admin Ajax URL with several parameter as the CSS file:

http://site.com/wp-admin/admin-ajax.php?action=my_color_mce_css&_nonce=989731hsaj

So, inside your Visual Editor, WordPress will load that URL as CSS file:

<link href="http://site.com/wp-admin/admin-ajax.php?action=my_color_mce_css&_nonce=989731hsaj" rel="stylesheet" type="text/css">

Add the Dynamic CSS

To add the dynamic CSS in this fake file, we use Ajax callback hook

/* Ajax Callback Hook */
add_action( 'wp_ajax_my_color_mce_css', 'my_color_mce_css_ajax_callback' );
add_action( 'wp_ajax_no_priv_my_color_mce_css', 'my_color_mce_css_ajax_callback' );

/**
 * Ajax Callback
 */
function my_color_mce_css_ajax_callback(){

    /* Check nonce for security */
    $nonce = isset( $_REQUEST['_nonce'] ) ? $_REQUEST['_nonce'] : '';
    if( ! wp_verify_nonce( $nonce, 'my-color-mce-nonce' ) ){
        die(); // don't print anything
    }

    /* Get Link Color */
    $color_link = get_theme_mod( 'color_link', '#ea7521' );

    /* Set File Type and Print the CSS Declaration */
    header( 'Content-type: text/css' );
    echo "a,a:hover,a:focus{color:{$color_link}}";
    die(); // end ajax process.
}

Ajax Callback Hook

You need to hook it to two ajax callback hook.

1. wp_ajax_{ajax action} for logged-in user
2. wp_ajax_no_priv_{ajax_action} for non-logged in user.

the {ajax action} part is the action we use before in add_query_arg() function.

Check nonce

In the callback function, we first check the nonce to validate this ajax request.

Get the Dynamic CSS

In this example we use theme_mod to store our link color CSS (maybe use customizer API to pick color).

Set File Type and Print the CSS

To trick the browser to think this file is a valid CSS file we set file type using http header() in this function. So when browser load this URL, it will only see that this is a valid CSS file with one line of text:

a,a:hover,a:focus{color:#ea7521}

and that’s it.

It’s a simple implementation, but very useful. You can use it to add custom/dynamic CSS for fonts, color, line height, etc.