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

Question

So, I'm building a new theme based on Underscores. So far, I've managed to get ACF Pro to call different header files from a dropdwon selction in the Options page but, now I am faced with the task of determining how best to handle the css for each of the custom header files and how to load widget areas based on which header file is loaded.

First the css bit: Since the Underscores theme has very minimal style rules out of the box, I was thinking that it might not be a bad idea to include header-specific css files based on the header file being called by ACF Pro in the Options page. For example, I'd create a header file called header-slim.php and in my functions file, do some sort of 'if' header=header-slim.php, then load header-slim.css. This way, i would only only be loading a small css file for the chosen header, a normal style.css file, and then, for different footers, a footer.css file (ex: footer-full-width.css).

If this is an acceptable way to go about the multiple header layout concept, then what, exactly would I put in my functions file? Another detail is that if no header layout option is chosen, the theme will run the normal get_header() as a default function.

Now for the header widgets: Correct if I am wrong (which is often) but, if I load header1.php file and it has 3 widget areas in it, then those three widgets would automatically appear in the available widgets on the widgets page in WP Admin, right? Of course, after loading a header I'd need to refresh the widgets page and, so long as those widgets areas have been registered in my functions file, they would load provided there is a header file that calls said registered widgets, correct?

I've done quite a lot of digging around here and on the web in general and I've yet to find anything that addresses my questions specifically. If there is something here and I've missed it, please forgive me.

I would love some specific help with what I'm trying to achieve if you guys don't mind.

Many thanks! Ray

UPDATE: Here's some code bits for you to have a look at.

This is what I have at the top of my index.php file in order to print whichever header is selected in the ACF Pro options page:

<?php $selectHeader = get_field( 'select_header_layout','option'); if($selectHeader == "black"){get_header('black');} elseif($selectHeader == "gray"){get_header('gray');} elseif($selectHeader == "red"){get_header('red');} else {get_header();} ?> 

And here's what I've added to my functions.php file - I edited the 'chosen_header' to 'select_header_layout' so as to match what I have in the index.php file. Here comes the mess...

function my_header_css_scripts () { switch (get_field ('select_header_layout', 'option')) { case 'header-black.php': $appropriateHeader = 'header-black.css'; break; case 'header-gray.php': $appropriateHeader = 'header-gray.css'; break; case 'header-red.php': $appropriateHeader = 'header-red.css'; break; default: $appropriateHeader = 'header-default.css'; break; } wp_enqueue_style ('my_header_css_scripts', get_theme_file_uri('/wp-content/themes/rm-acf1/hdr-styles/' . $appropriateHeader)); } add_action ('wp_enqueue_scripts', 'my_header_css_scripts'); 

Here's the code I have in my functions.php file right now (Jan 4, 2016 @ 4:30pm):

function my_header_css_scripts () { switch (get_field ( 'chosen_header', 'option' )) { case 'header-black.php': $appropriateHeader = 'header-black.css'; break; case 'header-gray.php': $appropriateHeader = 'header-gray.css'; break; case 'header-red.php': $appropriateHeader = 'header-red.css'; break; default: $appropriateHeader = 'header-default.css'; break; } wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader ); } add_action ('wp_enqueue_scripts', 'my_header_css_scripts'); 

Answer 1

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

Answer 2

Yes your approach to loading header-specific CSS sounds fine. You could do something like this in functions.php:

function my_header_css_scripts () { switch (get_field ('chosen_header', 'option')) { case 'header-slim.php': $appropriateHeader = 'header-slim.css'; break; case 'header-whatever.php': $appropriateHeader = 'whatever.css'; break; default: $appropriateHeader = 'header.css'; break; } wp_enqueue_style ('my_header_css', get_theme_file_uri ('/themepath/to/css/' . $appropriateHeader)); } add_action ('wp_enqueue_scripts', 'my_header_css_scripts'); 

For the widgets... it's not entirely clear what you're asking, but to recap: you can place specific widgets using the_widget or ones specified in the admin area using dynamic_sidebar. Your selected header php file can't change the widget selections in the admin area, because it's only for outputting a page header. Instead, you could define multiple new widget areas, as shown in this post from buckleupstudios.com, one for each header type, and then each header's widgets would be customizable in the admin area. If, in the admin area, you only want to show the widget area for the currently selected header then I'm guessing you'd have to hook into the admin widgets page somehow and hide the other widget areas.

Answer 3

So, after scratching my head and trying a few things, I am happy to report that thanks to @iguanarama and @Michael Ecklund, the multiple headers calling stylesheets conditionally is now up and running! :) I want to thank you both for all your help...seriously! I've pasted the code that's working now in my functions.php file below for you guys to have a look at. Now, I have to figure out how to show corresponding widgets in the widget admin page in WP-Admin. What I mean by this is when I load header say, header-1, the only available header widgets in the widget admin page are widgets that will show in header-1 on the front-end.

Here's the code that's working:

function my_header_css_scripts () { switch (get_field ( 'select_header_layout', 'option' )) { case 'black': $appropriateHeader = 'header-black.css'; break; case 'gray': $appropriateHeader = 'header-gray.css'; break; case 'red': $appropriateHeader = 'header-red.css'; break; default: $appropriateHeader = 'header-default.css'; break; } wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader ); } add_action ('wp_enqueue_scripts', 'my_header_css_scripts');