如何正确加载我的 custom.css 文件？

Question

custom.css file load properly but after some changes in CSS file and send it on filezilla it does not load that current changes. It loads after remove functions.php file and again paste all data. What should I do to solve that problem. Below I have attached link file. I also write <?php wp-head()?> in header and <?php wp-footer()?> in footer file.

function wpdocs_theme_name_scripts() {
    
    //  style link
    wp_enqueue_style ( 'bootstrap.min', get_template_directory_uri(). '/assets/css/bootstrap.min.css','1.1', true);
    wp_enqueue_style ( 'swiper-bundle.min ', get_template_directory_uri(). '/assets/css/swiper-bundle.min.css','1.1', true);
    wp_enqueue_style ( 'style css', get_stylesheet_uri() );
    wp_enqueue_style ( 'custom css', get_bloginfo('template_directory'). '/custom.css','1.1', true);
    
    //  script link
    wp_enqueue_script ( 'jquery-3.5.1.slim.min', get_template_directory_uri(). '/assets/js/jquery-3.5.1.slim.min.js', array(), 1.0, true );
    wp_enqueue_script ( 'bootstrap.bundle.min', get_template_directory_uri(). '/assets/js/bootstrap.bundle.min.js', array(), 1.0, true);
    wp_enqueue_script ( 'popper.min', get_template_directory_uri(). '/assets/js/popper.min.js', array(), 1.0 , true );  
    wp_enqueue_script ( 'swiper-bundle.min', get_template_directory_uri(). '/assets/js/swiper-bundle.min.js', array(), 1.0 , true );  
    wp_enqueue_script ( 'main js', get_stylesheet_directory_uri(). '/assets/js/main.js', array(), 1.0 , true );
    };
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Answer 1

This sounds like a caching issue. If you are not able to properly clear server's and browser's cache then you can have proper versioning based on the file's last modified time. Example:

$my_version = filemtime(get_template_directory() . '/custom.css');
wp_enqueue_style ('custom-css', get_template_directory() . '/custom.css', false, $my_version, 'all');

When the custom.css file is updated on the server, WP will append the appropriate timestamp and your browser will download the new version.

Also do not use spaces in your handle strings, ie. change 'custom css' to 'custom-css' .

Answer 2

Using the third parameter, the array() , upon enqueuing, you can define a dependency using the dependency handle, via the array( 'dependency_handle' ) . Your dependency handle should be a one word string, you can't use style css you need to use style_css or style-css .

<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if( ! is_admin() ) {
    wp_enqueue_style ( 'style_css', get_stylesheet_uri(), array(), '1.0', 'all'  );
    wp_enqueue_style ( 'custom_css', trailingslashit( get_template_directory_uri() ) . 'custom.css', array( 'style_css' ), '1.0', 'all' );
  };
}; ?>

Here we specify that we want out custom_css to be enqueued AFTER the style_css .

Using the fourth parameter, the version, here 1.0 let Wordpress knows NOT to serve a cache version if the version as changed. Therefore if you specified 1.1 Wordpress will fetch a fresh version of our script. (For development tho, you might want just to use your browser in incognito mode, which doesn't cache anything)