How to stop my themes CSS changing the Wordpress interface/?

Question

I'm currently busy exploring Wordpress theme development. I've made a theme and uploaded it to my Wordpress development site. In a css file of me, I've declared some styles for the h1, h2, h3 etc. The thing is that some of those styles are being applied to header in my Wordpress interface. This is of course not how it should be. Has anyone an idea on how to fix this? Other Wordpress themes that I used never had this weird thing.

Answer 1

This can happen if the function for enqueueing stylesheets, wp_enqueue_style() is run inside functions.php outside of a hooked function, like this:

<?php

wp_enqueue_style( 'my-style', get_stylesheet_uri() );

functions.php is loaded on the front-end and back-end when your theme is active, so this will load the stylesheet in both places.

To only load a stylesheet on the front-end you need to run this function inside another function that is hooked to the wp_enqueue_scripts hook:

<?php

function wpse_341512_enqueue_styles() {
    wp_enqueue_style( 'my-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'wpse_341512_enqueue_styles' );

By doing this, wp_enqueue_style() is only run when wpse_341512_enqueue_styles() is run, and using add_action() like this queues up that function to only run on the front-end.