Load More Posts Ajax Button in WordPress

Question

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  How to implement pagination on a custom WP Query Ajax   I ve tried everything and it just doesnt 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  lt a id  more posts  gt Load More lt  a gt  to  lt a id  more posts  disables  disabled  gt Load More lt  a gt  which even that doesnt 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   The Code in My template file is     lt div id  ajax-posts  class  row  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  small-12 large-4 columns  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  more posts  gt Load More lt  a gt         wp reset postdata           gt   lt  div gt    The Code in my functions file is   function more post ajax         offset     POST  offset         ppp     POST  ppp         header  Content-Type  text html         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      And My JQuery in the footer is    lt script src  https   ajax googleapis com ajax libs jquery 2 1 4 jquery min js  gt  lt  script gt   lt script type  text javascript  gt      jQuery document  ready  function              var ajaxUrl     lt  php echo admin url  admin-ajax php    gt                What page we are on          var page   5              Post per page         var ppp   3                more posts   on  click   function                    When btn is pressed                  more posts   attr  disabled  true                   Disable the button  temp                post ajaxUrl                    action   more post ajax                   offset   page   ppp    1                  ppp  ppp                             success function posts                    page                        ajax-posts   append posts                      CHANGE THIS                      more posts   attr  disabled   false                                        lt  script gt    Can anybody see something I m missing or able to help

User · Answer

If I m not using any category then how can I use this code  Actually  I want to use this code for custom post type

User · Answer

UPDATE 24 04 2016  I ve created tutorial on my page https   madebydenis com ajax-load-posts-on-wordpress  about implementing this on Twenty Sixteen theme  so feel free to check it out    EDIT I ve tested this on Twenty Fifteen and it s working  so it should be working for you  In index php  assuming that you want to show the posts on the main page  but this should work even if you put it in a page template  I put       lt div id  quot ajax-posts quot  class  quot row quot  gt           lt  php              postsPerPage   3               args   array                       post type    gt   post                        posts per page    gt   postsPerPage                       cat    gt  8                              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          wp reset postdata               gt       lt  div gt       lt div id  quot more posts quot  gt Load More lt  div gt   This will output 3 posts from category 8  I had posts in that category  so I used it  you can use whatever you want to   You can even query the category you re in with  cat id   get query var  cat     This will give you the category id to use in your query  You could put this in your loader  load more div   and pull with jQuery like  lt div id  quot more posts quot  data-category  quot  lt  php echo  cat id    gt  quot  gt  gt Load More lt  div gt   And pull the category with var cat       more posts   data  category     But for now  you can leave this out  Next in functions php I added wp localize script   twentyfifteen-script    ajax posts   array       ajaxurl    gt  admin url   admin-ajax php          noposts    gt      No older posts found    twentyfifteen         Right after the existing wp localize script  This will load WordPress own admin-ajax php so that we can use it when we call it in our ajax call  At the end of the functions php file I added the function that will load your posts  function more post ajax          ppp    isset   POST  quot ppp quot         POST  quot ppp quot     3       page    isset   POST  pageNumber         POST  pageNumber     0       header  quot Content-Type  text html quot          args   array           suppress filters    gt  true           post type    gt   post            posts per page    gt   ppp           cat    gt  8           paged       gt   page               loop   new WP Query  args         out            if   loop - gt  have posts       while   loop - gt  have posts       loop - gt  the post             out      lt div class  quot small-12 large-4 columns quot  gt                   lt h1 gt   get the title     lt  h1 gt                   lt p gt   get the content     lt  p gt            lt  div gt         endwhile      endif      wp reset postdata        die  out      add action  wp ajax nopriv more post ajax    more post ajax    add action  wp ajax more post ajax    more post ajax     Here I ve added paged key in the array  so that the loop can keep track on what page you are when you load your posts  If you ve added your category in the loader  you d add   cat    isset   POST  cat         POST  cat          And instead of 8  you d put  cat  This will be in the   POST array  and you ll be able to use it in ajax  Last part is the ajax itself  In functions js I put inside the   document  ready    enviroment var ppp   3     Post per page var cat   8  var pageNumber   1    function load posts        pageNumber        var str     amp cat     cat     amp pageNumber     pageNumber     amp ppp     ppp     amp action more post ajax         ajax           type   quot POST quot           dataType   quot html quot           url  ajax posts ajaxurl          data  str          success  function data               var  data     data               if  data length                      quot  ajax-posts quot   append  data                      quot  more posts quot   attr  quot disabled quot  false                 else                     quot  more posts quot   attr  quot disabled quot  true                                    error   function jqXHR  textStatus  errorThrown                 loader html jqXHR    quot      quot    textStatus    quot      quot    errorThrown                          return false        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      load posts         Saved it  tested it  and it works    Images as proof  don t mind the shoddy styling  it was done quickly   Also post content is gibberish xD    UPDATE For  infinite load  instead on click event on the button  just make it invisible  with visibility  hidden   you can try with   window  on  scroll   function          if    window  scrollTop       window  height     gt     document  height   - 100            load posts               This should run the load posts   function when you re 100px from the bottom of the page  In the case of the tutorial on my site you can add a check to see if the posts are loading  to prevent firing of the ajax twice   and you can fire it when the scroll reaches the top of the footer   window  on  scroll   function        if    body   scrollTop     window  height    gt     footer   offset   top           if    loader hasClass  post loading loader       loader hasClass  post no more posts                      load posts                         Now the only drawback in these cases is that you could never scroll to the value of   document  height   - 100 or    footer   offset   top for some reason  If that should happen  just increase the number where the scroll goes to  You can easily check it by putting console logs in your code and see in the inspector what they throw out   window  on  scroll   function          console log   window  scrollTop       window  height         console log   document  height   - 100       if    window  scrollTop       window  height     gt     document  height   - 100            load posts               And just adjust accordingly    Hope this helps    If you have any questions just ask

[javascript] Load More Posts Ajax Button in WordPress

Examples related to javascript

Examples related to php

Examples related to jquery

Examples related to ajax

Examples related to wordpress