1

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.

Improve this question
8
  • How did you add the styles to your theme? Like the code please :)
    – kraftner
    Jul 14, 2017 at 12:37
  • ^- what he said. You could make use of is_admin() to not enqueue the style or (body:not(.wp-admin) which seems like an overkill)
    – kero
    Jul 14, 2017 at 12:39
  • @kraftner, kero - I am using WP-Less and doing wp_enqueue_style( 'mainLESS', get_template_directory_uri() . '/less/index.less'); in the theme's functions.php. Could that be the culprit?
    – Pekka
    Jul 14, 2017 at 12:50
  • 1
    @Pekka웃 This is the way to do it, look how twentysixteen is enqueing styles. Most are always enqueued and some only for specific pages. I guess the question is what CSS are you writing that changes the backend as well? Btw, if you have specific styles for the wp-admin, you'd usually use admin_enqueue_scripts
    – kero
    Jul 14, 2017 at 12:55
  • 1
    What hook are you in when you enqueue them? Probably init or so, but not wp_enqueue_scripts?
    – kero
    Jul 14, 2017 at 12:56

1 Answer 1

Reset to default
8

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

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.