Quick question: how to do child theme style file loading correctly?
If you are searching on WordPress, you will mostly get answers of using wp_enqueue_scripts. If you need to load parent styles too, as I usually do, you will need to call wp_enqueue_style twice, once for parent and once for child theme styles.
[div class=”notes”]
- Pay attention that get_template_directory_uri() and get_stylesheet_directory_uri() will return different values when using with child themes.
[end-div]
Can I do the same with Genesis framework?
Yes, you can do. But if you want to optimize your code, it is a bit different. When you define a child theme, Genesis will load the style.css file of the child theme automatically. That means if you use above method, the style.css file of the child theme will be loaded twice. So, here is what I do:
[div class=”code”]
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’, 5 );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
[end-div]
I only call to the style.css of the parent theme. Moreover, this needs to be processed before my customized style.css. That is why I put “5” there, for higher priority. The default priority in WordPress is 10. With lower numbers, the commands will be processed earlier. The issue is resolved, and your code is a bit cleaner 🙂