Enqueued Stylesheets Effecting Admin Styles

Question

I'm building a custom theme for a client and I've been adding stylesheets incorrectly for a while, so I decided to do it the correct way :-).

However, when I add the stylesheet to my functions.php file like so:

wp_enqueue_style('theme-styles', get_template_directory_uri() . '/css/all.css', array(), false , 'all');

It also is applying to the Wordpress Admin panel. My link colors and fonts change, and there are some layout issues as well.

If I enqueue it inside of a function like this:

function theme_styles(){
        wp_enqueue_style('theme-styles', get_template_directory_uri() . '/css/all.css', array(), false , 'all');
    }
    add_action( 'wp_enqueue_scripts', 'theme_styles' );

It does not change the admin panel at all, which is good. So my question is, when researching and reading about how to enqueue stylesheets no articles mention adding styles to a function. Scripts, yes, but not styles. What is the correct way to do it to avoid changing my admin styles?

Answer 1

You could do it like this:

function theme_styles(){
    /*
     * This if() statement is unnecessary, as wp_enqueue_scripts
     * doesn't fire on the admin pages.
     * if( is_admin() ) {
     *   return;
     * }
     */
    wp_enqueue_style(
        'theme-styles', 
        get_template_directory_uri() . '/css/all.css', 
        array(), 
        false,
        'all'
    );
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

References

• is_admin()

Also, note that the wp_enqueue_scripts hook is used to enqueue both scripts and styles.

Answer 2

Enqueueing styles within a function as you have done is the standard best practice for WordPress, whether you are building a theme or creating a child theme. And as mentioned, you can enqueue both styles and scripts from within one function, http://marker.to/65CMY3.