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 Building Page Templates in WordPress Creating Custom Page Templates in WordPress

S Ananda
S Ananda
9,474 Points
Posted by S Ananda
S Ananda
9,474 Points

Adding sidebar page getting error codes on inspect.

I've been over my code carefully, but there must be an error somewhere. I did an inspect and here are the errors I got, all related to foundation it seems.

  1. JQMIGRATE: Migrate is installed, version 1.4.1, foundation.js

  2. Failed to load resource: the server responded with a status of 404 (Not Found) - app.js:3

  3. Uncaught TypeError: $(...).foundation is not a function

      a) at HTMLDocument.<anonymous> (app.js:3)

  b) at i (jquery.js:2)

  c) at Object.fireWith [as resolveWith] (jquery.js:2)

  d) at Function.ready (jquery.js:2)

  e) at HTMLDocument.K (jquery.js:2)

and here is my code.

<?php
/*
  Template Name: Left Sidebar
*/
?>

<?php get_header(); ?>


<section class="two-column row no-max pad">
    <div class="small-12 columns">
      <div class="row">
        <!-- Primary Column -->
        <div class="small-12 medium-7 medium-offset-1 medium-push-4 columns">
          <div class="primary">

              <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p> 

              <?php endwhile; else : ?>

                <p><?php _e( 'Sorry, no pages found.' ); ?></p>

              <?php endif; ?>  

          </div>
        </div>
      </div>

    <!-- Secondary Column -->
    <div class="small-12 medium-4 medium-pull-8 columns">
        <div class="secondary">
          <h2 class="module-heading">Sidebar </h2>
        </div>
      </div>
    </div>
</div>
</section>




<?php get_footer(); ?>

What's not working? Or where should I look? I've read foundation has been a problem for some people, could that be it. If so what should I do to fix it?

4 Answers

S Ananda
S Ananda
9,474 Points
S Ananda
S Ananda
9,474 Points

Well adding the min into the foundation enqueue got rid of all my error codes. Now all I have to figure out is why it doesn't look right. It didn't change to make two columns, argh. I'll go back and review the video and my code, after I've fueled myself with some lunch... Good thing I like solving problems.

Jacob Mishkin
Jacob Mishkin
23,117 Points

Glad I could help. I don't use foundation, so I have no idea about the framework, but if you have any questions please fee to ask.

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

This error is a good starting point: Failed to load resource: the server responded with a status of 404 (Not Found) - app.js:3 what it is saying is that the file is not being enqueued properly. I would review your functions.php file and make sure all the scripts are being enqueued.

Uncaught TypeError: $(...).foundation is not a function this means that the foundation is also not being used as well.

if you need more help, please add the enqueued section of functions.php and we'll take a look.

S Ananda
S Ananda
9,474 Points
S Ananda
S Ananda
9,474 Points

I've tried to put my functions.php file in here, but it keeps cutting off the lines, no matter how I put it in. It shows the entire code when I paste it in, but when I save it the last half of most of the lines is getting cut off. Any suggestions on how I can get the whole code to show? I've tried the three ticks method and just plain pasting it, both failed miserably.

Jacob Mishkin
Jacob Mishkin
23,117 Points

I saw it and we don't need the entire functions.php file just the enqueueing of styles and scripts. I saw it and as long as the paths are correct it looks fine. Are theses errors on every page of the site right, or just the sidebar? your not using a build tool like gulp or grunt right? Just going through the tutorial here.

S Ananda
S Ananda
9,474 Points
S Ananda
S Ananda
9,474 Points

All I had in my functions.php file were the enqueue directions and when I saved the file it only showed me half of the line as being visible. I'd open the edit and it would all be there, save again and it would have done the same thing. Anyway, I am going through the tutorial. I'm wondering if it has anything to do with the fact that the foundation.js file in my theme folder is the min file, which is not showing in the enqueueing. It is written as just foundation.js. It is only happening with the sidebar page. Everything was working up to that tutorial.

Jacob Mishkin
Jacob Mishkin
23,117 Points

That could very well be it. If you are adding scripts for every site then the error should show up on every page. Try using the .min file and see what happens.