title: load more posts in Wordpress with Ajax
body: <p>this is my loop of posts:</p>
  
  <pre><code>&lt;?php query_posts($query_string . '&amp;showposts=8'); ?&gt;
  &lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
  
          &lt;div class="large-4 columns"&gt;
          &lt;section class="post-home"&gt;
            &lt;section class="the_category"&gt;
            &lt;?php
              $categories = get_the_category();
              $separator = ' ';
              $output = '';
              if($categories){
                      foreach($categories as $category) {
                         $output .= '&lt;span class="'.$category-&gt;cat_name.'"&gt;&lt;a href="'.get_category_link( $category-&gt;term_id ).'" title="' . esc_attr( sprintf( __( "Veja todos os posts em %s" ), $category-&gt;name ) ) . '"&gt;'.$category-&gt;cat_name.'&lt;/a&gt;&lt;/span&gt;'.$separator;
                      }
              echo trim($output, $separator);
              }
  ?&gt;
            &lt;/section&gt;
  
            &lt;?php $url = wp_get_attachment_url( get_post_thumbnail_id($post-&gt;ID) ); ?&gt;
            &lt;a href="&lt;?php the_permalink() ?&gt;" rel="bookmark" title="&lt;?php the_title(); ?&gt; | &lt;?php bloginfo('name') ?&gt; | &lt;?php bloginfo('description') ?&gt;"&gt;&lt;figure class="thumb-post" style="background: url('&lt;?php echo $url; ?&gt;') center center no-repeat;" &gt;&lt;/figure&gt;&lt;/a&gt;
  
            &lt;section class="post-home-content"&gt;
              &lt;h2&gt;&lt;a href="&lt;?php the_permalink() ?&gt;" rel="bookmark" title="&lt;?php the_title(); ?&gt; | &lt;?php bloginfo('name') ?&gt; | &lt;?php bloginfo('description') ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
              &lt;p&gt;&lt;?php the_field('sub_titulo'); ?&gt;&lt;/p&gt;
  
              &lt;span class="link"&gt;Compartilhe&lt;/span&gt;
  
              &lt;time class="post-time" datetime="&lt;?php the_time('d-m-Y'); ?&gt; &lt;?php the_time('G:i'); ?&gt;"&gt;&lt;?php the_time('d/m/Y'); ?&gt;&lt;/time&gt;
            &lt;/section&gt;
  
            &lt;ul class="social"&gt;
              &lt;li&gt;&lt;a href="http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&lt;?php the_permalink() ?&gt;" title="Compartilhar &lt;?php the_title(); ?&gt; no LinkedIn" target="_blank"&gt;&lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/img/in.png" alt="" width="24" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="https://plus.google.com/share?url=&lt;?php the_permalink() ?&gt;" title="Compartilhar &lt;?php the_title(); ?&gt; no Google Plus" target="_blank"&gt;&lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/img/gp.png" alt="" width="24" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.facebook.com/sharer.php?u=&lt;?php the_permalink() ?&gt;" title="Compartilhar &lt;?php the_title(); ?&gt; no Facebook" target="_blank"&gt;&lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/img/fb.png" alt="" width="24" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://twitter.com/share?url=&lt;?php the_permalink() ?&gt;&amp;amp;text=&lt;?php the_title(); ?&gt;&amp;amp;via=chocoladesign" title="Compartilhar &lt;?php the_title(); ?&gt; no Twitter" target="_blank"&gt;&lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/img/tw.png" alt="" width="24" /&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/section&gt;
        &lt;/div&gt;
        &lt;?php endwhile; else: ?&gt;
                  &lt;p&gt;&lt;?php _e("Nenhum chocolate encontrado! :(", ''); ?&gt;&lt;/p&gt;
                  &lt;?php endif; ?&gt;
  </code></pre>
  
  <p>at below, i have this:</p>
  
  <pre><code>&lt;div id="load-posts"&gt;
    &lt;a href="#" class="button"&gt;Load more posts&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my question is: how i can load 6 more posts with ajax just clicking at the link "load more posts".</p>
  
  <p>i've tried a lot of plugins, but, unsuccessful. :/</p>
  
  <p>i want to do just like that: <a href="http://designerthemes.com/preview/?theme=adapt" rel="nofollow">http://designerthemes.com/preview/?theme=adapt</a></p>