2

I am trying to include a CSS file using wp_enqueue_style conditionally on whether I am on the front page. I am testing for the home page with this code:

if ( is_front_page() ) wp_enqueue_style ('TBDhome', get_template_directory_uri() . '/css/TBDhome.css','all');

It worked find when I was testing in the header file and including the CSS file.

  • Do you have a style sheet with the all handle? You have that listed as a dependency. Can you post more code from your function? This isn't enough to help. – disinfor Oct 10 '17 at 18:06
  • Where is this check happening? Is it happening inside an action/filter? Or are you straight up calling it right in the file outside any function? Keep in mind that when enquing styles and scripts it should be happening on the appropriate hook, don't just write random code in functions.php without using hooks/actions or it won't work as expected – Tom J Nowell Oct 10 '17 at 18:22
  • Thanks. I don't have action/filter and I'm not sure how to create them. Where can I get information on these? – LindaH53 Oct 10 '17 at 20:01
  • Google is your friend. developer.wordpress.org/reference/functions/wp_enqueue_style – disinfor Oct 11 '17 at 4:10
0

Even though this question may get down voted - because not enough information has been provided and it's fairly easy to find tutorials elsewhere, I'll help you out.

In your functions.php file in your theme, you need to do this:

add_action( 'wp_enqueue_scripts', 'wp5849_scripts' );
function wp5849_scripts() {
    if ( is_front_page() ) :
        wp_enqueue_style('TBDhome', get_stylesheet_directory_uri() . '/css/TBDhome.css');
    endif;
}

What this is doing: The first line add_action is the hook to run your function wp5849_scripts() at a certain point during WordPress's internal setup. You can read more about action hooks and filters in the WordPress codex.

The second part is the actual function to enqueue the stylesheet. Checks to see if it's the front page of the site, if it passes, it will load the stylesheet.

I updated the directory to be get_stylesheet_directory_uri() because if you are using a child theme, get_template_directory_uri() will return the PARENT theme directory. get_stylesheet_directory_uri() will work with whatever theme is currently active (parent or child).

You can read more on the arguments that are passed to wp_enqueue_style here

As a note: you may already have a function that is enqueuing scripts and styles in your functions.php (look for the add_action( 'wp_enqueue_scripts') hook). If that's the case, you simply need to add:

if ( is_front_page() ) :
        wp_enqueue_style('TBDhome', get_stylesheet_directory_uri() . '/css/TBDhome.css');
endif;

to the function that the add_action is calling. I wanted to add this as an option.

EDIT: It appears there may be a larger theme issue or setting issue, based on OP comments. Here is an option to place the stylesheet in the header.php

if ( is_front_page() ) {
    echo '<link rel="stylesheet" id="TBDHome-css"  href="' . get_stylesheet_directory_uri() . '/css/TBDhome.css" type='text/css' media='all' />
}
  • Thank you but this still isn't working. I am not getting any conditional style sheets added. My functions file looks like this: 'add_action( 'wp_enqueue_scripts', 'wp5849_scripts' ); function wp5849_scripts() { if ( is_front_page() ) : wp_enqueue_style ('TBDhome', get_stylesheet_directory_uri() . '/css/TBDhome.css'); endif; } – LindaH53 Oct 12 '17 at 19:33
  • What is the full directory to your CSS file? I can confirm that the code provided has been tested and works. So this leads me to believe your CSS file isn't in the directory or there is something else going on. Are you using a child theme? – disinfor Oct 12 '17 at 20:27
  • The directory is tbdarchive2017.dev/wp-content/themes/TempleBethDavid/css. I print it out right before the function call and I have used it other places. It is not a child theme. I created the theme myself. This is the only thing I have right now in the function file. – LindaH53 Oct 12 '17 at 20:49
  • Do you have the front-page set in Settings > Reading? The only thing that I can think of is that your home page is set to show posts in which case you would use is_home() – disinfor Oct 12 '17 at 21:15
  • No, I'm testing other places and it shows up as front page. I'm totally stumped. Thanks though. – LindaH53 Oct 12 '17 at 21:58
0

is_front_page() will return false before the wp hook because the wp object is not set up yet.

//* If placed directly in functions.php, this will work
add_action( 'wp', 'wpse_282498_wp' );
function wpse_282498_wp() {
  if( is_front_page() ) {
    do_something_useful();
  }
}

//* If placed directly in functions.php, this will *not* work
if( is_front_page() ) {
  //* Because this will never be run
  do_something_useful();
}
  • It turns out it's an issue with her theme - read the last two comments on my answer. – disinfor Oct 13 '17 at 22:39

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.