Create 404.php for original theme

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

GOAL

To create 404.php

Environment

WordPress 5.5.1
XAMPP 7.4.10

What content should be contained?

These are examples of contents in the 404 page.

• Search
• Category list
• Recent posts
• Archives of year or month
• Links

Examples

There are many unique and interesting designs of 404 pages.

10 great examples of 404 error pages

20 Top Examples of 404 Error Pages

404.php

<?php
/**
*this is the 404 page template
*@package WordPress
*@subpackage Techblog
*@since Techblog 1.0
*/
get_header(); ?>
<div class="container">
<main id="main" class="site-main">
	<div class= "main-content">
		<h1>404! Sorry, the page can't be found.</h1>
			<br/>
		<?php get_search_form(); ?>
		<h2>Recent Posts</h2>
		<?php
			$lastposts = get_posts( array(
    			'posts_per_page' => 4
			) ); ?>
		<div class="post-item recent-post">
			<?php if ( $lastposts ) {
    			foreach ( $lastposts as $post ) : setup_postdata( $post ); ?>
        		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    	    		<div class="post-info">
        				<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 endforeach; 
    		wp_reset_postdata();
			}?>
		</div>
		<h2>Categories</h2>
		<?php
			$categories = get_categories();
			if ( $categories ) {
				foreach( $categories as $category ): ?>
					<a class="index category" href= "<?php echo get_category_link($category->term_id) ?>" >
					<?php echo $category->cat_name ?>
					</a>
				<?php endforeach; ?>
			<?php }; ?>
	</div>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

Result

Change the style