title: Implementing Isotope filters (basic)
body: <p>I'm trying to implement Isotope's filtering on a news section of a WordPress installation.  I'm new to JavaScript / jQuery and am trying to learn on the go.  I started by using the code provided in the <a href="http://isotope.metafizzy.co/docs/filtering.html" rel="nofollow noreferrer" title="http://isotope.metafizzy.co/docs/filtering.html">Filters section of the Isotope website</a>.</p>
  
  <p>Having had no luck, I started Googling.  On Stack Overflow I found <a href="https://stackoverflow.com/questions/17572577/implementing-isotop-filtering-portfolio-with-wordpress" title="https://stackoverflow.com/questions/17572577/implementing-isotop-filtering-portfolio-with-wordpress">Implementing isotop filtering portfolio with wordpress</a> which looked promising but had no responses.  Then I found <a href="https://stackoverflow.com/questions/15592745/implementing-jquery-isotope" title="https://stackoverflow.com/questions/15592745/implementing-jquery-isotope">Implementing jQuery isotope</a>.  I thought, wow, alright same exact question.  Answered.  Great.  </p>
  
  <p>...but my excitement soon turned to even more frustration.  I am still sitting here after hours of tinkering without having anything to show for it.</p>
  
  <p>My simple question is, <strong>what am I doing wrong / missing / not understanding</strong>?</p>
  
  <p>Thanks in advance for your help, forgetfuljames</p>
  
  <h2><strong>HTML OUTPUT</strong></h2>
  
  <pre><code>&lt;div id="grid_page"&gt;
  &lt;ul id="isotope_filters"&gt;
      &lt;li&gt;&lt;a data-filter="*" href="#"&gt;show all&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-filter="event-planning" href="#"&gt;event planning&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-filter="marketing" href="#"&gt;marketing&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-filter="site-survey" href="#"&gt;site survey&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="isotope_container"&gt;
      &lt;li class="isotope_selector event-planning marketing"&gt;
          &lt;a href="./link-1/"&gt;&lt;/a&gt;
          &lt;div class="caption"&gt;
              ...
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="isotope_selector site-survey"&gt;
          &lt;a href="./link-2/"&gt;&lt;/a&gt;
          &lt;div class="caption"&gt;
              ...
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="isotope_selector event-planning marketing"&gt;
          &lt;a href="./link-3/"&gt;&lt;/a&gt;
          &lt;div class="caption"&gt;
              ...
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="isotope_selector marketing"&gt;
          &lt;a href="./link-4/"&gt;&lt;/a&gt;
          &lt;div class="caption"&gt;
              ...
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2><strong>JavaScript</strong></h2>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(window).load(function()
  
      // cache container
      var $container = $('#isotope_container');
  
      // initialize isotope
      $container.isotope({
      // options...
      animationEngine: 'best-available',
      itemSelector: '.isotope_selector'
      });
  
      // filter items when filter link is clicked
      $('#isotope_filters li a').on('click', function() {
      var selector = $(this).data('filter');
      $container.isotope({
      filter: selector
      });
  
  });
  &lt;/script&gt;
  </code></pre>