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.

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.

• css
• admin-css

• Where is your CSS file? How are you loading it with your theme? – Jacob Peattie Commented Jun 26, 2019 at 10:18
• Yes I load my CSS file with my theme. The location is css/fonts.css. I put the css in this fiddle: jsfiddle/ralphsmit/r3qebams. Thanks for responding! – ralphjsmit Commented Jun 26, 2019 at 10:19
• 1 There's no reason anything in header.php should affect anything in the admin, unless you're doing something super weird. Regardless, that's not the correct way to load styles in a WordPress theme. See here for the correct way: developer.wordpress/themes/basics/including-css-javascript And see if that helps with your issue. – Jacob Peattie Commented Jun 26, 2019 at 10:24
• 1 I discovered I was loading the stylesheets using wp enqeue in my functions.php and with the above method in my header.php. I deleted the above code in my header.php and replaced it with wp enqeue. Now it works. Thanks for pointing me in the right direction! – ralphjsmit Commented Jun 26, 2019 at 10:29
• 1 The issue could have been caused if wp_enqueue_script() was run outside of another function. If it's not run inside a function hooked to wp_enqueue_scripts, then it would load the stylesheet on the front and back end. Does that sound like what you previously had? – Jacob Peattie Commented Jun 26, 2019 at 10:33

1 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.