3

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.

4
  • 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, 2017 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, 2017 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, 2017 at 20:01
  • Google is your friend. developer.wordpress.org/reference/functions/wp_enqueue_style
    – disinfor
    Oct 11, 2017 at 4:10

3 Answers 3

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' />
}
21
  • 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, 2017 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, 2017 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, 2017 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, 2017 at 21:15
  • 1
    Sorry, I meant to say that it does, as you suggested, work fine in another theme but not in mine. How can I begin to track this down?
    – LindaH53
    Oct 13, 2017 at 17:26
1

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();
}
1
  • It turns out it's an issue with her theme - read the last two comments on my answer.
    – disinfor
    Oct 13, 2017 at 22:39
0

Check whether you have created front-page.php in root folder.

2
  • In the root folder? You mean in the theme folder?
    – Rup
    Oct 23, 2020 at 20:55
  • 1
    In any case I don't think is_front_page() actually requires a front-page template.
    – Rup
    Oct 23, 2020 at 20:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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