File: /home/khabarnavis/web/khabarnavis.com/public_html/wp-content/themes/khabarnavis/index.php
<?php get_header(); ?>
<main id="primary" class="site-main">
<div class="container">
<?php if (is_home() && !is_front_page()) : ?>
<!-- Blog page header -->
<div class="archive-header">
<span class="archive-label"><?php esc_html_e('Latest', 'khabarnavis'); ?></span>
<h1 class="archive-title"><?php single_post_title(); ?></h1>
</div>
<?php endif; ?>
<!-- ===== HERO SECTION ===== -->
<?php
$hero_args = [
'posts_per_page' => 4,
'post_status' => 'publish',
'meta_key' => '_thumbnail_id',
];
$hero_query = new WP_Query($hero_args);
if ($hero_query->have_posts()) :
$hero_post = $hero_query->posts[0];
?>
<section class="hero-section">
<!-- Main Featured Post -->
<div class="hero-featured" onclick="location.href='<?php echo esc_url(get_permalink($hero_post->ID)); ?>'">
<?php if (has_post_thumbnail($hero_post->ID)) : ?>
<?php echo get_the_post_thumbnail($hero_post->ID, 'khabarnavis-hero', ['alt' => esc_attr($hero_post->post_title)]); ?>
<?php else : ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/placeholder.jpg" alt="">
<?php endif; ?>
<div class="hero-overlay"></div>
<div class="hero-content">
<?php echo khabarnavis_get_category_badge($hero_post->ID); ?>
<h1 class="hero-title">
<a href="<?php echo esc_url(get_permalink($hero_post->ID)); ?>"><?php echo esc_html($hero_post->post_title); ?></a>
</h1>
<p class="hero-excerpt"><?php echo esc_html(get_the_excerpt($hero_post)); ?></p>
<div class="hero-meta metadata">
<span><?php echo esc_html(get_the_author_meta('display_name', $hero_post->post_author)); ?></span>
<span class="separator"></span>
<span><?php echo khabarnavis_read_time($hero_post->ID); ?></span>
</div>
</div>
</div>
<!-- Trending Panel -->
<div class="trending-panel">
<h2><?php esc_html_e('Trending Now', 'khabarnavis'); ?></h2>
<div class="trending-list">
<?php
$trending_posts = array_slice($hero_query->posts, 1, 3);
foreach ($trending_posts as $tp) :
$cats = get_the_category($tp->ID);
$cat_name = $cats ? $cats[0]->name : '';
?>
<div class="trending-item">
<?php if ($cat_name) : ?>
<span class="cat-badge"><?php echo esc_html($cat_name); ?></span>
<?php endif; ?>
<h3>
<a href="<?php echo esc_url(get_permalink($tp->ID)); ?>"><?php echo esc_html($tp->post_title); ?></a>
</h3>
<p><?php echo esc_html(wp_trim_words($tp->post_excerpt ?: $tp->post_content, 15)); ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
</section><!-- .hero-section -->
<?php wp_reset_postdata(); endif; ?>
<!-- ===== LATEST STORIES ===== -->
<?php
$latest_args = [
'posts_per_page' => 7,
'post_status' => 'publish',
'offset' => 4,
];
$latest_query = new WP_Query($latest_args);
if ($latest_query->have_posts()) :
?>
<section class="latest-stories">
<div class="section-header">
<div>
<span class="section-label"><?php esc_html_e('The Collection', 'khabarnavis'); ?></span>
<h2 class="section-title"><?php esc_html_e('Latest Stories', 'khabarnavis'); ?></h2>
</div>
<a href="<?php echo esc_url(get_permalink(get_option('page_for_posts'))); ?>" class="view-all-link"><?php esc_html_e('View all stories →', 'khabarnavis'); ?></a>
</div>
<div class="stories-grid">
<?php $i = 0; while ($latest_query->have_posts()) : $latest_query->the_post(); ?>
<?php if ($i === 0) : // Featured card (2-col wide) ?>
<div class="post-card card-featured">
<div class="card-image">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('khabarnavis-featured', ['alt' => esc_attr(get_the_title())]); ?>
<?php endif; ?>
</div>
<div class="card-body">
<div>
<p class="card-category"><?php echo khabarnavis_get_category_badge(); ?></p>
<h3 class="card-title" style="font-size:1.35rem"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</div>
<div>
<p class="card-excerpt"><?php the_excerpt(); ?></p>
<?php echo khabarnavis_article_meta(); ?>
</div>
</div>
</div>
<?php else : // Regular card ?>
<div class="post-card">
<?php if (has_post_thumbnail()) : ?>
<div class="card-image">
<?php the_post_thumbnail('khabarnavis-thumb', ['alt' => esc_attr(get_the_title())]); ?>
</div>
<?php endif; ?>
<div class="card-body">
<p class="card-category"><?php echo khabarnavis_get_category_badge(); ?></p>
<h3 class="card-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p class="card-excerpt"><?php the_excerpt(); ?></p>
<?php echo khabarnavis_article_meta(); ?>
</div>
</div>
<?php endif; $i++; endwhile; wp_reset_postdata(); ?>
</div>
</section>
<?php endif; ?>
<!-- ===== CATEGORY SECTIONS ===== -->
<?php
$featured_cats = get_categories(['number' => 4, 'hide_empty' => true, 'orderby' => 'count', 'order' => 'DESC']);
if (count($featured_cats) >= 2) :
// Display 2 pairs of categories
$cat_pairs = array_chunk($featured_cats, 2);
foreach ($cat_pairs as $pair) :
?>
<section class="category-section">
<div class="two-col-categories">
<?php foreach ($pair as $cat) :
$cat_posts = get_posts(['category' => $cat->term_id, 'numberposts' => 3, 'post_status' => 'publish']);
if (!$cat_posts) continue;
?>
<div class="cat-column">
<h2><a href="<?php echo esc_url(get_category_link($cat->term_id)); ?>"><?php echo esc_html($cat->name); ?></a></h2>
<div class="cat-article-list">
<?php foreach ($cat_posts as $cp) : ?>
<div class="cat-article-item">
<?php if (has_post_thumbnail($cp->ID)) : ?>
<div class="thumb">
<?php echo get_the_post_thumbnail($cp->ID, 'khabarnavis-square', ['alt' => esc_attr($cp->post_title)]); ?>
</div>
<?php endif; ?>
<div class="info">
<h3><a href="<?php echo esc_url(get_permalink($cp->ID)); ?>"><?php echo esc_html($cp->post_title); ?></a></h3>
<p><?php echo esc_html(wp_trim_words(get_the_excerpt($cp), 14)); ?></p>
<span class="article-meta metadata">
<?php echo esc_html(get_the_date('', $cp->ID)); ?>
• <?php echo esc_html(get_the_author_meta('display_name', $cp->post_author)); ?>
</span>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</section>
<?php endforeach; endif; ?>
<!-- ===== NEWSLETTER ===== -->
<section class="newsletter-section">
<span class="newsletter-badge"><?php esc_html_e('Newsletter', 'khabarnavis'); ?></span>
<h2 class="newsletter-title"><?php esc_html_e('Intelligence, delivered to your inbox.', 'khabarnavis'); ?></h2>
<p class="newsletter-desc"><?php esc_html_e('Join thousands of readers who start their day with our curated news briefing.', 'khabarnavis'); ?></p>
<form class="newsletter-form" action="#" method="post">
<input type="email" name="email" placeholder="<?php esc_attr_e('Enter your email address', 'khabarnavis'); ?>" required>
<button type="submit"><?php esc_html_e('Subscribe Now', 'khabarnavis'); ?></button>
</form>
<p class="newsletter-fine-print"><?php esc_html_e('No spam. Only news that matters. Unsubscribe at any time.', 'khabarnavis'); ?></p>
</section>
</div><!-- .container -->
</main><!-- #primary -->
<?php get_footer(); ?>