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

mmm mmm
mmm mmm
6,832 Points
Posted by mmm mmm
mmm mmm
6,832 Points

Wordpress CSS doesn't load

Hello everyone!

I finished the WordPress theme development today and thought it would be good to practise some more.

So I'm trying to turn the "Portfolio" made in the HTML/CSS course (by Nick Pettit) into a WordPress theme.

For some reason the enqueue method doesn't seem to work. I don't understand what I'm missing.

None of the css are showing in the source code.

If anyone can enlight me a little, it would be great :)

Here is the header.php

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
  </head>

  <body <?php body_class(); ?>>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

here the footer.php

<footer>
  <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
  <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
  <p>&copy; 2014 Nick Pettit.</p>
</footer>
    </div>

    <?php wp_footer(); ?>
  </body>
</html>

and here the function.php

<?php
function wpn_theme_styles(){
  wp_enqueue_style( 'normalize_css', get_template_directory_uri() . '/css/normalize.css');
  wp_enqueue_style( 'responsive_css', get_template_directory_uri() . '/css/responsive.css');
  wp_enqueue_style( 'googlefont_css', 'http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800');
  wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'wpn_theme_styles' );

//function wpn_theme_js(){
//}
//add_action( 'wp_enqueue_scripts', 'wpn_theme_js');
?>

1 Answer

Saskia Lund
Saskia Lund
5,673 Points

First: Are you working in a child theme? Or is this a standalone theme?

Second: try changing the code in your functions.php like this

<?php 
function wpn_theme_styles(){
  wp_enqueue_style( 'normalize-css', get_template_directory_uri() . '/css/normalize.css' );
  wp_enqueue_style( 'responsive-css', get_template_directory_uri() . '/css/responsive.css' );
  wp_enqueue_style( 'googlefont-css', '//fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' );
  wp_enqueue_style( 'main-css', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'wpn_theme_styles' );

?>

Now make sure to place your normalize.css and responsive.css in this subdirectory:

/wp-content/themes/yourthemefolder/css/

Your style.css needs to go here:<br>

/wp-content/themes/yourthemefolder/

Now it should work.

mmm mmm
mmm mmm
6,832 Points
mmm mmm
mmm mmm
6,832 Points

Thanks Saskia for your answer! I found my error :)

There was no mistake in my code. When you said "Second: try changing the code in your functions.php like this", it just hit me in the face... I forgot to put an "s" to "function".

I can't believe, I was stuck on this for an hour...

Saskia Lund
Saskia Lund
5,673 Points

Hi Alex! Glad I could help!

Please still check the line where you define your style.css (main-css handler). You can shorten the line by using the get_stylesheet_uri() function instead of get_template_uri plus url concatenation.

:) Hugs Saskia