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 WordPress Theme Development WordPress Header and Footer Templates Porting existing headers and footers into WordPress

Posted by Madalin Milea
Madalin Milea
12,469 Points

I have a problem with my treehouse portfolio after porting header and footer code.

Hello guys,

After I tried porting header and footer, my site not look properly.

In inspect element I have this error:

"Failed to load resource: the server responded with a status of 404 (Not Found) app.js?ver=4.1.1:3

Uncaught TypeError: undefined is not a function"

but I could not find the problem.

Header:

<code> <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> <nav> <h1 class="open"><a class='current' href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

</code>

Functions:

<code>

<?php 

function wpt_theme_styles() {

    wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundations.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_scrips', '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.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');

?>

</code>

App:

<code> jQuery(document).ready(function($) {

$(document).foundation();

$( ".nav-toggle" ).click(function() {
  $(this).toggleClass("open");
  $("nav").fadeToggle(100);

  return false;
});

});

</code>

Thank you in advance.

2 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi,

It looks to be this line causing the issue:

add_action( 'wp_enqueue_scrips', 'wpt_theme_styles' );

You look to be missing a t from scripts.

One other thing I've noticed is that you're using the same handle for two of the enqueued styles:

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

I think Zac corrects this in a later video if you'd prefer to wait but you could try changing one to something else, e.g. googlefont_css.

-Rich

Madalin Milea
Madalin Milea
12,469 Points
Madalin Milea
Madalin Milea
12,469 Points

Hi Rich,

That was the problem. I read the code for 3-4 times and haven't seen it.

Thank you.

Rich Bagley
Rich Bagley
25,869 Points

No problem, happens to all of us :)

-Rich