Wordpress plugin "endless scroll" (jQuery) hack help

Question

I am trying to make my Wordpress blog (remote) work with the "Endless Scrolling" plugin so that you need to click "more posts" to load more, rather than scrolling it to the bottom of the page (which is the default plugin).

There are instructions and a demo on how to do this here: http://www.infinite-scroll.com/

Scroll down to "Custom trigger, non-automatic. Twitter-style."

I just don’t understand how to make it work with my theme (twenty ten). I probably don't have the right selectors.

Can someone give me a brief description of what I need to do to remove this?

Answer 1

You must first find where the <div class="entry-content"> . this is in your wp-content/themes/[themename] in the index.php or loop.php file. after closing </div> contents of the entry, add:

 <div class="moreposts" style="display:none" onclick="$('div.moreposts').slideUp();$(document).trigger('retrieve.infscr');"> Show more </div> <script> $(document).ajaxError(function(e,xhr,opt){ if (xhr.status == 404) $('div.moreposts').slideUp("normal", function() { $(this).remove(); } ); }); </script> 

Now, in the infinite scroll configuration (Wordpress Admin -> Settings -> Infinite scroll), add this to the "Javascript to call after the following message" field:

 $(window).unbind('.infscr'); setTimeout("$('div.moreposts').slideDown();", 1000); 

Finally, create a button to make it look beautiful (add to style.css):

 .moreposts { display:block; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border: 1px solid #ddd; background: #efefef; text-align: center; font-weight: bold; box-shadow: 2px 2px 2px rgba(50,50,50,0.4); color: #444; text-decoration: none; padding: 5px; margin-bottom: 20px; cursor: pointer; } .moreposts:hover { background: #dfdfdf; color: #222; } 

Please note that this will be the first automatic message download and subsequent instructions. It is necessary for the script to automatically hide the Forward / Next buttons.

Answer 2

Since you are using Wordpress, you must install the Jetpack plugin and activate the Infinite-scroll option. There are configuration examples for the Twenty Ten, Eleven, and Twelve themes. I think it will be easier for you than trying to integrate endless scrolling.