Using the_posts_pagination for custom page template WordPress

How to fix and create pagination with custom page template and keep main query with loop on WordPress blog?

If you look my sitemap, you’ll see the list of my post with pagination. That page was created under custom page template, the custom WP_Query of post’s list build under main loop of page, and function the_posts_pagination to display pagination.

Here the sample PHP code that you can accomplish if you need create custom page template with pagination. Just add after your main query loop.

// Define page_id
$page_ID = get_the_ID();

// Define paginated posts
$page    = get_query_var( 'page' );

// Define custom query parameters
$args    = array(
	'post_type'      => array( 'post', 'book', 'movie' ), // post types
	'posts_per_page' => 5,
	'paged'          => ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1
);

// If is_front_page "paged" parameters as $page number
if ( is_front_page() )
	$args['paged'] = $page;

// Instantiate custom query
$custom_query = new WP_Query( $args );

// Custom loop
if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) :
        $custom_query->the_post();
		
		/**
		 * Displaying content
		 *
		 * the_title(), the_permalink(), the_content() etc
		 * Or see Twentysixteen theme page.php
		 * get_template_part( 'template-parts/content', 'page' );
		 *
		 */
    endwhile;
	
		/**
		 * Pagination parameters of the_posts_pagination() since: 4.1.0
		 *
		 * @see the_posts_pagination
		 * https://codex.wordpress.org/Function_Reference/the_posts_pagination
		 * 
		 */
		$pagination_args = array(
			'prev_text'          => __( 'Previous page', 'theme-domain' ),
			'next_text'          => __( 'Next page', 'theme-domain' ),
			'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'theme-domain' ) . ' </span>'
		);
		
		/**
		 * Fix pagination link base
		 *
		 * If in paginated posts w/o multiple loop
		 *
		 */
		
		if ( ! is_front_page() && 0 < intval( $page ) )
			$pagination_args['base'] = user_trailingslashit(
				untrailingslashit( get_page_link( $page_ID ) ) . '/page/%#%'
			);
		/**
		 * Fix Pagination with $GLOBALS['wp_query'] = {custom_query}
		 *
		 * @see get_the_posts_pagination use $GLOBALS['wp_query']
		 * https://developer.wordpress.org/reference/functions/get_the_posts_pagination/#source-code
		 * 
		 */
		$GLOBALS['wp_query'] = $custom_query;
		the_posts_pagination( $pagination_args );
else :
	/**
	 * Empty Post
	 *
	 * Run your stuff here if posts empty
	 * Or see Twentysixteen theme page.php
	 * get_template_part( 'template-parts/content', 'none' );
	 */
endif;
wp_reset_query(); // Restore the $wp_query and global post data to the original main query.

We using get_page_link on paging arguments code instead of get_pagenum_link function, it just to making work with main loop if using post page ( wp_link_pages ~ <--nextpage--> ) for your content. I think there are better clean approach than this, but.. ah, let’s go ready to rumble.

UPDATE: April 08, 2016

  • Fix pagination if set in front page

Cara membuat pagination PHP

Cara membuat pagination yang benar harus mampu menentukan jumlah data yang ditampilkan dalam satu halaman.

Di Internet, paging atau pagination digunakan untuk menampilkan hal-hal atau sejumlah hasil pada halaman hasil mesin pencari, atau menampilkan sejumlah postingan. Pagination digunakan dalam beberapa bentuk di hampir setiap aplikasi web untuk membagi data dan menampilkannya dengan beberapa halaman. Ada banyak bentuk dan kegunaan yang berbeda dalam pagination seperti apakah harus menampilkan link “Previous” dan “Next”, dalam bentuk angka atau apakah harus terdapat link ke paging pertama dan terakhir di setiap halaman.

Cara membuat pagination yang benar harus mampu menentukan jumlah data yang ditampilkan dalam satu halaman. Berikut ini adalah contoh script pagination yang dibuat dengan kode PHP untuk menampilkan data Anda apakah diambil dari database sql, html, xml,json atau dalam format web lainnya.

<?php
$TotalFiles= 1000; //tentukan jumlah total file
$FilePerPage = 100; //tentukan jumlah file per halaman
$PagesTotal = ceil($TotalFiles / $FilePerPage);
if (isset($_GET&#91;'page'&#93;) && is_numeric($_GET&#91;'page'&#93;)) {
   $currentpage = (int) $_GET&#91;'page'&#93;;
} else {
   $currentpage = 1;
}
if ($currentpage > $PagesTotal) {
   $currentpage = $PagesTotal;
}
if ($currentpage < 1) {
   $currentpage = 1;
}
$offset = ($currentpage - 1) * $FilePerPage;
$range = 10;
if ($currentpage > 1) {
   echo"<a title='First' href='http://localhost/index.php?page=1'><<</a> ";
   $prevpage = $currentpage - 1;
   echo "<a title='Previous' href='http://localhost/index.php?page=$prevpage'><</a>";
}
for ($i = ($currentpage - $range); $i < (($currentpage + $range) + 1); $i++) {
   if (($i > 0) && ($i <= $PagesTotal)) {
      if ($i == $currentpage) {
         echo " &#91;<b>$i</b>] ";
      } else {
         echo " <a href='http://localhost/index.php?page=$i'>$i</a>";
      } 
   }
}
if ($currentpage != $PagesTotal) {
   $nextpage = $currentpage + 1;
   echo " <a title='Next' href='http://localhost/index.php?page=$nextpage'>></a>";
   echo "<a title='Last' href='http://localhost/index.php?page=$PagesTotal'>>></a>";
} 
?>

Ganti keterangan jumlah dan struktur url yang ditampilkan dalam kode pagination PHP di atas sesuai dengan data yang Anda miliki. Tampilan kode paging ini seperti gambar berikut:

Pagination PHP
Pagination PHP

Infinite Ajax Scroll di Blogspot

Cara pasang skrip infinite ajax scroll di Blogger/Blogspot agar halaman pagination blog Anda menjadi autoload.

Tutorial kali ini bagaimana cara memasang infinite ajax scroll di Blogspot yang membuat halaman pagination blog Anda menjadi autoload ketika di scroll ke bawah. Pada artikel sebelumnya, plugin jQuery infinite ajax scroll ini dapat diterapkan di blog WordPress dan dapat berjalan di beberapa browser dengan versi terbarunya.

Cara pasang skrip infinite ajax scroll di Blogger/Blogspot

1. Buka template editor blog Anda.
2. Centang Expand Template Widget dan sisipkan skrip di bawah ini secara berurutan dalam head template Anda, tepatnya sebelum kode <b:skin>:

File jQuery versi 1.6.1

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- File jQuery versi 1.6.1 -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Infinite Ajax Scroll Setting

<!-- Infinite Ajax Scroll Setting -->
<script type='text/javascript'>
//<!&#91;CDATA&#91;
jQuery('document').ready(function($) {
	setup_ajax_pagination();
});

function setup_ajax_pagination()
{
jQuery.ias({
 container 	: ".main-inner",
  item		: ".post-outer",
  pagination	: ".main-inner .blog-pager",
  next		: ".blog-pager a.blog-pager-older-link",
	history:false,
	loader: "<img src='http://url-gambar-loading.tld/loader.gif'/>", //sisipkan url gambar loading, download di sini www.ajaxload.info
});
}
//&#93;&#93;>
</script>

Untuk gambar loader, upload gambar melalui blog Anda, dan sisipkan urlnya pada kode Infinite Ajax Scroll Setting di atas. Ganti kode ini yang ini http://url-gambar-loading.tld/loader.gif dengan url gambar loader Anda.

Skrip jQuery Infinite Ajax Scroll

<!-- Skrip jQuery Infinite Ajax Scroll -->
<script type='text/javascript'>
//<!&#91;CDATA&#91;
(function(b){b.ias=function(d){var m=b.extend({},b.ias.defaults,d);var c=new b.ias.util();var j=new b.ias.paging(m.scrollContainer);var h=(m.history?new b.ias.history():false);var f=this;r();function r(){j.onChangePage(function(x,v,w){if(h){h.setPage(x,w)}m.onPageChange.call(this,x,w,v)});s();if(h&&h.havePage()){q();pageNum=h.getPage();c.forceScrollTop(function(){if(pageNum>1){l(pageNum);curTreshold=p(true);b("html,body").scrollTop(curTreshold)}else{s()}})}return f}function s(){n();m.scrollContainer.scroll(g)}function g(){if(m.scrollContainer==b.ias.defaults.scrollContainer){scrTop=m.scrollContainer.scrollTop()}else{scrTop=m.scrollContainer.offset().top}wndHeight=m.scrollContainer.height();curScrOffset=scrTop+wndHeight;if(curScrOffset>=p()){t(curScrOffset)}}function q(){m.scrollContainer.unbind("scroll",g)}function n(){b(m.pagination).hide()}function p(v){el=b(m.container).find(m.item).last();if(el.size()==0){return 0}treshold=el.offset().top+el.height();if(!v){treshold+=m.tresholdMargin}return treshold}function t(w,v){urlNextPage=b(m.next).attr("href");if(!urlNextPage){return q()}j.pushPages(w,urlNextPage);q();o();e(urlNextPage,function(y,x){result=m.onLoadItems.call(this,x);if(result!==false){b(x).hide();curLastItem=b(m.container).find(m.item).last();curLastItem.after(x);b(x).fadeIn()}b(m.pagination).replaceWith(b(m.pagination,y));k();s();m.onRenderComplete.call(this,x);if(v){v.call(this)}})}function e(w,x){var v=&#91;&#93;;b.get(w,null,function(y){container=b(m.container,y).eq(0);if(0==container.length){container=b(y).filter(m.container).eq(0)}if(container){container.find(m.item).each(function(){v.push(this)})}if(x){x.call(this,y,v)}},"html")}function l(v){curTreshold=p(true);if(curTreshold>0){t(curTreshold,function(){q();if((j.getCurPageNum(curTreshold)+1)<v){l(v);b("html,body").animate({scrollTop:curTreshold},400,"swing")}else{b("html,body").animate({scrollTop:curTreshold},1000,"swing");s()}})}}function u(){loader=b(".ias_loader");if(loader.size()==0){loader=b("<div class='ias_loader'>"+m.loader+"</div>");loader.hide()}return loader}function o(){loader=u();if(m.customLoaderProc!==false){m.customLoaderProc(loader)}else{el=b(m.container).find(m.item).last();el.after(loader);loader.fadeIn()}}function k(){loader=u();loader.remove()}};function a(c){if(window.console&&window.console.log){window.console.log(c)}}b.ias.defaults={container:"#container",scrollContainer:b(window),item:".item",pagination:"#pagination",next:".next",loader:'<img src="images/loader.gif"/>',tresholdMargin:0,history:true,onPageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){},customLoaderProc:false};b.ias.util=function(){var d=false;var f=false;var c=this;e();function e(){b(window).load(function(){d=true})}this.forceScrollTop=function(g){b("html,body").scrollTop(0);if(!f){if(!d){setTimeout(function(){c.forceScrollTop(g)},1)}else{g.call();f=true}}}};b.ias.paging=function(){var e=&#91;&#91;0,document.location.toString()&#93;&#93;;var h=function(){};var d=1;j();function j(){b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;curPageNum=c(curScrOffset);curPagebreak=f(curScrOffset);if(d!=curPageNum){h.call(this,curPageNum,curPagebreak&#91;0&#93;,curPagebreak&#91;1&#93;)}d=curPageNum}function c(k){for(i=(e.length-1);i>0;i--){if(k>e&#91;i&#93;&#91;0&#93;){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i>=0;i--){if(k>e&#91;i&#93;&#91;0&#93;){return e&#91;i&#93;}}return null}this.onChangePage=function(k){h=k};this.pushPages=function(k,l){e.push(&#91;k,l&#93;)}};b.ias.history=function(){var d=false;var c=false;e();function e(){c=!!(window.history&&history.pushState&&history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},"",f)};this.havePage=function(){return(this.getState()!=false)};this.getPage=function(){if(this.havePage()){stateObj=this.getState();return stateObj.page}return 1};this.getState=function(){if(c){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{haveState=(window.location.hash.substring(0,7)=="#/page/");if(haveState){pageNum=parseInt(window.location.hash.replace("#/page/",""));return{page:pageNum}}}return false};this.updateState=function(g,h,f){if(d){this.replaceState(g,h,f)}else{this.pushState(g,h,f)}};this.pushState=function(g,h,f){if(c){history.pushState({ias:g},h,f)}else{hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash}d=true};this.replaceState=function(g,h,f){if(c){history.replaceState({ias:g},h,f)}else{this.pushState(g,h,f)}}}})(jQuery);
//&#93;&#93;>
</script>
</b:if>

3. Save template Anda.

4. Memposisikan gambar loader.gif pada posisi tengah dengan memasang kode css berikut:
(Baca di sini bagaimana cara mudah menambahkan CSS di template Blogspot):

.ias_loader{
	text-align:center;
	margin: 5px 0;
}

5. Klik tombol di kanan atas, Terapkan ke Blog (Apply to Blog).Selesai dan lihat hasilnya.

Kode JavaScript Infinite Ajax Scroll di hostingan lain

Apabila Anda mempunyai website hosting atau tempat upload untuk file JavaScript Blogspot, kode JavaScript Infinite Ajax Scroll di atas dapat dipersingkat.

  1. Melalui notepad atau yang sejenisnya, simpan kode JavaScript Infinite Ajax Scroll Setting berikut dengan nama jquery.ias.setting.js.
    jQuery('document').ready(function($) {
    	setup_ajax_pagination();
    });
     
    function setup_ajax_pagination()
    {
    jQuery.ias({
     container 	: ".main-inner",
      item		: ".post-outer",
      pagination	: ".main-inner .blog-pager",
      next		: ".blog-pager a.blog-pager-older-link",
    	history:false,
    	loader: "<img src='http://url-gambar-loading.tld/loader.gif'/>",
    });
    }
    
  2. Simpan Skrip jQuery Infinite Ajax Scroll berikut dengan nama jquery.ias.min.js.
    (function(b){b.ias=function(d){var m=b.extend({},b.ias.defaults,d);var c=new b.ias.util();var j=new b.ias.paging(m.scrollContainer);var h=(m.history?new b.ias.history():false);var f=this;r();function r(){j.onChangePage(function(x,v,w){if(h){h.setPage(x,w)}m.onPageChange.call(this,x,w,v)});s();if(h&&h.havePage()){q();pageNum=h.getPage();c.forceScrollTop(function(){if(pageNum>1){l(pageNum);curTreshold=p(true);b("html,body").scrollTop(curTreshold)}else{s()}})}return f}function s(){n();m.scrollContainer.scroll(g)}function g(){if(m.scrollContainer==b.ias.defaults.scrollContainer){scrTop=m.scrollContainer.scrollTop()}else{scrTop=m.scrollContainer.offset().top}wndHeight=m.scrollContainer.height();curScrOffset=scrTop+wndHeight;if(curScrOffset>=p()){t(curScrOffset)}}function q(){m.scrollContainer.unbind("scroll",g)}function n(){b(m.pagination).hide()}function p(v){el=b(m.container).find(m.item).last();if(el.size()==0){return 0}treshold=el.offset().top+el.height();if(!v){treshold+=m.tresholdMargin}return treshold}function t(w,v){urlNextPage=b(m.next).attr("href");if(!urlNextPage){return q()}j.pushPages(w,urlNextPage);q();o();e(urlNextPage,function(y,x){result=m.onLoadItems.call(this,x);if(result!==false){b(x).hide();curLastItem=b(m.container).find(m.item).last();curLastItem.after(x);b(x).fadeIn()}b(m.pagination).replaceWith(b(m.pagination,y));k();s();m.onRenderComplete.call(this,x);if(v){v.call(this)}})}function e(w,x){var v=[];b.get(w,null,function(y){container=b(m.container,y).eq(0);if(0==container.length){container=b(y).filter(m.container).eq(0)}if(container){container.find(m.item).each(function(){v.push(this)})}if(x){x.call(this,y,v)}},"html")}function l(v){curTreshold=p(true);if(curTreshold>0){t(curTreshold,function(){q();if((j.getCurPageNum(curTreshold)+1)<v){l(v);b("html,body").animate({scrollTop:curTreshold},400,"swing")}else{b("html,body").animate({scrollTop:curTreshold},1000,"swing");s()}})}}function u(){loader=b(".ias_loader");if(loader.size()==0){loader=b("<div class='ias_loader'>"+m.loader+"</div>");loader.hide()}return loader}function o(){loader=u();if(m.customLoaderProc!==false){m.customLoaderProc(loader)}else{el=b(m.container).find(m.item).last();el.after(loader);loader.fadeIn()}}function k(){loader=u();loader.remove()}};function a(c){if(window.console&&window.console.log){window.console.log(c)}}b.ias.defaults={container:"#container",scrollContainer:b(window),item:".item",pagination:"#pagination",next:".next",loader:'<img src="images/loader.gif"/>',tresholdMargin:0,history:true,onPageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){},customLoaderProc:false};b.ias.util=function(){var d=false;var f=false;var c=this;e();function e(){b(window).load(function(){d=true})}this.forceScrollTop=function(g){b("html,body").scrollTop(0);if(!f){if(!d){setTimeout(function(){c.forceScrollTop(g)},1)}else{g.call();f=true}}}};b.ias.paging=function(){var e=[[0,document.location.toString()]];var h=function(){};var d=1;j();function j(){b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;curPageNum=c(curScrOffset);curPagebreak=f(curScrOffset);if(d!=curPageNum){h.call(this,curPageNum,curPagebreak[0],curPagebreak[1])}d=curPageNum}function c(k){for(i=(e.length-1);i>0;i--){if(k>e[i][0]){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i>=0;i--){if(k>e[i][0]){return e[i]}}return null}this.onChangePage=function(k){h=k};this.pushPages=function(k,l){e.push([k,l])}};b.ias.history=function(){var d=false;var c=false;e();function e(){c=!!(window.history&&history.pushState&&history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},"",f)};this.havePage=function(){return(this.getState()!=false)};this.getPage=function(){if(this.havePage()){stateObj=this.getState();return stateObj.page}return 1};this.getState=function(){if(c){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{haveState=(window.location.hash.substring(0,7)=="#/page/");if(haveState){pageNum=parseInt(window.location.hash.replace("#/page/",""));return{page:pageNum}}}return false};this.updateState=function(g,h,f){if(d){this.replaceState(g,h,f)}else{this.pushState(g,h,f)}};this.pushState=function(g,h,f){if(c){history.pushState({ias:g},h,f)}else{hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash}d=true};this.replaceState=function(g,h,f){if(c){history.replaceState({ias:g},h,f)}else{this.pushState(g,h,f)}}}})(jQuery);
    
  3. Upload 2 file .js (jquery.ias.setting.js & jquery.ias.min.js) tersebut di hostingan Anda.
  4. Sisipkan link upload file tersebut pada kode singkat berikut dan tempatkan di template blog Anda.
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <!-- File jQuery versi 1.6.1 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
    <!-- Infinite Ajax Scroll Setting -->
    <script type="text/javascript" src="http//url-hosting-lain.tld/jquery.ias.setting.js"></script>
    <!-- Skrip jQuery Infinite Ajax Scroll -->
    <script type="text/javascript" src="http//url-hosting-lain.tld/jquery.ias.min.js"></script>
    </b:if>
    

Jika pagination blog Anda tidak me-load secara otomatis ketika discroll, Anda perlu mengatur tag id/class pada kode Infinite Ajax Scroll Setting di atas untuk disesuaikan dengan template Anda. (baca di sini untuk mengetahui deskripsi skrip dasar jQuery Infinite Ajax Scroll dan cara settingnya).

Autoload Ajax Scroll Pagination WordPress dengan jQuery

Untuk membuat autoload ajax scroll pagination seperti dalam blog WordPress ini, ada beberapa file yang Anda butuhkan.

Autoload ajax scroll pagination di WordPress ini menggunakan plugin jQuery. Jika Anda melihat halaman homepage atau halaman kategori blog Jevuska, halaman pagination akan loading secara otomatis ketika discroll ke bawah. Untuk membuat pagination tersebut menjadi autoload seperti dalam blog ini, ada beberapa file yang Anda butuhkan, yaitu:

  1. File javascript jQuery 1.4 ke atas
  2. File javascript jquery.ias.min.js
  3. File gambar loader.gif
    Untuk file ke-2 dan ke-3 Anda bisa download di sini (Infinite Ajax Scroll). Anda hanya membutuhkan 2 file yang di atas saja.
  4. Skrip dasar jQuery. (Simpan skrip berikut dengan nama jquery.ias.setting.js)
    jQuery('document').ready(function($) {
    	setup_ajax_pagination();
    });
    
    function setup_ajax_pagination()
    {
    jQuery.ias({
    	container : '#content',
    	item: '.post',
    	pagination: '#nav-below',
    	next: '#nav-below .nav-previous a',
    	history:false,
    	loader: gl_theme_url + "/ajaxscroll/loader.gif'/>",
    });
    }
    

Cara membuat Autoload Ajax Scroll Pagination (Infinite Ajax Scroll)

  1. Buat folder di dalam root folder theme WordPress yang Anda gunakan dan berikan nama foldernya yaitu ajaxscroll.
  2. Simpan semua file jquery.ias.min.js, loader.gif dan jquery.ias.setting.js di dalam folder ajaxscroll yang Anda buat.
  3. Tempatkan skrip berikut tepat sebelum kode </head> dalam file theme Anda, biasanya di header.php.
    
    <!-- jQuery versi 1.6.1 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
     
    <!-- skrip dasar jQuery -->
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/ajaxscroll/jquery.ias.setting.js"></script>
    
    <!-- skrip Infinite Ajax Scroll -->
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/ajaxscroll/jquery.ias.min.js"></script>
    
    <!-- skrip untuk menampilkan gambar loader.gif -->
    <script type="text/javascript">
    	var gl_theme_url = "<img src='<?php echo get_template_directory_uri(); ?>";
    </script>
    
    
  4. Save pekerjaan Anda. Anda bisa melihat pagination artikel menjadi autoload ketika discroll ke bawah.

Tutorial ini menggunakan theme default WordPres (Twenty Eleven). Jika Anda menggunakan theme WordPress yang lain. Anda cukup mengubah tag ID dan Class pada Skrip dasar jQuery (file jquery.ias.setting.js).

Deskripsi skrip dasar jQuery Infinite Ajax Scroll (jquery.ias.setting.js)

jQuery.ias({
  container : '#content', 
  // tag yang memuat semua tag ID/class (area postingan dan area pagination).

  item: '.post', 
  // tag yang memuat masing-masing artikel (area postingan).

  pagination: '#nav-below', 
  //tag yang memuat elemen pagination (link previous dan link next pagination).

  next: '#nav-below .nav-previous a', 
  //tag class link yang memuat link previous pagination.

  history:false, 
  //false artinya untuk menghilangkan tanda hash ("#/page/") di url ketika discroll.

  loader: gl_theme_url + "/ajaxscroll/loader.gif'/>", 
  //gambar loading.

});
Sketsa Infinite Ajax Scroll Pagination
Sketsa Infinite Ajax Scroll Pagination

Jadi Anda tinggal menyesuaikan tag ID atau tag class yang ada pada theme WP Anda.

Sumber skrip Infinite Ajax Scroll ini di http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin

Menampilkan page number title di pagination single post wp (paged)

om jev, salam kenal sebelumnya. saya mau tanya tentang title di single paged punya om jev. Saya sudah cari tutor ngalor ngidul tapi tetep belum nemu solusinya. saya lihat punya om jev kok bisa muncul paged titlenya yang di single post. klo berkenan, tolong ajarin donk om,yang mana yang harus di oprek..

Menjawab pertanyaan dari FedEx Mildnet di inbox Facebook Page saya (maaf sebelumnya, pesan kamu Om Jev tampilkan di sini demi kepentingan pembelajaran buat teman-teman yang lain). Masalahnya mengenai page number title di pagination single post wp yang tidak tampil, yang kemungkinan masalah di theme wordpress sendiri atau penggunaan plugin seo.

om jev, salam kenal sebelumnya. saya mau tanya tentang title di single paged punya om jev. Saya sudah cari tutor ngalor ngidul tapi tetep belum nemu solusinya. saya lihat punya om jev kok bisa muncul paged titlenya yang di single post. klo berkenan, tolong ajarin donk om,yang mana yang harus di oprek..
makasih sebelumnya..

Solusinya adalah buka file header.php (tergantung wp themenya), kode berikut dipasang di antara <title> dan </title> setelah kode yang menampilkan title halaman.

global $page, $paged;
if ( $paged >= 2 || $page >= 2) {
	echo ': Page '.max( $paged, $page );
}

Contoh kode lengkapnya (title yang tampil seperti title di situs ini):

<title>
<?php global $page, $paged; if ( is_home() || is_front_page() ) { wp_title( '|',true,'right' ); bloginfo('name'); } else { wp_title( '',true ); } if ( $paged >= 2 || $page >= 2) {
	echo ': Page ' . max( $paged, $page );
}
?>
</title>

Please Note:
Jika kamu menggunakan plugin seperti all in one seo pack atau plugin seo sejenisnya, kode ini tidak akan berfungsi jika kamu mengaktifkan opsi rewrite title.

UPDATE 12 April 2016
Untuk theme WordPress dan dengan penggunaan WordPress versi 4.4.0+, sebenarnya teknik menggunakan tag <title> di header.php sudah tidak diperlukan, dengan menambahkan kode add_theme_support( 'title-tag' ); di functions.php theme sudah cukup. Bagaimana memanipulasi title tag ini, saya baru saja bahas di WordPress Development StackExchange and StackOverflow.
Link ada di sini:
http://wordpress.stackexchange.com/a/223347/18731
http://stackoverflow.com/a/36471129/1562904