Load custom CSS before admin CSS

Question

I am trying to use the jQuery Datatables plugin in my WordPress dashboard but the native WordPress admin CSS styling is overiding the datatables CSS, I am calling them like this...

add_action('admin_enqueue_scripts', 'admin_scripts');
function admin_scripts() {
    wp_enqueue_script('datatables', '//cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js', array('jquery'),'1.21', true );
    wp_enqueue_style('datatables-css', '//cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css', 99);
}

Is there a way to change the priority so it loads the datatables CSS first?

Answer 1

By default they should already be loading after the core admin styles. I suspect the CSS isn't even being loaded because you have an invalid parameter in your wp_enqueue_style() call. Its parameters are the same as wp_enqueue_script(). Where you have 99 is where dependencies are actually defined. So WordPress is looking for 99 to be loaded, not finding it, and skipping the enqueue.

So I would re-write that as follows:

 wp_enqueue_style( 'datatables-css', '//cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css', 'datatables' );

What this does is loads the stylesheet but only if the JavaScript file is loaded.

Answer 2

You don't need to do that as this is all about CSS specificity. What you need to do is wrap the datatable in a unique div and then use that to specifically target the elements in your CSS.

For example (I don't know the CSS, BTW, so this is just a general example)

Wrap the table element in <div class="myClass">

Use the Inspector in your browser to find out exactly what line of CSS is being used for the styling you want to override.

If the CSS for an element is table.dataTable tr.dataTr td.dataTd then if you add the wrapper div to that it should override it as it's more specific, ie: .myClass table.dataTable tr.dataTr td.dataTd

You might need to experiment a bit until you get exactly the right combination to override the specificity. I usually find a wrapper element is enough, but sometimes I find adding a specific class to the (eg)table element helps (if you can), so it might be: table.dataTable.myTableClass tr.dataTr td.dataTd

Hope that helps