Error Enqueing child theme stylesheets

  • Hi, I’m trying to create and use a child theme.

    I created the “themeName-child” folder
    I created a stylesheet “style.css as written in the documentation.

    After activating the child theme i have create the function.php file.
    To load the parent stylesheet i put the following code in the function.php of the child theme folder:

    <?php
add_action ('wp_enqueue_scripts', 'my_plugin_add_stylesheet');
function my_plugin_add_stylesheet () {
    wp_enqueue_style ('my-style', get_stylesheet_directory_uri (). '/style.css', false, '1.0', 'all');
}

    I also tried this: 

    <?php
add_action ('wp_enqueue_scripts', 'my_theme_enqueue_styles');
function my_theme_enqueue_styles () {
 
    $ parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style ($ parent_style, get_template_directory_uri (). '/style.css');
    wp_enqueue_style ('child-style',
        get_stylesheet_directory_uri (). '/Style.css',
        array ($ parent_style),
        wp_get_theme () -> get ( 'Version')
    );
}

    The parent stylesheet isnt loaded.
    What am I doing wrong?
    Thank you

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter enatella

    (@enatella)

    I also tried to import parent stylesheet placing the following code on the child stylesheet
    @import url ('../themeName/style.css');

    The first bit of code would load the child style sheet, not the parent style sheet.
    The second code has some syntax errors (unless you changed it for the forum).
    PHP variable names start with a $ and you can’t have a space in the name. So instead of $ parent_style you would write $parent_style.
    And I don’t think you can have spaces around the ->, but I’ve never tried it.
    And file names are case sensitive, so instead of '/Style.css' you should have '/style.css'.

    You need to use the correct parent style handle for your theme, so that it is loaded correctly.

    • This reply was modified 4 years, 10 months ago by Joy.
    Thread Starter enatella

    (@enatella)

    Thank you but unfortunately the code is well written on the function.php file.
    There was only a copying error here.

    <?php
function my_theme_enqueue_styles() {
    $parent_style = 'wp-bootstrap-4'; // This is 'wp-bootstrap-style' for the wp bootstrap theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

    This is the code, it’s correct?

    • This reply was modified 4 years, 10 months ago by enatella.
    • This reply was modified 4 years, 10 months ago by enatella.

    I don’t see any problems with that, if the parent handle is exactly what is used in the parent theme. Do you still have the @import in the style.css?
    Use your browser to view the source of the page to see what is being output in the <head> section.

    It’s best to ask at the theme’s support forum, in case the theme does something different than usual. (Like my theme, which loads the child style so the child doesn’t have to load anything.)

    Hello,

    I think you should try this code.

    
<?php
function my_plugin_add_stylesheet () {
    wp_enqueue_style ('my-style', get_template_directory_uri (). '/style.css', false, '1.0', 'all');
}
add_action ('wp_enqueue_scripts', 'my_plugin_add_stylesheet');

    OR

    
<?php
function my_theme_enqueue_styles() {
	$parent_style = 'parent-style';
	wp_enqueue_style ($parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 1000 );

    Thanks!

    Thread Starter enatella

    (@enatella)

    @joyously

    Do you still have the @import in the style.css?

    Yes but nothing change

    Use your browser to view the source of the page to see what is being output in the <head> section.

    I see only child style resource but two times:

    <link rel='stylesheet' id='wp-bootstrap-4-style-css'  href='https://domain/wp-content/themes/wp-bootstrap-4-child/style.css?ver=1.0.2' type='text/css' media='all' />
<link rel='stylesheet' id='wp-bootstrap-4-child_no-kirki-css'  href='https://domain/wp-content/themes/wp-bootstrap-4-child/style.css' type='text/css' media='all' />

    It’s best to ask at the theme’s support forum, in case the theme does something different than usual. (Like my theme, which loads the child style so the child doesn’t have to load anything.)

    Now I also ask them.
    Thank you

    Remove the @import.
    From the source code, it looks like the handle for your parent theme is wp-bootstrap-4-style not wp-bootstrap-4. It must match what is in the parent, or you will get two copies or styles that depend on that handle don’t get loaded.

    Thread Starter enatella

    (@enatella)

    When I deactivate the theme child, the style folder is wp-bootstrap-4, but when I activate it the folder is wp-bootstrap-4-style

    The source code of original theme.

    <link rel='stylesheet' id='wp-bootstrap-4-style-css'  href='domain/wp-content/themes/wp-bootstrap-4/style.css?ver=1.0.2' type='text/css' media='all' />
<link rel='stylesheet' id='wp-bootstrap-4_no-kirki-css'  href='domain/wp-content/themes/wp-bootstrap-4/style.css' type='text/css' media='all' />

    The function.php file of theme enqueue/import the stylesheet in this way:

    ...
wp_enqueue_style( 'wp-bootstrap-4-style', get_stylesheet_uri(), array(), '1.0.2', 'all' );
...
    • This reply was modified 4 years, 10 months ago by enatella.

    The handle needs to match what is in the parent theme’s functions.php: 'wp-bootstrap-4-style'. WordPress adds the -css on the end.

    Thread Starter enatella

    (@enatella)

    Sorry I didn’t understand. What should I do?

    I didn’t understand why it loads the file style.css twice, both with the parent and with the child theme.

    When I use the parent theme, WP load (twice) the file style.css from the wp-bootstrap-4 folder.

    When I activate the child theme load the style.css file (twice) from the child folder wp-bootstrap-4-child, not from wp-bootstrap-4-style

    How do I load both style.css files correctly?

    Thank you so much @joyously

    If the parent by itself is doing it wrong, your best option is to ask in the theme’s support forum. The theme author and the people that use the theme know it best.

    Thread Starter enatella

    (@enatella)

    The parent theme as long as I don’t use the child theme it works properly.
    The only strange thing is that it uploads two files style.css but in the correct folder.
    Only if I activate child theme doesn’t work properly.

    It looks like it doesn’t loads the template directory wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); but only the stylesheet directory wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') );

    Don’t you think it just depends on the function.php of the child theme?

    I’m doing something wrong

    Again, please ask in the theme’s support forum. You can point them to this topic to reference, so you don’t have to explain it all again, but that is the place to get theme answers.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Error Enqueing child theme stylesheets’ is closed to new replies.