Why are my frontend theme styles bleeding into the backend?

by

I’m developing a custom theme. For some reason, some of the styles I define globally in the front-end (like certain styles for headings and such) are affecting the back-end.

I am using the WP-LESS plugin and enqueueing the main stylesheet in the theme’s functions.PHP:

wp_enqueue_style( 'mainLESS', get_template_directory_uri() . '/less/index.less');

Is this normal behaviour?

How should I prefix styles to keep them from applying to the backend? I don’t seem to be seeing any obvious body classes I could take advantage of.

1 Answer
1

You’re supposed to enqueue on the wp_enqueue_scripts event. Placing the function in functions.php and immediately running it, will make it run on all pages, including the admin area

Here’s an example from the devhub:

/**
 * Proper way to enqueue scripts and styles.
 */
function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

This hook/action/event fires on the frontend. If you would like to add a style or script to the backend, use the admin_enqueue_scripts event instead

Leave a Comment