Puzzling Responsive Menu Toggle

Homepage Responsive Menu doesn’t toggle (please re-size browser into smaller width)

[ source ] + [ google groups post ]

Every other page (minus homepage), Responsive Menu toggle works. Any idea why? Hmm…

Thanks for your attention

I don’t see the Bootstrap javascript included on the site.

Did you remove the enqueue of plugins.js from your /lib/scripts.php file?

@chriscarr – Thanks for your attention brothaman.

This is my plugins.js file located in /lib/scripts.php – I don’t recall ever opening this file up.

How does the file look? Is everything intact?

<?php
/**
 * Enqueue scripts and stylesheets
 *
 * Enqueue stylesheets in the following order:
 * 1. /theme/assets/css/bootstrap.css
 * 2. /theme/assets/css/bootstrap-responsive.css
 * 3. /theme/assets/css/app.css
 *
 * Enqueue scripts in the following order:
 * 1. jquery-1.10.1.min.js via Google CDN
 * 2. /theme/assets/js/vendor/modernizr-2.6.2.min.js
 * 3. /theme/assets/js/plugins.js (in footer)
 * 4. /theme/assets/js/main.js    (in footer)
 */
function roots_scripts() {
  wp_enqueue_style('roots_bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css', false, null);
  wp_enqueue_style('roots_bootstrap_responsive', get_template_directory_uri() . '/assets/css/bootstrap-responsive.css', array('roots_bootstrap'), null);
  wp_enqueue_style('roots_app', get_template_directory_uri() . '/assets/css/app.css', false, null);

  // jQuery is loaded using the same method from HTML5 Boilerplate:
  // Grab Google CDN's latest jQuery with a protocol relative URL; fallback to local if offline
  // It's kept in the header instead of footer to avoid conflicts with plugins.
  if (!is_admin() && current_theme_supports('jquery-cdn')) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, false);
    add_filter('script_loader_src', 'roots_jquery_local_fallback', 10, 2);
  }

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }

  wp_register_script('modernizr', get_template_directory_uri() . '/assets/js/vendor/modernizr-2.6.2.min.js', false, null, false);
  wp_register_script('roots_plugins', get_template_directory_uri() . '/assets/js/plugins.js', false, null, true);
  wp_register_script('roots_main', get_template_directory_uri() . '/assets/js/main.js', false, null, true);
  wp_enqueue_script('jquery');
  wp_enqueue_script('modernizr');
  wp_enqueue_script('roots_plugins');
  wp_enqueue_script('roots_main');
}
add_action('wp_enqueue_scripts', 'roots_scripts', 100);

// http://wordpress.stackexchange.com/a/12450
function roots_jquery_local_fallback($src, $handle) {
  static $add_jquery_fallback = false;

  if ($add_jquery_fallback) {
    echo '<script>window.jQuery || document.write(\'<script src="' . get_template_directory_uri() . '/assets/js/vendor/jquery-1.10.1.min.js"><\/script>\')</script>' . "\n";
    $add_jquery_fallback = false;
  }

  if ($handle === 'jquery') {
    $add_jquery_fallback = true;
  }

  return $src;
}

function roots_google_analytics() { ?>
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','<?php echo GOOGLE_ANALYTICS_ID; ?>');ga('send','pageview');
</script>

<?php }
if (GOOGLE_ANALYTICS_ID) {
  add_action('wp_footer', 'roots_google_analytics', 20);
}

I just downloaded a fresh copy of Roots Theme and “copy / pasted” the entire scripts.php into my /lib/scripts.php and it blew out the entire site. Hmm…

Also, just checked Firebug console and I do not see any errors. Darn!

p.s. I’m thinking it blew out, b/c the most recent version of scripts.php was designed for Roots Theme 3.0 TB. I believe the current Roots Theme I have for this source website, was the previous Git before Ben Word published new Roots Theme.

Do you think I just create a new base-front-page.php? Perhaps I should learn to restructure my code a more proper way too.

Root Filezilla Directory

Screenshot - root

Template Filezilla Directory

Screenshot - /templates

Here is my current base-front-page.php

<?php get_template_part('templates/head'); ?>
<body <?php body_class(); ?>>

  <!--[if lt IE 7]><div class="alert"><?php _e('You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.', 'roots'); ?></div><![endif]-->

  <div class="wrap container" role="document">
    <div class="content row">

      <aside class="heroic sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
        <?php include roots_sidebar_path(); ?>
      </aside><!-- /.sidebar -->
  
    </div><!-- /.content -->

  </div><!-- /.wrap -->

<div id="slides">
	<div class="slides-container">
		<img src="/media/slider-one.jpg" alt="seo hash num 1" title="seo 1">
		<img src="/media/slider-two.jpg" width="1024" height="682" alt="seo 2">
		<img src="/media/slider-three.jpg" width="1024" height="683" alt="seo 3">
		<img src="/media/slider-four.jpg" width="1024" height="683" alt="seo 4">
		<img src="/media/slider-five.jpg" width="1024" height="683" alt="seo 5">
	</div>
</div>

<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/jquery.animate-enhanced.min.js"></script>
<script src="/assets/js/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>

  <script>
    $(function() {
      $('#slides').superslides({
        hashchange: false,
        play: 5000,
		animation: 'fade'
      });
    });
  </script>

 
</body>
</html>

Here is my current front-page.php

 <?php 
  /*  REMOVE HEADER FROM PAGE
  <?php get_template_part('templates/page', 'header'); ?>
  */ 
 ?> 

 
<?php get_template_part('templates/front-page', 'header'); ?>
<?php get_template_part('templates/content', 'front-page'); ?>

The main.js and plugins.js files that are enqueued in that file are not being added to the site when loaded. I would start by disabling all your plugins and then reload the home page, view source and search for plugins.js.

If it shows up with all plugins disabled, then it is a conflict with one of your plugins. enable each plugin individually until the script is removed again.

1 Like

You can use Github to look through the history of scripts.php to find the version you originally downloaded. You should also think about employing version control.

The reason the front page was not working was because you deleted the call to templates/footer.php in your base-front-page.php. The footer template contains an important action that is hooked into to load scripts. Add the following before </body> and it should start working again:

<?php wp_footer(); ?>
1 Like

Hoorah!

@chriscarr - Excellent suggestion. I started chiseling away at your idea and disable plugins, great suggestion. I will remember that advice for future projects.

@Foxaii – Mwhuah hauhauah. I will learn more about version control today by surfing the web, thank you very much for the idea suggestion.

Hoorah!

I added the above code chunk before my closing body tag and plugins.js loaded!

BRB - going to research more about theme-wrapper, I believe that is the missing link to my ignorance.

OOoo Shnaps!

Thanks. Thanks a bunch. Thank you very much.

salute

Good team work, hoorah!