I would like to import several styles sheets in my child theme (oceanWP). I succeed to do it with "@import" method but not with enqueueing scripts and styles.

My child theme uses this "style.css" :

/*
 Theme Name:   oceanwp-child
 Theme URI:    
 Description:  OceanWP WordPress theme example child theme.
 Author:       Phil
 Author URI:   
 Template:     oceanwp
 Version:      1.0.0
*/
/*@import url("./custom/navbar.css"); First, I try to import this with enqueueing method */
@import url("./custom/home.css");
@import url("./custom/voyages.css");
@import url("./custom/concept.css");
@import url("./custom/carnets.css");
@import url("./custom/contact.css");
@import url("./custom/articles.css");`

Child theme function.php :

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-style', get_stylesheet_directory_uri() . './custom/navbar.css', array( 'oceanwp-style' ), $version );
}
add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );

Other syntax tried without success:

wp_enqueue_style( 'child-navbar-style', get_stylesheet_directory_uri() . './custom/navbar.css', array(), '1.0', 'all' );

Is someone can help me ? Thx !

I would like to import several styles sheets in my child theme (oceanWP). I succeed to do it with "@import" method but not with enqueueing scripts and styles.

My child theme uses this "style.css" :

/*
 Theme Name:   oceanwp-child
 Theme URI:    https://monsite
 Description:  OceanWP WordPress theme example child theme.
 Author:       Phil
 Author URI:   https://voyageinitiartique
 Template:     oceanwp
 Version:      1.0.0
*/
/*@import url("./custom/navbar.css"); First, I try to import this with enqueueing method */
@import url("./custom/home.css");
@import url("./custom/voyages.css");
@import url("./custom/concept.css");
@import url("./custom/carnets.css");
@import url("./custom/contact.css");
@import url("./custom/articles.css");`

Child theme function.php :

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-style', get_stylesheet_directory_uri() . './custom/navbar.css', array( 'oceanwp-style' ), $version );
}
add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );

Other syntax tried without success:

wp_enqueue_style( 'child-navbar-style', get_stylesheet_directory_uri() . './custom/navbar.css', array(), '1.0', 'all' );

Is someone can help me ? Thx !

• child-theme
• wp-enqueue-style

• If it does not load the stylesheet you wanted, what does it load instead? Is it giving a 404? What does the error console in the browser dev tools say? – Tom J Nowell ♦ Commented May 29, 2020 at 9:32
• The navigation bar is displayed but without expected styles. In code source, in the head the style sheet is present. In browser "css edit", message : "The requested resource <code class="url">/wp-content/themes/oceanwp-child./custom/navbar.css?ver=1.0</code> was not found on this server" – Phil Commented May 29, 2020 at 9:37
• Ah, look at the URL it has a typo – Tom J Nowell ♦ Commented May 29, 2020 at 9:59

1 Answer 1

You had the right idea, but made an unfortunate typo: . './custom/navbar.css'.

Removing the additional fullstop should correct the URL, otherwise you were succesfully enqueing a stylesheet, the code just enqueued the wrong URL due to the typo