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.

Here’s the Codex Docs: add_editor_style();

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:

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

<link href="" 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:


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.


  • Stargazer theme by Justin Tadlock
    this tutorial is based on dynamic CSS feature in stargazer with several improvement.
  • Nevertheless (GitHub)
    You can see implementation for dynamic link color just like the example above.
  • NokoNoko Starter Theme (Tamatebako Framework)
    My starter theme, you can check the “Custom Font” module to see how to it works (changing h2 font in content/visual editor like in the screenshot).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.