Не корректный вывод постов при нажатии на кнопку “Загрузить еще”

На сайте demo.ipro2.ru/myfeeria в блоке "НАШИ ШОУ-ПРОГРАММЫ И ПЕРСОНАЖИ" есть кнопка "Загрузить еще", ее надо запустить, но в двух вариантах, возможно через кастом филд сделать переключатель:

1. нужно, чтобы при нажатии на кнопку "Загрузить еще" подгружались посты;

2. нужно, чтобы при скроллинге подгружались посты, т.е. бесконечная прокрутка постов.

Для этих целей в файле шаблона страницы, после постов, написал the_posts_pagination(), до этого там не было пагинации, просто выводились все посты, и установил плагин Ajax Pagination Settings, который цепляет на кнопку пагинации ajax загрузку, в настройках плагина можно выбрать либо кнопку "Загрузить еще", либо бесконечную прокрутку. При нажатии на кнопку и при скроллинге посты подгружаются, правда стили слетаю, посты друг на друга наезжают https://prnt.sc/ja0bp3 .

Вывод постов в таком виде(кирпичный эффект) происходит с помощью Masonry.
Код в файле шаблона страницы

<div class="grid clearfix" data-masonry='{ "itemSelector": ".grid- 
item", "columnWidth": ".grid-sizer", "gutter": ".gutter-sizer", 
"percentPosition": true, "transitionDuration": "0.3s" }'>
  <?php
	 while ( have_posts() ) :
		   the_post();
		   get_template_part( 'template-parts/content', 'page' );
	 endwhile; // End of the loop.
	?>
	 <div class="grid-sizer"></div>
	 <div class="gutter-sizer"></div>
  </div>
  <div id="loadMore" class="load-img">
	  <?php the_posts_pagination( array('screen_reader_text' => ' ',)); ?>
   </div> 
</div>

Код в файле js

(function ($) {
   "use strict";

   if($('.wow').length){
	   var wow = new WOW(
		 {
		   boxClass:'wow', // animated element css class (default is wow)
		   animateClass: 'animated', // animation css class (default is animated)
		   offset:  0, // distance to the element when triggering the animation (default is 0)
		   mobile:false, // trigger animations on mobile devices (default is true)
		   live:true // act on asynchronously loaded content (default is true)
		 }
	   );
	   wow.init();
   }

   if ( jQuery.fn.masonry ) {
	   var $grid = jQuery( ".project-listing .grid, .blog-listing .grid" ).masonry();
	   $grid.imagesLoaded().progress( function() {
		   $grid.masonry( "layout" );
	   }).always( function() {
		   $grid.masonry( "layout" );
	   });
   }

   jQuery( window ).on( "beforeunload", function() {
	   jQuery( "body" ).addClass( "before-unload" );
   });

})(jQuery); 

Сейчас на сайте выводятся дважды посты, сверху с помощью плагина WP Tiles, но там нет бесконечной подгрузки постов, а снизу это верстка которая была на сайте + плагин Ajax Pagination Settings.

Как сделать так, что бы посты корректно выводились?

P.S. Взял на сайте фриланса я это задание, но выполнить его не получается, второй день сижу и ничего придумать не могу. Дело в том что только начал брать задания на сайте и как такового рейтинга нет, а если это задание провалю, то может вообще в минус уйти. Мне не хотелось бы что бы у меня рейтинг упал, сложно будет в дальнейшем брать задания. Может быть кто нибудь выполните это задание вместо меня? Не бесплатно конечно. Если возьметесь оцените пожалуйста по времени и деньгам сколько выйдет.