While developing a WordPress theme or plugin sometimes we face this error EnqueuedStylesScope or This style is being loaded in all contexts for our CSS or JS file. This could be for Bootstrap or other css and JS too. Let’s find out How can we fix this error.
This style is being loaded in all contexts.
This error happens when we do not define in which end we want to load our css or js.
wp_enqueue_style('bootstrap-css', plugin_dir_url(__FILE__) . 'css/bootstrap.min.css', array(), $this->version, 'all');
wp_enqueue_style( 'my-css', plugin_dir_url( __FILE__ ) . 'css/mycss.css', array(), $this->version, 'all' );
How to fix This style is being loaded in all contexts error.
To address the issue of the style (e.g., bootstrap.min.css) being loaded in all contexts while developing your WordPress plugin, you need to control the conditions under which styles are enqueued. You might inadvertently load the style globally rather than only where it’s needed.
Here’s how to fix this issue:
Ensure Conditional Loading of Styles
Front-end vs. Admin Dashboard
If the style should only load on the front end or the admin dashboard, use conditional checks:
For the Frond End
// Enqueue styles only on the front end
// remove ! from if condition if you want to load it in admin end.
if (!is_admin()) {
wp_enqueue_style('bootstrap-css', plugin_dir_url(__FILE__) . 'css/bootstrap.min.css', array(), $this->version, 'all');
wp_enqueue_style( 'kov-image-filter-css', plugin_dir_url( __FILE__ ) . 'css/image-filter-public.css', array(), $this->version, 'all' );
}
For a Specific Page or Post Type:
function image_filter_enqueue_styles() {
if (is_page('my-page-slug') || is_singular('my_custom_post_type')) {
// Enqueue styles only on a specific page or custom post type
wp_enqueue_style('bootstrap-css', plugin_dir_url(__FILE__) . 'assets/bootstrap.min.css');
}
}
add_action('wp_enqueue_scripts', 'image_filter_enqueue_styles');
Hope it helps 🙂
