PHP & WordPress - Why does my code break when I use the add_action(), wp_head(), and wp_footer() functions and how do I fix it?

Question

These functions are located within my header.php and functions.php files. I am including my header.php, index.php, footer.php, and functions.php files. I believe to have zoned in on the error and it has to do with the second add_action in functions.php, along with the wp_head() and wp_footer() functions. Basically, the error(page doesn't load) does not happen when I remove either the second add action or the entire pt_theme_js function block within functions.php.

How do I fix this error and why is it occurring??

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>
  </head>

  <?php wp_head(); ?>

  <body>
    <header class="row no-max pad main">
  <h1><a class='current' href="index.html">G</a></h1>
  <a href="" class="nav-toggle"><span></span>Menu</a>
  <nav>
    <h1 class="open"><a class='current' href="index.html">G</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>

Index.php

<?php get_header(); ?>
<?php get_footer(); ?>

Footer.php

<div class="footer-clear"></div>
<footer class="row no-max pad">
  <ul class="social-links no-bullet">
    <li><a href="" class="icon icon-twitter"></a></li>
    <li><a href="" class="icon icon-facebook"></a></li>
    <li><a href="" class="icon icon-vimeo"></a></li>
    <li><a href="" class="icon icon-youtube"></a></li>
    <li><a href="" class="icon icon-linkedin"></a></li>
    <li><a href="" class="icon icon-github"></a></li>
    <li><a href="" class="icon icon-flickr"></a></li>
    <li><a href="" class="icon icon-google"></a></li>
    <li><a href="" class="icon icon-email"></a></li>
  </ul>            
  <p>Copyright <?php echo date('Y'); ?></p>
</footer>

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

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('main_css', get_template_directory_uri() . '/style.css');
}

add_action('wp_enqueue_scripts', 'wpt_theme_styles');

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

add_action('wp_enqueue_scripts', 'wpt_theme_js');

?>

I don't know if this will solve all the issues, but the <?php wp_head(); ?> should be the last item inside your <head> tags. So right before </head> you should call your wp_head() function. — Joe

Michael Mazique Michael Mazique · Accepted Answer · 2015-06-19T22:50:43

SOLVED.

I solved it by using this walkthrough: http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/

What I did was change the wp_enqueue_scripts dealing with JS files and first used wp_register_script before wp_enqueue_script. @rubenrp81 mentioned something like changing wp_enqueue_scripts to wp_enqueue_script, and the answer lies within the link I shared above.

Here is my resulting functions.js file:

<?php

function basic_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('main_css', get_template_directory_uri() . '/style.css');
}

add_action('wp_enqueue_scripts', 'basic_theme_styles');


function basic_theme_js() {
    wp_register_script('modernizr_js', get_template_directory_uri() . '/js/modernizr.js', array('jquery'), '', false);
    wp_enqueue_script('modernizr_js');

    wp_register_script('foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '1.1', true);
    wp_enqueue_script('foundation_js');

    wp_register_script('main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true);
    wp_enqueue_script('main_js');
}

add_action('wp_enqueue_scripts', 'basic_theme_js');
?>

PHP & WordPress - Why does my code break when I use the add_action(), wp_head(), and wp_footer() functions and how do I fix it?

3 Answers