Create a file blog-page.php in your active theme directory and paste following code snippet in it. Now you will have an option to select Blog page template from the list of defined page templates while creating a new page in WP editor.
Note: – You can also give any other name to blog-page.php file
<?php /* Template Name: Blog Page */
get_header(); ?>
<section class="page-header">
<h1 class="blog-posts-page-title"><?php the_title(); ?></h1>
</section>
<section class="blog-page-wrap">
<div class="blog-posts">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 6,
'paged' => $paged
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="post-box">
<div class="post-img">
<a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail(); ?></a>
</div>
<div class="post-body">
<div class="post-meta">
<span class="post-categories">
<?php
$categories = get_the_category();
$separator = ' ';
$output = '';
if ( ! empty( $categories ) ) {
foreach( $categories as $category ) {
$output .= '<a href="' . esc_url( get_category_link( $category->term_id ) ) . '">' . esc_html( $category->name ) . '</a>' . $separator;
}
echo trim( $output, $separator );
}
?>
</span>
<span> | </span>
<span class="post-date">
<?php echo get_the_date(); ?>
</span>
</div>
<h3 class="post-title"><a href="<?php echo get_permalink(); ?>"><?php echo get_the_title(); ?></a></h3>
<div class="post-excerpt">
<?php echo wp_trim_words( get_the_content(), 20, '...' ); ?>
</div>
<a href="<?php the_permalink(); ?>" class="read-more-btn">Read More</a>
</div>
</div>
<?php endwhile; ?>
<div class="pagination custom-pagination">
<?php pagination_bar( $loop ); ?>
</div>
<?php wp_reset_postdata(); ?>
</div>
<div class="blog-page-sidebar">
<div class="blog-filter-title">Category</div>
<?php $categories = get_categories(); ?>
<ul class="categories">
<?php foreach($categories as $category) { ?>
<li><a href="<?php echo get_category_link($category->term_id); ?>"><?php echo $category->name; ?></a>
<?php } ?>
</ul>
</div>
</section>
<?php get_footer(); ?>
Paste following code snippet in functions.php file and save it . It will active the pagination in the newly created blog page.
//Pagination
function pagination_bar( $custom_query ) {
$total_pages = $custom_query->max_num_pages;
$big = 999999999; // need an unlikely integer
if ($total_pages > 1){
$current_page = max(1, get_query_var('paged'));
echo paginate_links(array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => $current_page,
'total' => $total_pages,
));
}
}
Need Professional Support for Your Website Problems?
Whether you're facing website issues or struggling with code implementation, our team is here to assist. Hire us to get your website back on track.
Hire Us