Conditional Tags to Load custom.css stylesheet

We all want to design a fast and perfect and optimized site and CSS plays an important role in this. However, misusing them can cause server performance and other bad effects on your site.

To resolve it, we can use a different stylesheet file for the specific purpose to load them on a specific page only. If we are on different pages, we don’t need to load that file.

This is where WordPress Conditional Tags work. We can use this feature to enqueue stylesheet conditionally.

Note:- It is recommended to do the following work before adding snippets in functions.php

Filename – Create file name according to mentioned in the snippet or if you have already created one. Change it accordingly.
Make sure the file is in the correct path. The most popular path is default ‘child-theme’ folder or a specific ‘CSS’ folder.
example.com/wp-contents/themes/child-theme/custom.css
example.com/wp-contents/themes/child-theme/css/custom.css

Loading Stylesheet Conditionally in Genesis

The snippets include different names to identify the CSS file. You can create the same file name or can Change it as per your need.

The snippet should be added to your functions.php of the child theme or can be included in a mu-plugins if you have any special functions.php file.

1. Loading Custom Stylesheet Globally

//* Load custom stylesheet
add_action( 'wp_enqueue_scripts', 'load_custom_stylesheet' );
function load_custom_stylesheet() {
	wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0.0' );
}

2. Loading Stylesheet on Front Page

//* Load stylesheet on Front Page
add_action( 'wp_enqueue_scripts', 'load_frontpage_custom_stylesheet' );
function load_frontpage_custom_stylesheet() {
    if( is_front_page() ) {
    wp_enqueue_style( 'frontpage-style', get_stylesheet_directory_uri() . '/front-page.css', array(), '1.0.0' );
    }
}

3. Loading Stylesheet on Home Page (Post Page)

//* Load stylesheet on Post Page
add_action( 'wp_enqueue_scripts', 'load_home_custom_stylesheet' );
function load_home_custom_stylesheet() {
    if( is_home() ) {
    wp_enqueue_style( 'home-style', get_stylesheet_directory_uri() . '/home.css', array(), '1.0.0' );
    }
}

4. Loading Stylesheet on Both FrontPage and HomePage

//* Load stylesheet on Both Front Page and Post Page
add_action( 'wp_enqueue_scripts', 'load_frontpage_home_custom_stylesheet' );
function load_frontpage_home_custom_stylesheet() {
    if(is_front_page() || is_home() && !is_paged() ) {
    wp_enqueue_style( 'front-home-style', get_stylesheet_directory_uri() . '/front-home-style.css', array(), '1.0.0' );
    }
}

5. Loading Stylesheet on Single Post and Page

//* Load stylesheet on Single Post and Page
add_action( 'wp_enqueue_scripts', 'load_post_page_custom_stylesheet' );
function load_post_page_custom_stylesheet() {
    if ( is_singular() ) {
    wp_enqueue_style( 'single-post-style', get_stylesheet_directory_uri() . '/single-post-page.css', array(), '1.0.0' );
    }
}

can be used with array for multiple post type.

is_singular( array ('post','page') )

6. Loading Stylesheet on Custom Post Type Archive

//* Load stylesheet on Custom Post Type Archive
add_action( 'wp_enqueue_scripts', 'load_custom_post_type_custom_stylesheet' );
function load_custom_post_type_custom_stylesheet() {
    if ( is_post_type_archive ('custom_post_type') ) {
    wp_enqueue_style( 'custom-post-type-style', get_stylesheet_directory_uri() . '/custom-post-type-style.css', array(), '1.0.0' );
    }
}

Example: Let’s suppose if we want to show a CSS name ‘~~book-style.css~~‘ on Books archive page. Here ‘Book‘ is custom Post Type registered using a Plugin like Pods or ACF or manually.

Here what we will need to use. Add this in functions.php

//* Load stylesheet on Custom Book Archive Post Type
add_action( 'wp_enqueue_scripts', 'load_custom_post_type_custom_stylesheet' );
function load_custom_post_type_custom_stylesheet() {
    if ( is_post_type_archive ('book') ) {
    wp_enqueue_style( 'book-style', get_stylesheet_directory_uri() . '/book-style.css', array(), '1.0.0' );
    }
}

It is recommended to use only the require snippet and not include every snippet mentioned in this article. Thank you. Make sure to open the URL of stylesheet to confirm your CSS file is loading properly.

Reference: