The way you show your functions.php, is not a good base, because you are using the parent theme’s version number for the child style. The child style should use its own version number, and the parent use its own version number.
I will assume that your parent theme is loading its own file, since you aren’t (that is a good thing).
You probably should not use the parent theme’s function prefix either, since that’s not a function in the parent theme, but they could add it at any time.
You have the correct syntax for loading individual style sheets, however, they each need their own handle, which is the first parameter.wp_enqueue_style( 'child-navbar', get_stylesheet_uri() . './custom/navbar.css' );wp_enqueue_style( 'child-home', get_stylesheet_uri() . './custom/home.css' );wp_enqueue_style( 'child-concept', get_stylesheet_uri() . './custom/concept.css', array ('child-style'), $childversion );
etc.
You can even make them more specific by checking if the style is needed
if ( is_home() ) {
wp_enqueue_style( 'child-home', get_stylesheet_uri() . './custom/home.css' );
}
if ( is_page('voyages') ) {
wp_enqueue_style( 'child-voyages', get_stylesheet_uri() . './custom/voyages.css', array('oceanwp-style'), $childversion );
}Be sure to remove the @import lines from style.css once you get the styles enqueued. Actually, you should remove them first, so you can make sure you have them coming out in the right order. The child theme runs before the parent is loaded, so dependency and priority parameters are important.
Hello and thank you for taking the time to respond.
I am a beginner and I must admit I need more informations.
Imagine, I just would like to import “navbar.css”.
I don’t understand why the following syntaxes don’t have positive result :
function oceanwp_child_enqueue_parent_style() {
// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
$theme = wp_get_theme( 'OceanWP' );
$version = $theme->get( 'Version' );
// Load the stylesheet
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'oceanwp-style' ), $version );
wp_enqueue_style( 'child-navbar', get_stylesheet_uri() . './custom/navbar.css' );
}
add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );OR
function oceanwp_child_enqueue_parent_style() {
// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
$theme = wp_get_theme( 'OceanWP' );
$version = $theme->get( 'Version' );
// Load the stylesheet
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'oceanwp-style' ), $version );
wp_enqueue_style( 'child-navbar', get_stylesheet_uri() . './custom/navbar.css', array ('child-style'), $version );
}
add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );Other question : using the parent theme’s version number for the child style has a consequence for navbar style sheet import ?
Thank’s a lot
When you say it “doesn’t have a positive result”, what do you mean?
Did you look in the source of the page and see the stylesheets in the <head> section or not?
The problem with both functions is your comment doesn’t match the code or function name, and you are using the parent version number on the child style.
The whole point of putting the version number on the style is that the user’s browser is forced to load the new version because the URL changed, instead of using the one in cache. So the version number should be for the style being loaded, not some other thing.
When you say it “doesn’t have a positive result”, what do you mean?
Did you look in the source of the page and see the stylesheets in the <head> section or not?
Yes I see it but it doesn’t work.
Head code source :
<link rel='stylesheet' id='oceanwp-style-css' href='http://localhost:8000/wp-content/themes/oceanwp/assets/css/style.min.css?ver=1.0.0' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css' href='http://localhost:8000/wp-content/themes/oceanwp-child/style.css?ver=5.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='child-navbar-css' href='http://localhost:8000/wp-content/themes/oceanwp-child/style.css./custom/navbar.css?ver=5.4.1' type='text/css' media='all' />
<link But, in my browser dev tools, style editor, i found this message :
</head><body><h1>Not Found</h1><p>The requested resource <code class=”url”>/wp-content/themes/oceanwp-child/style.css./custom/navbar.css?ver=5.4.1 was not found on this server.</p></body></html>
OK, so you messed up the URL for the navbar style sheet. Change get_stylesheet_uri() to get_stylesheet_directory_uri()
The problem is still there with get_stylesheet_directory_uri().
I continue to search ^^
I have the solution. I made an unfortunate typo: . ‘./custom/navbar.css’ Removing the additional fullstop was the solution.
My new syntax is :wp_enqueue_style( 'child-navbar-style', get_stylesheet_directory_uri() . '/custom/navbar.css', array(), '1.0', 'all' );
Is it a clean code for you ?
Thx for your help
Does the navbar need to come after the child style, or the parent style? If so, put the dependency in that array parameter.
