Pagination does not display WP Query - wordpress

Question

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

Answer 1

need to check the PHP error log details for help, also you can comments out the template part by part, to find out the error happen on which part exactly.

Answer 2

Okay so after trying for days, I actually got it working not long after posting this like so
<section id="blog-posts" class="latest-blog-posts full-width standard-padding">
<div class="full-width-inner">
<div class="the-posts">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'posts_per_page' => 6,
'paged' => $paged
);
$custom_query = new WP_Query( $args );
while($custom_query->have_posts()) :
$custom_query->the_post();
?>
<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 endwhile; ?>
</div>
<?php if (function_exists("pagination")) {
pagination($custom_query->max_num_pages);
} ?>
</div>
</div>
</section>
Functions.php
// numbered pagination
function pagination($pages = '', $range = 4)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "<div class=\"pagination\">";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"".$i."";
}
}
if ($paged < $pages && $showitems < $pages) echo "Next ›";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>";
echo "</div>\n";
}
}
Thanks to this article
https://www.evan-herman.com/how-to-add-numeric-wordpress-pagination/#.Yxy4S-zML2I