I can't seem to get my pagination working.
I have been through many similar questions on Stack Overflow and tried to modify it but nothing seems to work.
EDIT - I'm trying to get numbered pagination - I'm not even sure the examples I have tried are numbered.
My code without any attempts is
<section id="blog-posts" class="latest-blog-posts full-width standard-padding">
<div class="full-width-inner">
<div class="the-posts">
<?php
// Define our WP Query Parameters
$the_query = new WP_Query( 'posts_per_page=9' ); ?>
<?php
// Start our WP Query
while ($the_query -> have_posts()) : $the_query -> the_post();
// Display the Post Title with Hyperlink
?>
<div class="post">
<div class="post-thumb">
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>" alt="" />
</div>
<h2 class="post-title-teaser"><?php the_title(); ?></h2>
<div class="post-date-preview"><p><?php echo get_the_date(); ?></p></div>
<div class="post-excerpt"><?php
the_excerpt(); ?></div>
<div class="elc-button post-button"><a class="read-on elc-button" aria-label="read more of the article about '<?php the_title(); ?>'" href="<?php the_permalink() ?>">Read More</a></div>
</div>
<?php
// Repeat the process and reset once it hits the limit
endwhile;
wp_reset_postdata();
?>
</div>
</div>
</section>
My latest attempts at adding pagination are
<section id="blog-posts" class="latest-blog-posts full-width standard-padding">
<div class="full-width-inner">
<div class="the-posts">
<?php
if ( ! function_exists( 'pagination' ) ) :
function pagination( $paged = '', $max_page = '' ) {
$big = 999999999; // need an unlikely integer
if( ! $paged ) {
$paged = get_query_var('paged');
}
if( ! $max_page ) {
global $wp_query;
$max_page = isset( $wp_query->max_num_pages ) ? $wp_query->max_num_pages : 1;
}
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, $paged ),
'total' => $max_page,
'mid_size' => 1,
'prev_text' => __( '«' ),
'next_text' => __( '»' ),
'type' => 'list'
) );
}
endif;
?>
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_status' => 'publish',
'orderby' => 'publish_date',
'order' => 'DESC',
'paged' => $paged,
'posts_per_page' => 12
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) :
?>
<div class="post">
<div class="post-thumb">
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>" alt="" />
</div>
<h2 class="post-title-teaser"><?php the_title(); ?></h2>
<div class="post-date-preview"><p><?php echo get_the_date(); ?></p></div>
<div class="post-excerpt"><?php
the_excerpt(); ?></div>
<div class="elc-button post-button"><a class="read-on elc-button" aria-label="read more of the article about '<?php the_title(); ?>'" href="<?php the_permalink() ?>">Read More</a></div>
</div>
<?php
// Repeat the process and reset once it hits the limit
endwhile;
pagination( $paged, $loop->max_num_pages); // Pagination Function
endif;
wp_reset_postdata();
?>
</div>
</div>
</section>
The truth is I didn't know if the initial portion (the if function) should be part of the PHP template or in functions PHP but I tried both
I have also tried this
<div class="the-posts">
<?php
// WP_Query arguments
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_status' => array( 'publish' ),
'nopaging' => false,
'posts_per_page' => '9',
'order' => 'DESC',
'orderby' => 'date',
'paged' => $paged
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) { ?>
<div class="post">
<div class="post-thumb">
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>" alt="" />
</div>
<h2 class="post-title-teaser"><?php the_title(); ?></h2>
<div class="post-date-preview"><p><?php echo get_the_date(); ?></p></div>
<div class="post-excerpt"><?php
the_excerpt(); ?></div>
<div class="elc-button post-button"><a class="read-on elc-button" aria-label="read more of the article about '<?php the_title(); ?>'" href="<?php the_permalink() ?>">Read More</a></div>
</div>
<?php }
} else {
// no posts found
}
echo paginate_links( array(
'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
'total' => $query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
'format' => '?paged=%#%',
'show_all' => false,
'type' => 'plain',
) );
// Restore original Post Data
wp_reset_postdata();
?>
</div>
But the page won't load and eventually, I get a 503
This kind of thing isn't my forte so I tried all the examples but nothing seemed to work
Any help would be greatly appreciated