CODEWITHSUNDEEP
csswordpresssasswordpress-gutenberg
Anna Lam
Anna Lam

Reputation: 79

Custom editor styles are not loading in my live WordPress site

I have attempted to use the following code block inside my functions.php file to add some custom styling to the post editor.

add_theme_support('editor-styles');

function load_editor_styles() {
    add_editor_style('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Montserrat:wght@300;400;500&display=swap');

    add_editor_style(get_template_directory_uri().'/editor-style.css');
}
add_action('after_setup_theme', 'load_editor_styles');

The problem I'm having is that these styles will load properly on my local developer environment. But as soon as I upload my theme to my live site, the styles are no longer there.

For reference, this is the compiled css for the editor-style.css:

h1, h2, h3, h4, h5, h6 {
  font-family: "Libre Baskerville";
}

h1 {
  font-size: 30pt;
}

h2 {
  font-size: 24pt;
}

h3 {
  font-size: 22pt;
}

h4 {
  font-size: 18pt;
}

h5 {
  font-size: 14pt;
}

h6 {
  font-size: 12pt;
}

p, li, figcaption {
  color: #2e2e2e;
  font-family: "Montserrat";
  font-size: 10pt;
}

h1, h2, h3, h4, h5, h6, .editor-post-title__input {
  color: #2e2e2e;
  font-family: "Libre Baskerville";
}

figcaption {
  font-style: italic;
}

.editor-post-title__input {
  font-size: 32pt;
}

WordPress version on my live site: 5.8.2

Edit (#1 29 Nov 21): WordPress version on my local developer environment is also 5.8.2

Upvotes: 1

Views: 1259

Answers (1)

Anna Lam
Anna Lam

Reputation: 79

I figured out what I did wrong. I should've used

add_editor_style('editor-style.css');

instead of

add_editor_style(get_template_directory_uri().'/editor-style.css');

Upvotes: 4

Related Questions