Enqueue Styles in WP-Admin

1

Hey there,
I’m just about to create custom dashboard/settings-pages with bricks using the templating shortcodes! That works pretty neat but of course bricks assets don’t get enqueued in the wp-admin area.

According to the academy article I tried to achieve something similar with the default frontend stylesheets but I am not able to solve it! :frowning:

I’ve tried different approaches to get them loaded in backend, unfortunately noone of them worked. What I have is the following:

add_action( ‘admin_enqueue_scripts’, function() {
// Code & check below enqueues your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
if ( ! bricks_is_builder_main() ) {
wp_enqueue_style( ‘admin-styles’, get_stylesheet_directory() . ‘/assets/css/frontend.min.css’, [‘bricks-frontend’], filemtime( get_stylesheet_directory() . ‘/assets/css/frontend.min.css’ ) );
}
} );

I’ve tried different stylesheets since I’m not sure which one to enqueue but none of them gets loaded. Does anyone have a solution for that or can help me solving that?

TIA for your help!

2

Hi Wolfgang,

sorry for the late reply. If you include the styles as in your example, they will only load on the bricks canvas and on the frontend.

But you can load the styles only on your settings page in wp-admin:

function my_admin_enqueue($hook_suffix) {
  if ($hook_suffix == 'toplevel_page_acf-options') {
    wp_enqueue_style('bricks-frontend', get_template_directory_uri() . '/assets/css/frontend.min.css');
  }
}
add_action('admin_enqueue_scripts', 'my_admin_enqueue');

The tricky part is to get the hook_suffix. You can use this (temporary) code to get it (in my example it is ‘toplevel_page_acf-options’):

function wpdocs_myselective_css_or_js($hook) {
  echo '<h1 style="color: crimson;">' . esc_html($hook) . '</h1>';
}
add_action('admin_enqueue_scripts', 'wpdocs_myselective_css_or_js');

Best regards,
timmse

1 Like
3

Hey Timmse,
thanks for your reply. Although I don’t completely understand why they would only load on bricks canvas and not in the admin (because I thought that ‘bricks_is_builder_main()’ is responsible for that) your example worked in my test with the frontend.css.

But I have another question regarding the CSS-Styles… The Page-specific styles are loaded inline by default, right? But why don’t they get applied in my dashboard page on admin? Is there another thing I have to add so they get applied in backend? I could, of course, also use the external stylesheet thing and enqueue those generated stylesheets from the uploads folder, but I’m curious why the inline-styles doesn’t work / get applied here!

TIA for your help! :wink:
Cheers

4

Hi,

I don’t know for sure myself, but at least that’s what it says in the documentation and in the code itself :sweat_smile:

I think that it is checked whether you are on the front- or backend. That Bricks styles are used in the backend is rather rare to not at all the case (with the exception of you) :slightly_smiling_face:

5

Yeah, you’re probably right :smiley:

I was facing some other issues with dynamic data not loading correctly in backend (my link settings didn’t get applied), so I scrapped the idea again, but maybe one day I’m gonna do a bit more on that topic and maybe our conversation helps others to use bricks in Backend.

I find the idea quite cool to also style some pages in Backend with bricks because I could create individual UI for my customers then, but it’s not a necessity at all and I think bricks has other things to think about before they will make my Idea come true! :smiley:

1 Like