How to Handle CSS for Multiple Header header.php Files?

That’s not how you use get_theme_file_uri();

You need to specify the directory RELATIVE to your currently active theme’s directory.

So for example, if your currently activated theme is rm-acf1, and all of your custom header CSS files are located in the subfolder hdr-styles.

  • This is your theme directory: ./wp-content/rm-acf1/
  • This is your header styles directory:
    ./wp-content/rm-acf1/hdr-styles/

So when you use get_theme_file_uri(); with no parameters, it should default you to ./wp-content/rm-acf1/.

Now in your situation, you want to target files in a subdirectory within your currently activated theme directory so you would need to specify the relative path.

You would use it like this: get_theme_file_uri( 'hdr-styles/' . $appropriateHeader );


EDIT in regards to your error: Fatal error: Call to undefined function get_theme_file_uri()

Try the following instead:

wp_enqueue_style( 'my_header_css_scripts', get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader );

and actually the style handle should probably be reflective of the style sheet being loaded. So instead of generically using “my_header_css_scripts” for the loaded style sheet, perhaps something like basename($appropriateHeader)

Example:

wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader );

Leave a Comment