growth-spirit •
Code Preview
<?php get_header(); ?>
<div class="bg-[#F6F6F1] min-h-screen pt-12 pb-24">
<div class="container mx-auto max-w-[1150px] px-6 flex flex-col md:flex-row gap-12 md:gap-20">
<!-- Sidebar (Left) -->
<aside class="hidden md:block w-full md:w-[280px] shrink-0 md:border-r-2 md:border-gray-300 md:pr-12">
<!-- Sticky Container for entire sidebar -->
<div class="md:sticky md:top-[85px] md:h-[calc(100vh-85px)] md:flex md:flex-col md:py-8 box-border">
<!-- Fixed Top Section (Search + Categories) -->
<div class="category-sidebar-fixed bg-[#F6F6F1] space-y-8 shrink-0 pb-6 border-b border-gray-200">
<!-- Search -->
<div>
<form role="search" method="get" class="relative group" action="<?php echo home_url( '/' ); ?>">
<input
type="search"
class="w-full bg-transparent border-b-2 border-gray-300 pl-0 pr-10 py-2 font-serif text-lg text-black placeholder-gray-400 focus:outline-none focus:border-black transition-colors"
placeholder="Search..."
value="<?php echo get_search_query(); ?>"
name="s"
/>
<button type="submit" class="absolute right-0 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-black">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>
</div>
<!-- Categories -->
<div>
<h3 class="font-sans font-bold text-[11px] uppercase tracking-[0.2em] text-gray-400 mb-4">
Browse Topics
</h3>
<div class="flex flex-col gap-3 items-start">
<a href="<?php echo home_url('/category/mind-matter'); ?>"
class="<?php echo (is_category('mind-matter') || has_category('mind-matter')) ? 'border-[#FFD700] bg-[#FFD700]/10 text-black shadow-md' : 'border-gray-200 text-gray-700 hover:border-[#FFD700] hover:text-black hover:bg-[#FFD700]/10'; ?> inline-block px-4 py-2 bg-white border rounded-full font-serif text-sm transition-all no-underline shadow-sm">
💡 Mind & Matter
</a>
<a href="<?php echo home_url('/category/society-time'); ?>"
class="<?php echo (is_category('society-time') || has_category('society-time')) ? 'border-[#E17055] bg-[#E17055]/10 text-black shadow-md' : 'border-gray-200 text-gray-700 hover:border-[#E17055] hover:text-black hover:bg-[#E17055]/10'; ?> inline-block px-4 py-2 bg-white border rounded-full font-serif text-sm transition-all no-underline shadow-sm">
⏳ Society & Time
</a>
<a href="<?php echo home_url('/category/growth-spirit'); ?>"
class="<?php echo (is_category('growth-spirit') || has_category('growth-spirit')) ? 'border-[#8FBC8F] bg-[#8FBC8F]/10 text-black shadow-md' : 'border-gray-200 text-gray-700 hover:border-[#8FBC8F] hover:text-black hover:bg-[#8FBC8F]/10'; ?> inline-block px-4 py-2 bg-white border rounded-full font-serif text-sm transition-all no-underline shadow-sm">
🌱 Growth & Spirit
</a>
</div>
</div>
</div>
<!-- Recent Articles List (Scrollable) -->
<div class="category-sidebar-scrollable mt-6 overflow-y-auto flex-1 pr-2">
<h3 class="font-sans font-bold text-[11px] uppercase tracking-[0.2em] text-gray-400 mb-4 sticky top-0 bg-[#F6F6F1] py-2 z-10 block">
Related Stories
</h3>
<ul class="space-y-4 pb-12">
<?php
$current_post_id = get_queried_object_id();
$categories_list = get_the_category( $current_post_id );
$cat_ids = array();
if ( $categories_list ) {
foreach ( $categories_list as $cat_item ) {
$cat_ids[] = $cat_item->term_id;
}
}
$args = array(
'posts_per_page' => 10, // Increased to allow scrolling
'post__not_in' => array( $current_post_id )
);
if ( ! empty( $cat_ids ) ) {
$args['category__in'] = $cat_ids;
}
$sidebar_query = new WP_Query( $args );
if ( $sidebar_query->have_posts() ) :
while ( $sidebar_query->have_posts() ) : $sidebar_query->the_post();
?>
<li class="border-b border-gray-200/50 pb-3 last:border-0 relative">
<a href="<?php the_permalink(); ?>" class="font-serif text-[15px] leading-snug text-gray-600 hover:text-black hover:italic transition-all block">
<?php the_title(); ?>
</a>
</li>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</ul>
</div>
</div>
</aside>
<!-- Main Content (Right) -->
<main class="flex-1 relative">
<?php while ( have_posts() ) : the_post(); ?>
<!-- Back Button (Mobile Only) -->
<div class="md:hidden mb-6">
<button onclick="window.history.back()" class="group flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-[#999] hover:text-black transition-colors focus:outline-none">
<i class="fa-solid fa-arrow-left transform group-hover:-translate-x-1 transition-transform"></i>
<span>Back</span>
</button>
</div>
<article>
<header class="mb-8 relative">
<div class="flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-[#999] mb-4">
<?php
$categories = get_the_category();
if ( ! empty( $categories ) ) {
echo '<span class="text-[#E17055]">' . esc_html( $categories[0]->name ) . '</span>';
}
?>
<span>•</span>
<time><?php echo get_the_date('F j, Y'); ?></time>
</div>
<h1 class="font-serif text-4xl md:text-5xl font-bold leading-tight text-black mb-6">
<?php the_title(); ?>
</h1>
<!-- Social Share (Inline) -->
<div class="flex gap-4 items-center">
<span class="font-sans text-xs font-bold uppercase tracking-widest text-gray-400">Share:</span>
<!-- 1. Copy Link -->
<button onclick="const btn = this; navigator.clipboard.writeText('<?php echo get_the_permalink(); ?>'); const icon = btn.querySelector('i'); icon.classList.remove('fa-link'); icon.classList.add('fa-check', 'text-green-500'); setTimeout(() => { icon.classList.add('fa-link'); icon.classList.remove('fa-check', 'text-green-500'); }, 2000);" class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:text-black hover:border-black transition-colors" title="Copy Link">
<i class="fa-solid fa-link transition-all"></i>
</button>
<!-- 2. LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo get_the_permalink(); ?>" class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:text-[#0A66C2] hover:border-[#0A66C2] transition-colors" title="Share on LinkedIn" target="_blank">
<i class="fa-brands fa-linkedin-in"></i>
</a>
<!-- 3. X (Twitter) -->
<a href="https://twitter.com/intent/tweet?text=<?php echo get_the_title(); ?>&url=<?php echo get_the_permalink(); ?>" class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:text-black hover:border-black transition-colors" title="Share on X" target="_blank">
<i class="fa-brands fa-x-twitter"></i>
</a>
<!-- 4. WhatsApp -->
<a href="https://api.whatsapp.com/send?text=<?php echo urlencode(get_the_title() . ' ' . get_the_permalink()); ?>" class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:text-[#25D366] hover:border-[#25D366] transition-colors" title="Share on WhatsApp" target="_blank">
<i class="fa-brands fa-whatsapp"></i>
</a>
<!-- 5. Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_the_permalink(); ?>" class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:text-[#4267B2] hover:border-[#4267B2] transition-colors" title="Share on Facebook" target="_blank">
<i class="fa-brands fa-facebook-f"></i>
</a>
</div>
</header>
<!-- Featured Image -->
<?php if (has_post_thumbnail()) : ?>
<div class="mb-10 w-full rounded-lg overflow-hidden shadow-sm">
<?php the_post_thumbnail('large', ['class' => 'w-full h-auto']); ?>
</div>
<?php endif; ?>
<!-- Content -->
<div class="monarch-content prose prose-lg prose-a:text-[#4A90E2] prose-a:no-underline hover:prose-a:underline max-w-none mb-16">
<?php the_content(); ?>
</div>
<!-- Footer / Author Bio or Newsletter could go here -->
<div class="border-t border-gray-200 pt-10 mt-10">
<div class="bg-black text-white p-8 md:p-12 rounded-lg text-center">
<h3 class="font-serif text-2xl font-bold mb-4">Create the life you want</h3>
<p class="text-gray-300 mb-6 max-w-lg mx-auto font-sans">
Join 100,000+ monthly readers. Strategies for life, work, and travel delivered to your inbox.
</p>
<div class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
<input type="email" placeholder="Email Address" class="flex-1 px-4 py-3 rounded text-black font-sans focus:outline-none" />
<button class="bg-[#4A90E2] text-white font-bold uppercase tracking-wider px-6 py-3 rounded hover:bg-blue-600 transition-colors">
Sign Up
</button>
</div>
</div>
</div>
<!-- Comments -->
<!-- Comments -->
<div id="comments-section">
<?php
comments_template();
?>
</div>
</article>
<?php endwhile; ?>
</main>
</div>
</div>
<?php get_footer(); ?>