Add CSS in head via a file in the child theme directory (not via "Additional CSS")

This can be really useful to avoid relying on Appearance > Customize > Additional CSS and to save a child-theme and be ready to install it anywhere else.

This is also used in place of the style.css file, which is not as effective.

To add additional CSS via a file, create a file named additional-css.css and place in at the root of the child-theme directory. In file, paste the following:

/*
Additional CSS automatically added in head via the function 'additional_css_in_head' in functions.php.
This file replaces Appearance > Customize > Additional CSS
*/

Then, add all your CSS below (and remove any CSS from Appearance > Customize > Additional CSS).

Once you have done that, paste the following in your child-theme’s functions.php:

/* Add content of additional-css.css in head */
add_action('wp_head', 'additional_css_in_head');
function additional_css_in_head(){
    ?><style><?php
    echo file_get_contents( "[PATH TO ADDITIONAL-CSS.CSS]" );
    ?></style><?php
};

Add the path to the additional-css.css file. It should be something like “https://www.yourdomain.com/wp-content/themes/child-theme/additional-css.css”.

If it does not work, make sure that the server’s PHP setting “allow_url_fopen” is set to “on” or add “allow_url_include=1” to the “php.ini” file.