Load WordPress posts on the homepage via ajax
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I want to mimic the button at http://www.newser.com/
See they have this button at the bottom of their page called MORE STORIES. When you press it, some more posts load. (without refresh)

So on this test site at http://kraftier.com/ I want the button at the bottom to behave the same way. e.g. to load the next batch of WordPress posts.

Please download the WordPress theme zip file here:
http://www.kraftier.com/resources/versions/

You can edit any part of this theme to make this work.

awarded to ocanal

Crowdsource coding tasks.

1 Solution


This is my pure JS/jQuery solution, I have to say that yes this is working like a charm but not a stable version because your elements has no class or ID for identifying , If you add some IDs or classes to used elements, I can change the code to make it more stable.

  jQuery("body").on("click", "#buttonshowmore", function() {
      var $self = jQuery(this);
      jQuery(this).prop("disabled", true);
      var d = $self.data("page");
      var p;
      if (!d) {
        var bodyPage = jQuery("body").attr("class").match(/paged-(\d+)/);
        if (bodyPage && bodyPage.length > 1)
          p = bodyPage[1];
        else 
          p = 1;
      } else {
        p = d;
      }
      p = parseInt(p) + 1;

      jQuery.get("/", {paged: p}, function(d) {
        var divs = [];
        jQuery("div", d).each(function(i) {
          $self.parent().before(jQuery(this).hide());
          divs.push(this);
          if (i == 5) return false;
        });
        jQuery(divs).fadeIn("slow");
        $self
          .prop("disabled", false)
          .data("page", p);
      });
  });

EDIT:

OK, I'm not familiar with wordpress and not available to install it. But I've updated the code of theme that you sent.

I've updated two files,

functions.js

index.php

And here is the whole files in rar archive. If you upload this I will check weather it's working and requires any changes.

thanks man. Unfortunately i know absolutely nothing about jquery and dont even know how to insert the above code. Can you modify the theme in the zip file and put your code in. You can change any IDs or Classes or anything in that theme. I'll give you a tip :)
tonloc over 7 years ago
alright thanks i put it online http://kraftier.com/ but the buttons doesnt seem active yet
tonloc over 7 years ago
http://www.kraftier.com/resources/versions/ zip file updated to make wp code easier
tonloc over 7 years ago
It's not working because jQuery is loading after functions.js, I can take the javascript into the index.php, but isn't that weird? jQuery is expected to be load before function.js, becasuse If I don't see wrong, it's before than functions.js in header.php.
ocanal over 7 years ago
OK, just change index.php, here. You can remove the same code form functions.js.
ocanal over 7 years ago
View Timeline