roi-theme/404.php

<?php
/**
 * The template for displaying 404 pages (Not Found)
 *
 * This template displays a user-friendly error page when the requested
 * content is not found, with helpful navigation options.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#404-not-found
 *
 * @package ROI_Theme
 * @since 1.0.0
 */

get_header();
?>

	<main id="main-content" class="site-main" role="main">

		<div class="content-wrapper">

			<section class="error-404 not-found" aria-labelledby="error-404-title">

				<!-- Error Header -->
				<header class="page-header">
					<h1 id="error-404-title" class="page-title">
						<?php esc_html_e( '404 - Page Not Found', 'roi-theme' ); ?>
					</h1>
				</header><!-- .page-header -->

				<!-- Error Content -->
				<div class="page-content">

					<p class="error-message">
						<?php esc_html_e( 'Oops! The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.', 'roi-theme' ); ?>
					</p>

					<!-- Helpful Actions -->
					<div class="error-actions">

						<h2><?php esc_html_e( 'What can you do?', 'roi-theme' ); ?></h2>

						<ul class="error-suggestions" role="list">
							<li>
								<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
									<?php esc_html_e( 'Go to the homepage', 'roi-theme' ); ?>
								</a>
							</li>
							<li>
								<?php esc_html_e( 'Check the URL for typos', 'roi-theme' ); ?>
							</li>
							<li>
								<?php esc_html_e( 'Use the navigation menu above', 'roi-theme' ); ?>
							</li>
						</ul>

						<!-- Recent Posts -->
						<?php
						$recent_posts = wp_get_recent_posts(
							array(
								'numberposts' => 5,
								'post_status' => 'publish',
							)
						);

						if ( ! empty( $recent_posts ) ) :
							?>
							<div class="recent-posts-section">
								<h3><?php esc_html_e( 'Recent Posts', 'roi-theme' ); ?></h3>
								<ul class="recent-posts-list" role="list">
									<?php foreach ( $recent_posts as $recent ) : ?>
										<li>
											<a href="<?php echo esc_url( get_permalink( $recent['ID'] ) ); ?>">
												<?php echo esc_html( $recent['post_title'] ); ?>
											</a>
										</li>
									<?php endforeach; ?>
								</ul>
							</div>
							<?php
							wp_reset_postdata();
						endif;
						?>

						<!-- Categories -->
						<?php
						$categories = get_categories(
							array(
								'orderby'    => 'count',
								'order'      => 'DESC',
								'number'     => 5,
								'hide_empty' => true,
							)
						);

						if ( ! empty( $categories ) ) :
							?>
							<div class="categories-section">
								<h3><?php esc_html_e( 'Browse by Category', 'roi-theme' ); ?></h3>
								<ul class="categories-list" role="list">
									<?php foreach ( $categories as $category ) : ?>
										<li>
											<a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>">
												<?php echo esc_html( $category->name ); ?>
												<span class="category-count">(<?php echo esc_html( $category->count ); ?>)</span>
											</a>
										</li>
									<?php endforeach; ?>
								</ul>
							</div>
						<?php endif; ?>

					</div><!-- .error-actions -->

				</div><!-- .page-content -->

			</section><!-- .error-404 -->

		</div><!-- .content-wrapper -->

	</main><!-- #main-content -->

<?php
get_footer();