Tutorial on how to create a WordPress archive template the list of category wise or date wise post

the archive.php file is used to display the date, month or year wise and it also used to show the category wise posts, now in this archive template development we are going to learn to make an archive and custom archive page.

Archive Page

Now Start to make the archive page step by step

Step 1

make an archive.php file inside your WordPress custom theme folder, if you want to show custom archive then make archive-<category_slug>.php file

Step 2

get an HTML template to show the archive loop and copy the HTML code and paste into your archive.php file or in the custom archive file.

Step 3

Now place the custom theme header, footer, and sidebar in its position using the code <?php get_header(); ?>, <?php get_footer(); ?>, and <?php get_sidebar(); ?>

Step 4

Make the archive page title dynamic using the code <?php echo get_the_archive_title(); ?>

Step 5

In archive.php or in custom archive file WordPress is used to send only the post loop related to the searched archive so replace the archive post loop by

<?php if(have_posts()): ?>    
<?php while(have_posts()): ?> 
<?php the_post(); ?> 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
<div class="blog-post"> 
<h2 class="heading">  
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
</h2> 
</div> 
<div> 
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" /> 
</div> 
<div> 
<?php the_excerpt(); ?> 
</div>            
<div class="overlay"> 
<a id="read-more" href="<?php the_permalink(); ?>">Read More</a> 
</div> 
</div> 
<?php endwhile; ?> 
<?php endif; ?>

Step 6

Now reset the wp-query using the code <?php wp_reset_query(); ?>

Step 7

Now here is the full code to make an archive page

<?php get_header(); ?>
<div class="container"> 
<div class="row"> 
<div class="col-md-12"> 
<h1><?php echo get_the_archive_title(); ?></h1> 
</div> <div class="col-md-8"> 
<?php if(have_posts()): ?>     
<?php while(have_posts()): ?> 
<?php the_post(); ?> 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
<div class="blog-post"> 
<h2 class="heading">  
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
</h2> 
</div> 
<div> 
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" /> 
</div> 
<div> 
<?php the_excerpt(); ?> 
</div>             
<div class="overlay"> 
<a id="read-more" href="<?php the_permalink(); ?>">Read More</a> 
</div> 
</div> 
<?php endwhile; ?>  
<?php endif; ?>  
</div> 
<div class="col-md-4"> 
<?php get_sidebar(); ?> 
</div> 
</div>
</div>
<?php get_footer(); ?>

now test the archive page and its ready for use to show the archive post in your WordPress theme

Thanks for reading.