The first thing we need to do is to create a custom.css file under child theme directory.
Add Custom Stylesheet In Genesis Theme Framework
Recommended:
//* Load custom style sheet
add_action( 'wp_enqueue_scripts', 'custom_load_custom_style_sheet' );
function custom_load_custom_style_sheet() {
wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0.0' );
}
Different URL value location:
//* Load custom style sheet
add_action( 'wp_enqueue_scripts', 'custom_load_custom_style_sheet' );
function custom_load_custom_style_sheet() {
wp_enqueue_style( 'custom-stylesheet', CHILD_URL . '/custom.css', array(), '1.0.0' );
}
Quick Hack with return early function having a conditional tag.
//* Load custom stylesheet
add_action( 'wp_enqueue_scripts', 'load_custom_css_style' );
function load_custom_css_style() {
if ( ! is_front_page() ) {
return;
}
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0.0' );
}
Replace Primary Style.Css
//* Replace default style sheet
add_filter( 'stylesheet_uri', 'custom_replace_default_style_sheet', 10, 2 );
function custom_replace_default_style_sheet() {
return CHILD_URL . '/custom.css';
}
Make sure to check the path /wp-contents/genesis-child-theme/custom.css or view page source and open the path of the file to make sure it is loading.
here CHILD_URL could be replaced with get_stylesheet_directory_uri()
//* Load custom style sheet
add_action( 'wp_enqueue_scripts', 'custom_load_custom_style_sheet' );
function custom_load_custom_style_sheet() {
wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0.0' );
}
//* Replace default style sheet
add_filter( 'stylesheet_uri', 'custom_replace_default_style_sheet', 10, 2 );
function custom_replace_default_style_sheet() {
return get_stylesheet_directory_uri() . '/custom.css';
}
Source:- Brian Gardner on Github
You can also add additional CSS files using a line of code. It doesn’t overwrite your default CSS. It works well when you want more css files for each feature.
//* Display Custom Style CSS wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css' );
Loading Multiple Style Files
1. Load Multiple stylesheets from CDNs URLs
//* Load Multiple stylesheets from CDNs URLs
add_action( 'wp_enqueue_scripts', 'load_multiple_cdn_style_sheet' );
function load_multiple_cdn_style_sheet() {
wp_enqueue_style( 'FontAwesome', '//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
wp_enqueue_style( 'Ionicons', '//code.ionicframework.com/1.3.3/css/ionic.min.css' );
}
2. Load Multiple stylesheets Locally
//* Load Multiple stylesheets Locally
add_action( 'wp_enqueue_scripts', 'load_multiple_local_style_sheet' );
function load_mulitple_local_style_sheet() {
wp_enqueue_style( 'FontAwesome', get_stylesheet_directory_uri() . '/fontawesome.css', array(), '1.0.0' );
wp_enqueue_style( 'Ionicons', get_stylesheet_directory_uri() . '/ionicons.css', array(), '1.0.0');
}
How the CHILD_URL works?
Genesis Framework: List of Theme and Location Constants
Source
Filename: genesis/lib/init.php
Lines: 179 to 251 of 384
add_action( 'genesis_init', 'genesis_constants' );
/**
* This function defines the Genesis theme constants
*
* @since 1.6.0
*/
function genesis_constants() {
// Define Theme Info Constants.
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedConstantFound
define( 'PARENT_THEME_NAME', 'Genesis' );
define( 'PARENT_THEME_VERSION', '2.6.1' );
define( 'PARENT_THEME_BRANCH', '2.6' );
define( 'PARENT_DB_VERSION', '2603' );
define( 'PARENT_THEME_RELEASE_DATE', date_i18n( 'F j, Y', '1520985600' ) );
// Define Parent and Child Directory Location and URL Constants.
define( 'PARENT_DIR', get_template_directory() );
define( 'CHILD_DIR', get_stylesheet_directory() );
define( 'PARENT_URL', get_template_directory_uri() );
define( 'CHILD_URL', get_stylesheet_directory_uri() );
// phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedConstantFound
// Define URL Location Constants.
$lib_url = PARENT_URL . '/lib';
if ( ! defined( 'GENESIS_IMAGES_URL' ) ) {
define( 'GENESIS_IMAGES_URL', PARENT_URL . '/images' );
}
if ( ! defined( 'GENESIS_ADMIN_IMAGES_URL' ) ) {
define( 'GENESIS_ADMIN_IMAGES_URL', $lib_url . '/admin/images' );
}
if ( ! defined( 'GENESIS_JS_URL' ) ) {
define( 'GENESIS_JS_URL', $lib_url . '/js' );
}
if ( ! defined( 'GENESIS_CSS_URL' ) ) {
define( 'GENESIS_CSS_URL', $lib_url . '/css' );
}
// Define directory locations constants.
define( 'GENESIS_VIEWS_DIR', PARENT_DIR . '/lib/views' );
define( 'GENESIS_CONFIG_DIR', PARENT_DIR . '/config' );
// Define Settings Field Constants (for DB storage).
define( 'GENESIS_SETTINGS_FIELD', (string) apply_filters( 'genesis_settings_field', 'genesis-settings' ) );
define( 'GENESIS_SEO_SETTINGS_FIELD', (string) apply_filters( 'genesis_seo_settings_field', 'genesis-seo-settings' ) );
define( 'GENESIS_CPT_ARCHIVE_SETTINGS_FIELD_PREFIX', (string) apply_filters( 'genesis_cpt_archive_settings_field_prefix', 'genesis-cpt-archive-settings-' ) );
// Unused in Genesis, considered deprecated.
if ( apply_filters( 'genesis_load_deprecated', true ) ) {
// Directory Constants.
$lib_dir = PARENT_DIR . '/lib';
define( 'GENESIS_IMAGES_DIR', PARENT_DIR . '/images' );
define( 'GENESIS_ADMIN_IMAGES_DIR', $lib_dir . '/admin/images' );
define( 'GENESIS_TOOLS_DIR', $lib_dir . '/tools' );
define( 'GENESIS_LIB_DIR', $lib_dir );
define( 'GENESIS_ADMIN_DIR', $lib_dir . '/admin' );
define( 'GENESIS_JS_DIR', $lib_dir . '/js' );
define( 'GENESIS_CSS_DIR', $lib_dir . '/css' );
define( 'GENESIS_FUNCTIONS_DIR', $lib_dir . '/functions' );
define( 'GENESIS_SHORTCODES_DIR', $lib_dir . '/shortcodes' );
define( 'GENESIS_STRUCTURE_DIR', $lib_dir . '/structure' );
define( 'GENESIS_WIDGETS_DIR', $lib_dir . '/widgets' );
// URL Constants.
define( 'GENESIS_ADMIN_URL', $lib_url . '/admin' );
define( 'GENESIS_LIB_URL', $lib_url );
define( 'GENESIS_FUNCTIONS_URL', $lib_url . '/functions' );
define( 'GENESIS_SHORTCODES_URL', $lib_url . '/shortcodes' );
define( 'GENESIS_STRUCTURE_URL', $lib_url . '/structure' );
define( 'GENESIS_WIDGETS_URL', $lib_url . '/widgets' );
}
}