API tools faq
paste
Guest User

Untitled

a guest
Aug 21st, 2018
117
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.39 KB | None | 0 0
raw download clone embed print report
  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>
Add Comment
Please, Sign In to add comment
Public Pastes
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!