title: How To Get Masonry and ImagesLoaded To Work With Wordpress
body: <p>Some 4 hours after the 20 minutes I expected it would take to set up masonry with some new wordpress themes I've decided I'd better ask for help.</p>
  
  <p>I have masonry working fine with imagesloaded in my html mockup sites, here is the stripped down html code.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;script src="imagesloaded.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;script src="masonry.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="masonry-container js-masonry"  data-masonry-options='{ "isFitWidth": true }'&gt;
  
      &lt;div class="block-wrapper"&gt;content&lt;/div&gt;
  
      &lt;div class="block-wrapper"&gt;content&lt;/div&gt;
  
      &lt;div class="block-wrapper"&gt;content&lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- end masonry-container js-masonry --&gt;
  
  &lt;script&gt;
  var container = document.querySelector('.masonry-container');
  var msnry;
  // initialize Masonry after all images have loaded
  imagesLoaded( container, function() {
      msnry = new Masonry( container );
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>The Question: </p>
  
  <h2>How Do I Get That To Work With Wordpress?</h2>
  
  <hr>
  
  <p><strong>What I've Tried So Far</strong></p>
  
  <p>Just about everything I could come up with on the googs. (I counted more than 40 tabs open trying to find an answer) Here's the simple variation I started with..</p>
  
  <p>in functions.php (functions has absolutely nothing else in it)</p>
  
  <pre><code>function enqueue_masonry() {
      wp_enqueue_script('masonry');
  }
  add_action('wp_enqueue_scripts','enqueue_masonry');
  </code></pre>
  
  <p>in footer.php (imagesloaded)</p>
  
  <pre><code>&lt;script&gt;
  var container = document.querySelector('.masonry-container');
  var msnry;
  // initialize Masonry after all images have loaded
  imagesLoaded( container, function() {
  msnry = new Masonry( container );
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>in index.php (also tried initializing from functions.php instead of in html)</p>
  
  <pre><code>&lt;div class="masonry-container js-masonry"  data-masonry-options='{ "isFitWidth": true }'&gt;
  </code></pre>
  
  <p>in header.php</p>
  
  <pre><code>&lt;?php wp_head(); ?&gt; 
  &lt;/head&gt;
  </code></pre>
  
  <p><strong>Notes</strong></p>
  
  <ul>
  <li>all plugins disabled</li>
  <li>its a custom, parent theme</li>
  <li>functions is currently empty save for what's written above</li>
  <li>wordpress version 4.2.2, masonry confirmed in js folder</li>
  <li>i've read ImagesLoaded is built into wordpress's masonry</li>
  </ul>
  
  <p><strong>My Guess</strong></p>
  
  <p>It's something obvious</p>