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' ); } }