1

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');
  • What happens when you print_r( get_field ( 'select_header_layout', 'option' ) );? – Michael Ecklund Jan 4 '17 at 18:18
  • Just tried that and the site crashed. Then again, the site also crashes if I try get_theme_file_uri instead of get_stylesheet_uri - but, when I run that it obviously doesn't call the stylesheet I need to call for the currently selected header. So... :( – AlonsoF1 Jan 4 '17 at 18:34
  • You'll want to verify the output of get_field ('select_header_layout', 'option') to make sure it meets one of your conditions. Otherwise it'll always be loading the default CSS. – Michael Ecklund Jan 4 '17 at 20:36
2

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

  • Hey Michael! Thanks for stepping in and helping me get this sorted. So, I just edited the code to reflect your changes and I'm still stuck with a white screen on the front-end. Not sure what's causing it. – AlonsoF1 Jan 4 '17 at 18:41
  • Edit your wp-config.php file in the base directory of your WordPress installation. Find the line define( 'WP_DEBUG', false ); and change it to true. Post your error. – Michael Ecklund Jan 4 '17 at 19:19
  • Here's the error I saw upon enabling wp_debug: Fatal error: Call to undefined function get_theme_file_uri() in /nas/content/live/rmacf/wp-content/themes/rm-acf1/functions.php on line 139 – AlonsoF1 Jan 4 '17 at 20:23
  • @AlonsoF1 I've made some modifications to my answer, in regards to the fatal PHP error you posted. – Michael Ecklund Jan 4 '17 at 20:38
  • @MichealEcklund - Ok, so it is loading the header-default.css file even though I have the black header selected which, should call the stylesheet named header-black.css - What am I missing as far as checking which header has been loaded by my current header layout selection in ACF Pro Options page? We're getting so close! :) I have put the code I have in my functions file as it sits at this moment for you to have a look at. The code I posted earlier from the index.php file is unchanged. – AlonsoF1 Jan 4 '17 at 21:25
0

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.

  • Thank you so much, @iguanarama! This is a fantastic start and looks to me like your example will work perfectly! Yes, my ideal solution would be to only display widget areas for the currently selected header. I need to do this to keep the number of displayed widget areas under control as we add more header layout options. If we were only going to have say, 3 of 4 selectable header layouts, I wouldn't even bother with hiding anything. So, my next quest/question is how to show only widgets for the currently selected header. Thanks to you, I've got a great start with multiple header/css files! :) – AlonsoF1 Jan 3 '17 at 19:38
  • @AlonsoF1 Glad it helps. One option that may be easier for you is bypass the admin widgets area altogether, and use ACF to provide dropdowns on the options page to select the widgets for each header type. – iguanarama Jan 3 '17 at 20:08
  • 1
    I may go with the dropdown option in the ACF Pro Options page. Think I will go ahead and post a new and specific question regarding the conditionally display widgets in the widget admin page. I'm marking your answer as being correct (and excellent). Much appreciated! – AlonsoF1 Jan 3 '17 at 22:39
  • So, I've been trying variations of the code you shared and, for some reason I can't get it to work. I've edited my original post to share with you the code I've got at the moment so you can hopefully get a better idea as to what I have at the moment. Please have a look at my post again with the newly added code and let me know what you think is wrong. Also, I will try and send you my wp-admin login info so you can have a look around there if need be. Thanks! – AlonsoF1 Jan 4 '17 at 18:06
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.