Create archive.php for original theme

This is one of the articles about project “Create Original Theme in WordPress”.

GOAL

To create page.php

Environment

WordPress 5.5.1
XAMPP 7.4.10

archive.php

<?php
/**
 * The template to display posts archve
 *@package WordPress
 *@subpackage Techblog
 *@since Techblog 1.0
 */
 get_header(); ?>
<main id="main" class="site-main" role="main">
	<div class= "main-content">
	<?php if ( have_posts() ) :?>
		<header class="page-header">
			<?php
				the_archive_title('<h1>', '</h1>' );
				the_archive_description();
			?>
		</header>
		<?php
			while ( have_posts() ) :
				the_post();
				get_template_part( 'content/content', get_post_format() );
			endwhile;
			the_posts_pagination(
				array('prev_text' => '<u>Back<<</>  ',
					'next_text' => '  <u>>>Next</>', )
			);
		endif; ?>
	</div>
</main>
<?php
	get_sidebar();
	get_footer(); ?>

contetnt.php

/**
*@package WordPress
*@subpackage Techblog
*@since Techblog 1.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="main-content">
		<div class="post-item">
			<a href="<?php the_permalink(); ?>"></a>
			<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			<div class="post-info">
				<span class="sns"><a href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php echo get_the_title(); ?>" class="twitter-share-button" data-via="nako_new_high" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></span><br/>
				<span class="post-date"><?php the_date();?></span>
				<?php 
					$post_categories = get_the_category();
        			if ( $post_categories ) {
						foreach( $post_categories as $category ): ?>
						<span class= "post-categories"><a class="category" href= "<?php echo get_category_link($category->term_id) ?>" >
						<?php echo $category->cat_name ?>
						</a></span>
						<?php endforeach; ?>
					<?php }; ?>
			</div>
			<?php the_content(); ?>
		</div>
		<?php if ( is_search() ) : ?>
			<div>
				<?php the_excerpt(); ?>
				<p><a class="read-more" href="<?php the_permalink(); ?>"></p>
			</div>
		<?php endif; ?>
	</div>
</article>

Functions

the_archive_title()

This function displays the archive title such as “Search: <word>” or “Category: <category_name>”

You can use html tags as argument before and after.

the_archive_title('<h1 class = "class_name">', '</h1>' );

the_archive_description()

This function displays category, tag, term, or author description. You can use html tags as argument before and after.

the_posts_pagination(array $args = array())

This function displays a paginated navigation to next/previous set of posts, when applicable.

the_posts_pagination( array(
    'mid_size'  => 2,
    'prev_text' => __( '<u>Back</u>'),
    'next_text' => __( '<u>Next</u>'),
) ); 

<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

the_ID() returns the unique id of current post and post_class() returns the classes for the post container element.

is_search()

This returns true if the query is for a search.

Result

Change style