daily pastebin goal
28%
SHARE
TWEET

Untitled

a guest Aug 21st, 2018 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2. |--------------------------------------------------------------------------
  3. | Functions.php
  4. |--------------------------------------------------------------------------
  5. */
  6.  
  7. function button_load_more( $loop_query = null ) {
  8.     // Get the main query if one isn't specified
  9.     if ( ! $loop_query ) {
  10.     global $wp_query;
  11.  
  12.     $loop_query = $wp_query;
  13.     }
  14.  
  15.     // Get the total number of pages
  16.     $max_page = ( empty( $loop_query->max_num_pages ) ? 1 : $loop_query->max_num_pages );
  17.  
  18.     // Get the current page, and use that to get the next page
  19.     $paged = ( empty( $loop_query->query_vars['paged'] ) ? 1 : $loop_query->query_vars['paged'] );
  20.     $next_page = intval( $paged ) + 1;
  21.  
  22.     // If there are no more pages, we don't need the "Load More" button anymore
  23.     if ( $next_page > $max_page ) {
  24.     return '';
  25.     }
  26.  
  27.     // Allow filtering on the URL, since we'll need to point each query to its respective archive URL
  28.     $url = apply_filters( 'button_load_more_url', next_posts( $max_page, false ), $loop_query, $next_page );
  29.  
  30.     // Render the Load More button
  31.     ?>
  32.     <div class="load-more">
  33.     <span class="load-more-indicator"><style type='text/css'>@-webkit-keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }@keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }.uil-default-css > div:nth-of-type(1){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.5s;animation-delay: -0.5s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(2){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.3888888888888889s;animation-delay: -0.3888888888888889s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(3){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.2777777777777778s;animation-delay: -0.2777777777777778s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(4){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.16666666666666669s;animation-delay: -0.16666666666666669s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(5){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.05555555555555558s;animation-delay: -0.05555555555555558s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(6){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.05555555555555558s;animation-delay: 0.05555555555555558s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(7){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.16666666666666663s;animation-delay: 0.16666666666666663s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(8){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.2777777777777778s;animation-delay: 0.2777777777777778s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(9){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.38888888888888884s;animation-delay: 0.38888888888888884s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}</style><div class='uil-default-css' style='transform:scale(0.34);'><div style='top:77px;left:91px;width:18px;height:46px;background:#7a7a7a;-webkit-transform:rotate(0deg) translate(0,-54px);transform:rotate(0deg) translate(0,-54px);border-radius:10px;position:absolute;'></div><div style='top:77px;left:91px;width:18px;height:46px;background:#7a7a7a;-webkit-transform:rotate(40deg) translate(0,-54px);transform:rotate(40deg) translate(0,-54px);border-radius:10px;position:absolute;'></div><div style='top:77px;left:91px;width:18px;height:46px;background:#7a7a7a;-webkit-transform:rotate(80deg) translate(0,-54px);transform:rotate(80deg) translate(0,-54px);border-radius:10px;position:absolute;'></div><div style='top:77px;left:91px;width:18px;height:46px;background:#7a7a7a;-webkit-transform:rotate(120deg) translate(0,-54px);transform:rotate(120deg) translate(0,-54px);border-radius:10px;position:absolute;'></div><div style='top:77px;left:91px;width:18px;height:46px;background:#7a7a7a;-webkit-transform:rotate(160deg) translate(0,-54px);transform:rotate(160deg) translate(0,-54px);border-radius:10px;position:absolute;'></div><div style='top:77px;left:91px;width:18px;height:46px;background:#7a7a7a;-webkit-transform:rotate(200deg) translate(0,-54px);transform:rotate(200deg) translate(0,-54px);border-radius:10px;position:absolute;'></div><div style='top:77px;left:91px;width:18px;height:46px;background:#7a7a7a;-webkit-transform:rotate(240deg) translate(0,-54px);transform:rotate(240deg) translate(0,-54px);border-radius:10px;position:absolute;'></div><div style='top:77px;left:91px;width:18px;height:46px;background:#7a7a7a;-webkit-transform:rotate(280deg) translate(0,-54px);transform:rotate(280deg) translate(0,-54px);border-radius:10px;position:absolute;'></div><div style='top:77px;left:91px;width:18px;height:46px;background:#7a7a7a;-webkit-transform:rotate(320deg) translate(0,-54px);transform:rotate(320deg) translate(0,-54px);border-radius:10px;position:absolute;'></div></div></span>
  34.             <a href="<?php echo esc_url( $url );  ?>" class="btn button--teal"> Load More Posts </a>
  35.     </div>
  36.     <?php
  37. }
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47. /*
  48. |--------------------------------------------------------------------------
  49. | Style.css
  50. |--------------------------------------------------------------------------
  51. */
  52.  
  53.  
  54. .article-card__container {
  55.     max-width: 1300px;
  56.     margin: 0px auto;
  57.     display: flex;
  58.     flex-direction: row;
  59.     flex-wrap: wrap;
  60. }
  61.  
  62.  
  63. .recent-posts__container {
  64.     max-width: 1300px;
  65.     margin: 0 auto;
  66.     padding-top: 30px;
  67.     padding-bottom: 50px;
  68. }
  69.  
  70. .link__wrapper {
  71.         margin-top: 30px;
  72.     width: 100%;
  73.     text-align: center;
  74.     display: flex;
  75. }
  76.  
  77. .load-more {
  78.     text-align: center;
  79.     margin: 0 auto;
  80. }
  81.  
  82. .load-more-indicator,
  83. .loading a {
  84.     display: none;
  85. }
  86. .loading span.load-more-indicator {
  87.     display: block;
  88.     margin: 0 auto;
  89. }
  90.  
  91.  
  92. /*
  93. |--------------------------------------------------------------------------
  94. | index.php
  95. |--------------------------------------------------------------------------
  96. */
  97.  
  98.  
  99. <div class="filter__results">
  100. <div class="container">
  101.     <div class="row">
  102.         <div class="col-md-12 offset-md-0 col-lg-10 offset-lg-1">
  103.             <span>Recent Posts</span>
  104.             <div class="related-reports__display">
  105.                 <?php
  106.                     $query_args = array(
  107.                         'post_type' => 'post',
  108.                         'posts_per_page' => 6,
  109.                         // 'paged'=>$paged
  110.                     );
  111.  
  112.                     $query_args['paged'] = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
  113.  
  114.                     $the_query = new WP_Query( $query_args );
  115.  
  116.                     $temp_query = $wp_query;
  117.                     $wp_query   = NULL;
  118.                     $wp_query   = $the_query;
  119.  
  120.                     if ( $the_query->have_posts() ) {
  121.                 ?>
  122.                    
  123.                     <div class="recent-posts__container load-more__wrapper">
  124.                         <div class="article-card__container load-more__container">
  125.  
  126.                 <?php
  127.                             while ( $the_query->have_posts() ) {
  128.                                     $the_query->the_post();
  129.  
  130.                                 include "components/recent-posts.php";
  131.                             }
  132.                     }
  133.                     wp_reset_postdata();
  134.                 ?>
  135.  
  136.             </div>
  137.                     <div class="link__wrapper">
  138.                         <?php button_load_more(); ?>
  139.                     </div>
  140.  
  141.                     </div>
  142.                 </div>
  143.             </div>
  144.         </div>
  145.     </div>
  146. </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top