Styling wp-admin not working

I have some trouble getting styles working in wp-admin, I’ve been going through the forum but none of the threads seems to help me.

I tried to add an admin.scss in config.json and enqueued the admin style but it doesn’t load the style. I also tried using the tinymce.scss but none of the styles are applied in wp-admin.

What is the preferred way to solve this?

You can add custom styles to the admin like this:

 * Add custom admin styles
add_action('admin_enqueue_scripts', function($hook) {
    // Only add custom admin styles on certain views to prevent
    // conflicts with 3rd-party plugin styles (e.g. WS Form)
    if ($hook == 'post-new.php' || $hook == 'post.php' || $hook == 'edit.php') {
        // Note: Even though we only need CSS we have to use enqueue()
        //       since enqueueCss() doesn’t work locally for some reason.

You can also load custom styles just in the Gutenberg editor like this:

 * Add custom Gutenberg editor CSS and JS assets
add_action('enqueue_block_editor_assets', function() {
    // NOTE: This won’t apply CSS to block pattern preview iframes
    //       when “bud dev” is running since the CSS is injected,
    //       but it will work in production or after running “bud build”
}, 100);

Both assets need to be defined in bud.config.mjs:

  admin: '@styles/admin.scss',// custom styles for all WP admin pages
  app: ['@scripts/main', '@styles/main.scss'],// main site CSS and JS
  gutenberg: ['@scripts/gutenberg', '@styles/gutenberg.scss'],// Gutenberg editor CSS and JS

Hope that helps!

1 Like