• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Conditional Tags to Load custom.css stylesheet

Last Updated on May 16, 2018 Favorited: 1 times

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

  1. Filename – Create file name according to mentioned in the snippet or if you have already created one. Change it accordingly.
  2. 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:

  • Additional Stylesheet in Genesis
  • Add Custom Style CSS in Genesis
  • Register and Enqueue Stylesheet
  • Conditional Tags in WordPress

Related Posts

  • Featured Post Widgets in Columns
  • Site Inner with container background in Genesis Sample
  • Add Logo Between Site Title Area in Genesis
  • Expanding Search Box in Genesis
  • Add Custom Class to the Site Title in Genesis

Categories: Free Content, Genesis Tutorials, WordPress Tutorials Tags: CSS, enqueue, style, Stylesheet

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service