First, you have to find where the <div class="entry-content">
is. this is in your wp-content/themes/[themename]
folder, in a file called index.php or loop.php. after the closing </div>
of the entry-content, 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 config (Wordpress Admin -> Settings -> Infinite scroll), add this to the "Javascript to be called after the next posts are fetched" box:
$(window).unbind('.infscr');
setTimeout("$('div.moreposts').slideDown();", 1000);
Finally style the button to make it look pretty (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;
}
Note that this will do the first post load automatic, and the subsequent ones manual. This is necessary for the script to hide the Before/Next buttons automatically.
$("#body").infinitescroll is not a function
. Weird though, since the infinitescroll script looks like its being loaded. This would be a good place to start. – Andrew Whitaker