Browser stacks different versions of style.css

Question

I am working with a child theme from 'Astra'. I am editing 'style.css' of my child theme for styling my website. I added this code to my child's functions.php' file to enqueue the father-child styles.

<?php

add_action('wp_enqueue_scripts', 'example_enqueue_styles');

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

$parent_style = 'astra';

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')
);
}

Although the browser is painting the styles of my child theme as I intend, it also happens to do it twice in different versions of the same code:

It causes styling issues with some elements. I believe the source of the problem is my enqueuing code but I don't know what it is.

Thank you.

Answer 1

The problem comes from that the parent style is loaded twice :

1. one with version ('?ver=1.0 etc, first on your picture and loaded by your parent theme with versionning on wp_enqueue_style ),
2. another without (the second on your picture, called by your function php).

To solve this : remove

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

As it is already loaded by your parent theme and described as a dependency of your child style.

Answer 2

Need to remove this first : add_action('wp_enqueue_scripts', 'example_enqueue_styles');

And, please try this:

function my_theme_enqueue_styles() {

  $parent_style = 'astra'; 
  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' );