CSS/js not loading

Question

I need help. I already watched the videos, looked the forums. Please, I can't find what I am doing wrong. The menus is not loading proper for example.

my code functions.php

<?php

function wpt_theme_styles() {

    wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundation.css' );
    wp_enqueue_style( 'normalize_css', get_template_directory_uri() . '/css/normalize.css' );
    wp_enqueue_style( 'normalize_css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

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


function wpt_theme_js() {

    wp_enqueue_script( 'modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false );
    wp_enqueue_script( 'foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true );
}
add_action( 'wp_enqueue_scripts', 'wpt_theme_js' );

?>

header.php

<!doctype html>
<html class="no-js" lang="en">
  <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>
    <header class="row no-max pad main">
  <h1><a class='current' href="<?php bloginfo('url'); ?>"> <?php bloginfo('name'); ?></a></h1>
  <a href="" class="nav-toggle"><span></span>Menu</a>
  <nav>
    <h1 class="open"><a class='current' href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    <ul class="no-bullet">
      <li class="current parent"><a class='current' href="index.html">Portfolio</a>
        <ul class="sub-menu">
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
        </ul>
      </li>
      <li class="parent"><a href="blog.html">Blog</a>
        <ul class="sub-menu">
          <li><a href="single-post.html">Single Post</a></li>
          <li><a href="author.html">Author Page</a></li>
        </ul>
      </li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

code: index.php

<?php get_header(); ?>

<h1>Index Files</h1>

<?php get_footer(); ?>

Answer 1 · 2017-11-25T15:32:53Z

November 25, 2017 3:32pm

oki, nevermind! It was some bug on wordpress. I activate and deactivated the theme a couple of times and it works finally.

Answer 2 · 2017-11-27T16:58:41Z

November 27, 2017 4:58pm

Interesting! It's unlikely this was a "bug in WordPress" that resulted in missing assets in the browser. What's more likely is your browser cached a version of the page without the calls to CSS and JS files and reloading the page multiple times after activating and deactivating WordPress themes eventually cleared the cache.

Browser (and occasionally server) caches can be a frustrating experience when developing a site, but they are critical to improving site performance for your visitors. Some documentation that may help get a sense of caching:

Welcome to the Treehouse Community

Looking to learn something new?

raquel pinto

raquel pinto

CSS/js not loading

2 Answers

raquel pinto

raquel pinto

Austin Whipple

Austin Whipple