Styling wp-admin not working

sage
1

Hello,
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?

2

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)
    // https://wordpress.stackexchange.com/a/22954/185703
    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.
        bundle('admin')->enqueue();
    }
});

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

/**
 * Add custom Gutenberg editor CSS and JS assets
 * https://developer.wordpress.org/block-editor/tutorials/javascript/extending-the-block-editor/
 * https://soderlind.no/hide-block-styles-in-gutenberg/
 */
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”
    bundle('gutenberg')->enqueue();
}, 100);

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

bud.entry({
  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