Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress How to Build a WordPress Theme Preparing to Code WordPress Templates Linking CSS

Don Shipley
Don Shipley
19,488 Points
Posted by Don Shipley
Don Shipley
19,488 Points

flexslider.css, and flexslider.js will not populate onto my front-page.php

flexslider.css and flessleder.js does not show on front-page.php

// Load the Theme CSS function theme_styles() {

wp_enqueue_style( 'normalize', get_template_directory_uri() . '/css/normalize.css' );   
wp_enqueue_style( 'grid', get_template_directory_uri() . '/css/grid.css' ); 
wp_enqueue_style( 'googlefonts', 'http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic' ); 
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );    
wp_enqueue_style( 'social', get_template_directory_uri() . '/css/webfonts/ss-social.css' );     

wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' );
if( is_page( 'home' ) ) {
    wp_enqueue_style( 'flexslider' );
}

}

// Load the Theme JS function theme_js() {

wp_register_script( 'flexslider', get_template_directory_uri() . '/js/flexslider.js', array('jquery'), '', true );
if( is_page( 'home' ) ) {
    wp_enqueue_script( 'flexslider' );
}   
wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true );

} add_action( 'wp_enqueue_scripts', 'theme_js' );

add_action( 'wp_enqueue_scripts', 'theme_styles' );

3 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

In your browser dev tools, look and see if they are being downloaded at all, or if they are not found. That's where I usually start. See if the browser even received those web files.

Don Shipley
Don Shipley
19,488 Points
Don Shipley
Don Shipley
19,488 Points

It does not see the flexslider.css or the flexslider.js. It does see the other css files. If I change the wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' ); if( is_page( 'home' ) ) { wp_enqueue_style( 'flexslider' ) to wp_enqueue_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css');

It will read the flexslider.css

Don Shipley
Don Shipley
19,488 Points
Don Shipley
Don Shipley
19,488 Points

Just removed the if(is_page('home') on both the on the wp_register_style and the wp_register_script works fine. Must be something with the ('home')

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Just posted a new idea, so i created a new response. Front-page and home are not the same.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Okay, new idea. Had to re-read your original question.

You state you want to get it to show up on front-page.php, but your if check is only checking if the page is home.php. Front-page and home serve two very different purposes in Wordpress's template hierarchy.

Try changing your check to

is_page( 'front-page' )

Don Shipley
Don Shipley
19,488 Points
Don Shipley
Don Shipley
19,488 Points

Sorry that did not work.. Just changed it leaving off the if statement works fine. wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' );

    wp_enqueue_style( 'flexslider'

Also removed the if statement for the js file..

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

try is_page_template( 'front-page.php' );

What you're trying to do is smart, to only include assets on pages that need them.

Don Shipley
Don Shipley
19,488 Points
Don Shipley
Don Shipley
19,488 Points

Thank you for your thoughts and time. This will work on Zacs page. I must have messed up the home page somehow. Reads the front-page.php fine. Just the if statement for the 'home' is not working. For now if the other pages sees the css and js is fine. When I build another site will be more careful creating the pages inside of wordpress. It must be reading the home page incorrectly inside the database and not sure how to fix that problem at this time.

Again Thank you for your efforts.

Don Shipley
Don Shipley
19,488 Points
Don Shipley
Don Shipley
19,488 Points

Hello Kevin, Again thank you for your time. Just to let you know I found the problem. Not sure why I may have renamed my Home page to Games but the Games page showed the url as /home. Renamed the url to show games went into the home page and renamed the url to be home. It was showing as home-2. Went into the reading and for some reason the static page for home changed to select. Changed that back to show home. Now it all works with the if(is_page('home'){ wp_enqueue_script( 'flexslider' ); }

works great.

Again thank you for your time..