How do you create custom.css for a child theme?

[dev]

Two questions:

1. How do I make a custom.css file for a Gen. child theme? Which is the "best practice":

http://www.briangardner.com/code/load-custom-style-sheet/
(Looks like this also deletes the "style.css"? Don't want that do we?

<?php
 
// 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';
}

http://www.petersenmediagroup.com/code/custom-css/

// Add custom.css file in functions.php
add_action('wp_head', 'add_customcss');
add_customcss( ) {
$pmg_css_link = ' ';
echo $pmg_css_link;
}

Custom CSS file???

add_action( 'wp_enqueue_scripts', 'enqueue_custom_stylesheet' );
function enqueue_custom_stylesheet() {
wp_register_style( 'custom-css', get_stylesheet_directory_uri() . '/custom.css' );
wp_enqueue_style( 'custom-css' );
}

2. I'm trying to "update-proof" a child theme as I have a ton of CSS overrides in one theme I don't want "lost" if the vendor comes out with a new version should WP require it. Is this even a necessary practice in Gen-world?

Thanks.

[dev]

I am surprised that after three days no one answered this. Maybe custom style sheets are just not done in Genesis land?

Anyone?

[hp]

I raised a ticket before in StudioPress helpdesk about custom.css too. Many other frameworks include that option already. Just create custom.css (or some other name that framework can define in its document), then your WordPress installation will automatically recognize and use settings there with higher priority. I am not sure why StudioPress doesn't have that useful feature. When I asked, they just replied that it might be appearing in the future.

Back to your question, I believe the 1st and 3rd ways are the same method. And wp_enqueue_style() is preferred. In case you want to use gzip or minify option, it will use wp_enqueue_scripts structures, beside the benefit that is making sure to load script once.

[dev]

The third way works great.

Thank you so much for taking the time to research this and answer my inquiry.

[Doak Heggeness]

You also have to load your custom.css after the child theme styles.css for it to take precedence. I am unclear why you need one regarding your vendor?

---

Doak Heggeness, WordPress Development | Website

[dev]

You also have to load your custom.css after the child theme styles.css for it to take precedence. I am unclear why you need one regarding your vendor?

Good point. The '3rd method' above does load the custom.css after the style.css.

As for why I'm bringing up the topic.. my thinking (logical progression) is this:

- I've been involved in IT systems work for 35 years (stated in 1973 with EDS)
- WP 3.6 is due out soon
- Gen 2.x is due out soon
- My experience tells me that things will break
- Some SP and community themes will (might) have to be changed
- The theme updates will 'wipe out' all changes made in the current theme's CSS.
- Ergo... perhaps it is best to take out all CSS overrides that are now at end of style.css and put them in custom.css

Maybe above won't happen, but like other professional web design shops in the Genesis community, clients expect us to anticipate problems and have solutions to them before they occur.

http://www.NewMediaWebsiteDesign.com

[hp]

Again, that's why I raised a ticket with StudioPress. It doesn't take much time to write a function for checking and loading custom.css if it's existed. Hope they have it in Genesis 2.0 when it's out. It will help to save time of all Genesis coders.

[Author]

Posts