title: Load More Posts Ajax Button in WordPress
body: <p>I've had a look through the old questions and tried many of the different methods that there seems to be to do this. The closest I've got to working is this one here: <a href="https://stackoverflow.com/questions/29595391/how-to-implement-pagination-on-a-custom-wp-query-ajax">How to implement pagination on a custom WP_Query Ajax</a></p>
  <p>I've tried everything and it just doesn't work. Absolutely nothing changes on the page. If you inspect the Load More Button and click it, the jQuery is making the Load More Button action as it changes from <code>&lt;a id=&quot;more_posts&quot;&gt;Load More&lt;/a&gt;</code> to <code>&lt;a id=&quot;more_posts&quot; disables=&quot;disabled&quot;&gt;Load More&lt;/a&gt;</code> which even that doesn6't seem right to me anyway. It's not adding the posts, I think I'm missing something simple but for the life of me I can't work it out.</p>
  <p>The code in my template file is:</p>
  <pre class="lang-php prettyprint-override"><code>&lt;div id=&quot;ajax-posts&quot; class=&quot;row&quot;&gt;
      &lt;?php 
      $postsPerPage = 3;
      $args = [
          'post_type' =&gt; 'post',
          'posts_per_page' =&gt; $postsPerPage,
          'cat' =&gt; 1
      ];
  
      $loop = new WP_Query($args);
  
      while ($loop-&gt;have_posts()) : $loop-&gt;the_post(); ?&gt;
          &lt;div class=&quot;small-12 large-4 columns&quot;&gt;
              &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;
              &lt;p&gt;&lt;?php the_content(); ?&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;?php
      endwhile; 
  
      echo '&lt;a id=&quot;more_posts&quot;&gt;Load More&lt;/a&gt;';
      
      wp_reset_postdata(); 
      ?&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The code in my functions file is:</p>
  <pre class="lang-php prettyprint-override"><code>function more_post_ajax(){
      $offset = $_POST[&quot;offset&quot;];
      $ppp = $_POST[&quot;ppp&quot;];
  
      header(&quot;Content-Type: text/html&quot;);
      $args = [
          'suppress_filters' =&gt; true,
          'post_type' =&gt; 'post',
          'posts_per_page' =&gt; $ppp,
          'cat' =&gt; 1,
          'offset' =&gt; $offset,
      ];
  
      $loop = new WP_Query($args);
  
      while ($loop-&gt;have_posts()) { $loop-&gt;the_post(); 
          the_content();
      }
      exit; 
  }
  
  add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); 
  add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
  </code></pre>
  <p>And my jQuery in the footer is:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      jQuery(document).ready( function($) {
          var ajaxUrl = &quot;&lt;?php echo admin_url('admin-ajax.php')?&gt;&quot;;
          
          // What page we are on.
          var page = 5; 
          // Post per page
          var ppp = 3; 
  
          $(&quot;#more_posts&quot;).on(&quot;click&quot;, function() {
              // When btn is pressed.
              $(&quot;#more_posts&quot;).attr(&quot;disabled&quot;,true);
  
              // Disable the button, temp.
              $.post(ajaxUrl, {
                  action: &quot;more_post_ajax&quot;,
                  offset: (page * ppp) + 1,
                  ppp: ppp
              })
              .success(function(posts) {
                  page++;
                  $(&quot;#ajax-posts&quot;).append(posts);
                  // CHANGE THIS!
                  $(&quot;#more_posts&quot;).attr(&quot;disabled&quot;, false);
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  <p>Can anybody see something I'm missing or able to help?</p>