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

Posted by Jamil Smith
Jamil Smith
7,620 Points

Linking CSS

Hello,

I'm having trouble getting the flex slider to show up in my source code. On the Linking CSS tutorial everything else worked except for the slider showing up. I know it hasn't been coded yet, but I still can't see it in the source code. It is located in the css folder and I don't know what wrong with my code. The flexslider is in the css folder.

Here it is. Thanks!

<?php 

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

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

// Enable custom menus
add_theme_support( 'menus');

?>

7 Answers

Steve Monsen
Steve Monsen
5,207 Points
Steve Monsen
Steve Monsen
5,207 Points

I think your problem is that you are trying to use:

if( is_page( 'home' ) )

when the proper way to determine whether the current page being displayed is the homepage or not is with:

if( is_home() )

or

if( is_front_page() )

Try those two and see if it works. is_page( 'home' ) would only render your flexslider if you were visiting a wordpress page with the slug of 'home', unless you've set that page to display on your front page in: WP Admin > Settings > Reading > Front page displays: A static page".

See the WP docs for is_front_page and is_home. There is a bit of a distinction between the two that isn't immediately obvious.

Zac Gordon
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Thanks for this man, I think we need to post a note in the video where we cover this.

Steve Monsen
Steve Monsen
5,207 Points
Steve Monsen
Steve Monsen
5,207 Points

No problem. Glad I could help. I've edited my answer to make it more clear: "is_page( 'home' ) would only render your flexslider if you were visiting a wordpress page with the slug of 'home' , unless you've set that page to display on your front page in: WP Admin > Settings > Reading > Front page displays: A static page"

That should make it more clear if anyone else reads this in the future. I hadn't see the video so I left that part out.

Jamil Smith
Jamil Smith
7,620 Points
Jamil Smith
Jamil Smith
7,620 Points

Thanks for the response Steve, I really appreciate it!

I got it to work with the second one: if ( is_front_page() )

Can I ask you, if that's the way they do it in the video, would it still work for some people? Seems strange they would present it like that when it doesn't work. Maybe if the home page had a slug of "home" somewhere? Or does that not make sense?

Thanks again!

Steve Monsen
Steve Monsen
5,207 Points
Steve Monsen
Steve Monsen
5,207 Points

Actually, I haven't see the video. I just have experience with Wordpress theme development. If you could link to the video in question I will check it out.

And, yes, if you were to use a static homepage with the slug of 'home' that should work as well.

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

The reason we're using is_page( 'home' ) instead of is_home and is_front_page is just to reduce the number of functions we're using in the project. However, you are correct Steve that these are helpful functions to use.

However, if your homepage is named Home this should still work. Jamil, what did you name your homepage in the backend?

Jonathan Seligsohn
Jonathan Seligsohn
23,116 Points
Jonathan Seligsohn
Jonathan Seligsohn
23,116 Points

While we're in the function theme_styles(), I'm stuck in the middle of the video Linking CSS - I can't get the CSS to display.

I followed all the steps - added the function theme_styles(), added wp_enqueue_style('main'), and outside of the function, added "add_action('wp_equeue_scripts', 'theme_styles' );" and added "the_head()" and "the_footer" in the appropriate places.

But it's still not working. What's going on?

Any ideas?

Jonathan Seligsohn
Jonathan Seligsohn
23,116 Points
Jonathan Seligsohn
Jonathan Seligsohn
23,116 Points

Never mind. Was missing the letter "n" in enqueue...

James Bray
James Bray
8,466 Points
James Bray
James Bray
8,466 Points

I’m having an issue whereby the css is showing up in the source code but isn’t rendering. Any reason this would happen?

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8888/wordpress/wp-content/themes/DiamondLeaders/style.css?ver=3.5.2".

Steve Monsen
Steve Monsen
5,207 Points
Steve Monsen
Steve Monsen
5,207 Points

It sounds like a server configuration issue. Looks like there is an answer @ stackoverflow: http://stackoverflow.com/questions/10553638/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-html

You can try the .htaccess fix or try fixing it in your httpd.conf file so you don't have to add that htaccess line to all local sites on your server.

DON FLOYD
DON FLOYD
3,711 Points
DON FLOYD
DON FLOYD
3,711 Points

I had to change to if( is_front_page() ) as-well and all is now good, cheers Steve.