WordPress   

Blog posts page template in WordPress

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 a helping hand in fixing your website issues?

If you are facing any problems in implementing these code snippets and tutorials, you can hire us to fix your website issues.

Hire Us