Good way to customize admin CSS?

Question

I have modified the CSS on the admin and login pages. But the problem is that sometimes the custom CSS is loaded last, and this makes the change visible. The CSS can change during the loading of the page.

Is there any way to edit the CSS before the page renders? I cannot edit the core and plugin files because I want to be able to update without breaking it.

Any suggestions?

Answer 1

What theme are you using?

I would probably start with making a child theme. This will give you more control over when styles are loaded. Here is an example of loading the parent theme styles and then your child theme styles.

function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

If you need to add styles specifically for the admin area you can enqueue styles like this...

function my_admin_styles(){
    wp_enqueue_style(
        'admin_css', 
        get_stylesheet_directory_uri() . '/css/my-admin.css', array(), filemtime( get_stylesheet_directory() . '/css/my-admin.css') 
    );
}

add_action('admin_enqueue_scripts', 'my_admin_styles');

The above code would go in your child theme's functions.php.

Answer 2

You have to open up the place where you're generating that CSS, this could be complex or simple. It all depends on how you decide to generate your CSS based on business logic.

I have no idea how you're loading your CSS, regardless, here's how I do it - first, create your page:

public function addAdminMenuPage()
{
    $this->hook_suffix = add_theme_page(
            esc_html__( 'Page Title', 'my-project' ),
            esc_html__( 'Page Title', 'my-project' ),
            'manage_options', 'my-page-handle',
            [ $this, 'myPageContent' ]
        );
}
add_action( 'admin_menu', [$this, 'addAdminMenuPage' ], 80 );

Then, enqueue its CSS completely based on the suffix, making sure that your CSS only loads on that page, in the correct order:

public function generatePageCSS( $page )
{
    //Very important, will only load your CSS on the right page, not in all the admin area.
    if( !$page == $this->hook_suffix ) {
        return;
    }
    //This will allow you to keep a lot of the logic in different parts.
    do_action( 'page-' . $page . '-css', $page );
}

add_action( 'admin_enqueue_scripts', [$this, 'enqueuePageCSS'] );

This means that for all your CSS logic, you'll be using the page-my-page-handle-css, it could be multiple enqueues of CSS, inline writes to the page and so on. But now you got all the CSS that's to come set in the right order, which seems to have been your original issue.

So, you're adding your page on the admin_menu hook, then, you enqueue your scripts on the admin_enqueue_scripts hook with checking if the generated suffix from that add_theme_page matches the current page title that's passed down from admin_enqueue_scripts, your "main class" to run this would be:

class MyAdminPage
{
    public function __construct()
    {
        add_action( 'admin_menu', [$this, 'addAdminMenuPage' ], 80 );
        add_action( 'admin_enqueue_scripts', [$this, 'enqueuePageCSS'] );
    }
    ..
    ..
    //Here you'll put the hooking functions
    ..
    ..
}

And, again, as long as you keep that generatePageCSS "open" with hooks, probably, you're good to go.