Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Load a custom style sheet on your site using the Genesis Framework.
<?php
//* Do NOT include the opening php tag
//* 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(), PARENT_THEME_VERSION );
}
//* 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';
}
@osalcedo

This comment has been minimized.

Show comment Hide comment
@osalcedo

osalcedo Jan 10, 2014

Awesome :)
Where should the custom.css file be placed?
Is there a way to place it into another folder, so it isn't overwritten when updating a premium child theme?

Awesome :)
Where should the custom.css file be placed?
Is there a way to place it into another folder, so it isn't overwritten when updating a premium child theme?

@braddalton

This comment has been minimized.

Show comment Hide comment
@braddalton

braddalton Sep 19, 2015

@osalcedo Based on the code above it's in the root directory. Otherwise you could put it in a folder named custom and use /custom/custom.css

Child themes aren't generally updated.

@osalcedo Based on the code above it's in the root directory. Otherwise you could put it in a folder named custom and use /custom/custom.css

Child themes aren't generally updated.

@YaronMiro

This comment has been minimized.

Show comment Hide comment
@YaronMiro

YaronMiro Jan 27, 2018

@osalcedo
This is an old answer, But still useful. If you want to preserve the loading of the style-sheet when overriding the functions.php than you can create a very simple mu-plugin (you can read more about it here), Basically it's a must load plugin at all times, This means that the style-sheet will always be loaded (You can create a plug-in to handle all the mandatory things that you need on your site and are global - I think it may be to robust to create the plug-in just for the style-sheet.

This is a code sample for loading the style-sheet via a plugin.

function theme_name_load_plugin_css() {
    $plugin_url = plugin_dir_url( __FILE__ );

    wp_enqueue_style( 'style1', $plugin_url . 'css/style1.css' );
    wp_enqueue_style( 'style2', $plugin_url . 'css/style2.css' );
}
add_action( 'wp_enqueue_scripts', ' theme_name_load_plugin_css' );

YaronMiro commented Jan 27, 2018

@osalcedo
This is an old answer, But still useful. If you want to preserve the loading of the style-sheet when overriding the functions.php than you can create a very simple mu-plugin (you can read more about it here), Basically it's a must load plugin at all times, This means that the style-sheet will always be loaded (You can create a plug-in to handle all the mandatory things that you need on your site and are global - I think it may be to robust to create the plug-in just for the style-sheet.

This is a code sample for loading the style-sheet via a plugin.

function theme_name_load_plugin_css() {
    $plugin_url = plugin_dir_url( __FILE__ );

    wp_enqueue_style( 'style1', $plugin_url . 'css/style1.css' );
    wp_enqueue_style( 'style2', $plugin_url . 'css/style2.css' );
}
add_action( 'wp_enqueue_scripts', ' theme_name_load_plugin_css' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment