Patski123/repa-woocommerce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add RAR Storefront WordPress theme

Browse Source 
Implements the Reply All Regrets™ frontend design: retro office aesthetic
with manila/ink/stamp-red/olive palette, Fraunces + JetBrains Mono + Inter
typography. Includes homepage, category, product detail, blog, about, cart
templates with WooCommerce integration and interactive JS (filter, sort, gallery).

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
FrontendDev
2026-05-02 20:38:29 -04:00
parent ca4870649a
commit 1cc5a8ecfe
14 changed files with 2736 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

349
theme/front-page.php Normal file
View File

@@ -0,0 +1,349 @@
<?php
/**
* Homepage / Front page
* Sections: Hero · Categories · Featured Products · Designs · Quote · Blog · Footer
*/
get_header();
// Fetch featured/bestselling products
$featured_products = wc_get_products([
'limit' => 6,
'status' => 'publish',
'orderby' => 'popularity',
'order' => 'DESC',
]);
// Fetch product categories
$categories = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => true,
'parent' => 0,
'number' => 4,
'exclude' => [get_option('default_product_cat')],
]);
// Fetch recent blog posts
$blog_posts = get_posts([
'numberposts' => 3,
'post_status' => 'publish',
'post_type' => 'post',
]);
// Shop URL
$shop_url = get_permalink(wc_get_page_id('shop'));
?>
<!-- ═══ HERO ═══════════════════════════════════════════════════════════════ -->
<section class="rar-hero">
<div class="rar-hero__grid">
<div>
<div class="rar-form-tag" style="margin-bottom:22px;">FORM 01 · NEW ARRIVALS · WEEK <?php echo date('W'); ?></div>
<h1>
Office<br>
supplies for<br>
<em class="rar-hero__em">people who&nbsp;hate</em><br>
the office.
</h1>
<p class="rar-hero__sub">
Mugs, canvases, planners, and apparel for the chronically CC'd. Each item
is a quiet rebellion you can drink coffee out of. Synergize responsibly.
</p>
<div class="rar-hero__cta">
<a href="<?php echo esc_url($shop_url); ?>" class="rar-btn rar-btn--stamp">
Shop the catalog
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"></path></svg>
</a>
<a href="<?php echo esc_url(home_url('/blog/')); ?>" class="rar-btn rar-btn--ghost">Read the memo</a>
<span class="rar-hero__meta"><?php echo wp_count_posts('product')->publish; ?> items · ships in 3-5 biz days</span>
</div>
</div>
<div class="rar-hero__image">
<?php
// Show the hero product if available
$hero_products = wc_get_products(['limit' => 1, 'featured' => true, 'status' => 'publish']);
if (!empty($hero_products)) {
$hp = $hero_products[0];
$img_id = $hp->get_image_id();
if ($img_id) {
echo wp_get_attachment_image($img_id, 'rar-hero', false, ['style' => 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;']);
}
}
?>
<div class="rar-hero__image-label">FIG. 1 — HERO PRODUCT · 11OZ CERAMIC</div>
<div class="rar-hero__stamp"><span class="rar-stamp">Best Seller</span></div>
</div>
</div>
<!-- Metrics row -->
<div class="rar-metrics">
<?php
$metrics = [
['142,038', 'Reply-Alls regretted'],
['41 states', 'Currently shipping'],
['4.8 ★', 'Avg. on Trustpilot'],
['0', 'Calls returned'],
];
foreach ($metrics as [$num, $label]) {
echo '<div class="rar-metrics__item">';
echo '<div class="rar-metrics__num rar-serif">' . esc_html($num) . '</div>';
echo '<div class="rar-metrics__label">' . esc_html($label) . '</div>';
echo '</div>';
}
?>
</div>
</section>
<!-- ═══ CATEGORIES ══════════════════════════════════════════════════════════ -->
<section class="rar-cats">
<?php rar_section_head('FORM 02 · DEPARTMENTS', 'Shop by category', 'FILED QUARTERLY<br/>SEE INDEX P. 4'); ?>
<div class="rar-cats__grid">
<?php
$cat_meta = [
'mugs' => ['DEPT. 01', 'For passive aggression at room temp.'],
'canvas' => ['DEPT. 02', 'Wall art for the soul-tired.'],
'planners' => ['DEPT. 03', 'Productivity, with a wink.'],
'apparel' => ['DEPT. 04', 'Casual Friday, but make it bitter.'],
];
if (!empty($categories)) {
foreach ($categories as $i => $cat) {
$slug = $cat->slug;
$meta = $cat_meta[$slug] ?? ['DEPT. 0' . ($i + 1), $cat->description ?: 'Office essentials.'];
$url = get_term_link($cat);
?>
<a href="<?php echo esc_url($url); ?>" class="rar-cat-card">
<div class="rar-cat-card__header">
<span class="rar-cat-card__sku"><?php echo esc_html($meta[0]); ?></span>
<span class="rar-cat-card__count"><?php echo esc_html($cat->count); ?> items</span>
</div>
<div class="rar-cat-card__name"><?php echo esc_html($cat->name); ?></div>
<div class="rar-cat-card__desc"><?php echo esc_html($meta[1]); ?></div>
<span class="rar-cat-card__browse">
Browse
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"></path></svg>
</span>
</a>
<?php
}
} else {
// Fallback static categories
$static_cats = [
['Mugs', 'DEPT. 01', 47, 'For passive aggression at room temp.', '/product-category/mugs/'],
['Canvas', 'DEPT. 02', 18, 'Wall art for the soul-tired.', '/product-category/canvas/'],
['Planners', 'DEPT. 03', 12, 'Productivity, with a wink.', '/product-category/planners/'],
['Apparel', 'DEPT. 04', 24, 'Casual Friday, but make it bitter.', '/product-category/apparel/'],
];
foreach ($static_cats as [$name, $sku, $count, $desc, $path]) {
?>
<a href="<?php echo esc_url(home_url($path)); ?>" class="rar-cat-card">
<div class="rar-cat-card__header">
<span class="rar-cat-card__sku"><?php echo esc_html($sku); ?></span>
<span class="rar-cat-card__count"><?php echo esc_html($count); ?> items</span>
</div>
<div class="rar-cat-card__name"><?php echo esc_html($name); ?></div>
<div class="rar-cat-card__desc"><?php echo esc_html($desc); ?></div>
<span class="rar-cat-card__browse">Browse →</span>
</a>
<?php
}
}
?>
</div>
</section>
<!-- ═══ FEATURED PRODUCTS ═══════════════════════════════════════════════════ -->
<section class="rar-products">
<?php rar_section_head('FORM 03 · FEATURED INVENTORY', 'The bestsellers.', 'UPDATED ' . strtoupper(date('m.d.Y')) . '<br/>SUBJECT TO CHANGE'); ?>
<div class="rar-products__grid">
<?php if (!empty($featured_products)) : ?>
<?php foreach ($featured_products as $product) : ?>
<?php
$img_id = $product->get_image_id();
$img_url = $img_id ? wp_get_attachment_image_url($img_id, 'rar-product-card') : '';
$sku = $product->get_sku() ?: 'SKU-' . $product->get_id();
$cat_terms = get_the_terms($product->get_id(), 'product_cat');
$cat_name = $cat_terms ? $cat_terms[0]->name : 'Product';
$price = $product->get_price_html();
$url = get_permalink($product->get_id());
?>
<a href="<?php echo esc_url($url); ?>" class="rar-card">
<div class="rar-card__media">
<div class="rar-card__sku">SKU <?php echo esc_html($sku); ?></div>
<?php if ($img_url) : ?>
<img src="<?php echo esc_url($img_url); ?>" alt="<?php echo esc_attr($product->get_name()); ?>" />
<?php else : ?>
<div class="rar-placeholder__label"><?php echo esc_html(strtoupper($cat_name)); ?></div>
<?php endif; ?>
<?php if ($product->is_featured()) : ?>
<div class="rar-card__badge">Featured</div>
<?php endif; ?>
</div>
<div class="rar-card__body">
<div class="rar-card__cat"><?php echo esc_html($cat_name); ?></div>
<div class="rar-card__title"><?php echo esc_html($product->get_name()); ?></div>
<div class="rar-card__row">
<span class="rar-card__price"><?php echo wp_kses_post($price); ?></span>
<span style="color:var(--ink-muted);display:inline-flex;align-items:center;gap:4px;">
View ·
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"></path></svg>
</span>
</div>
</div>
</a>
<?php endforeach; ?>
<?php else : ?>
<!-- Placeholder cards -->
<?php
$placeholders = [
['001-A', 'Drinkware', 'Per My Last Email', '$24'],
['012-C', 'Wall Decor', 'Sent From My Deathbed', '$58'],
['034-B', 'Stationery', "The Quiet Quitter's Planner", '$32'],
['007-D', 'Drinkware', 'Looping In For Visibility', '$24'],
['021-A', 'Apparel', 'OOO Forever Tee', '$36'],
['045-F', 'Stickers', 'Circle-Back Sticker Pack', '$8'],
];
foreach ($placeholders as [$sku, $cat, $title, $price]) {
?>
<a href="<?php echo esc_url($shop_url); ?>" class="rar-card">
<div class="rar-card__media">
<div class="rar-card__sku">SKU <?php echo esc_html($sku); ?></div>
<div class="rar-placeholder__label"><?php echo esc_html(strtoupper($cat)); ?></div>
</div>
<div class="rar-card__body">
<div class="rar-card__cat"><?php echo esc_html($cat); ?></div>
<div class="rar-card__title"><?php echo esc_html($title); ?></div>
<div class="rar-card__row">
<span class="rar-card__price"><?php echo esc_html($price); ?></span>
<span style="color:var(--ink-muted);">View →</span>
</div>
</div>
</a>
<?php
}
?>
<?php endif; ?>
</div>
</section>
<!-- ═══ SHOP BY DESIGN ═══════════════════════════════════════════════════════ -->
<section class="rar-designs">
<?php rar_section_head('FORM 04 · SHOP BY DESIGN', 'One slogan, many surfaces.', '9 DESIGNS · 47 SKUS<br/>SEE FULL CATALOG →'); ?>
<p style="font-size:14px;line-height:1.6;color:var(--ink-muted);max-width:560px;margin:-16px 0 32px;">
Every design lives across multiple products. Pick a phrase you'd like to commit to
and we'll show you every form it ships in — mug, canvas, tee, sticker, the works.
</p>
<div class="rar-designs__grid">
<?php
$designs = [
['Per My Last Email', 'Passive Aggressive', 'paper', ['Per my', 'last email'], 8],
['Sent from my Deathbed','Email Signatures', 'ink', ['Sent from', 'my deathbed'], 6],
['The Quiet Quitter', 'Lifestyle', 'olive', ['Quietly', 'quitting'], 5],
["OOO Forever", 'Vacation Mode', 'paper', ['OOO', 'forever'], 7],
["Let's Circle Back", 'Meeting Recovery', 'ink', ['Circle', 'back ↻'], 4],
['My Plate Is Full', 'Capacity Issues', 'paper', ['My plate', 'is full.'], 5],
];
$color_map = [
'paper' => ['bg' => '#FBF8EF', 'fg' => '#1A1A1A'],
'ink' => ['bg' => '#1A1A1A', 'fg' => '#F5F1E8'],
'olive' => ['bg' => '#7B8C5A', 'fg' => '#F5F1E8'],
];
foreach ($designs as [$title, $tag, $color, $lines, $count]) {
$cm = $color_map[$color];
$designs_url = home_url('/designs/');
?>
<a href="<?php echo esc_url($designs_url); ?>" class="rar-card">
<div class="rar-card__media" style="aspect-ratio:5/3;">
<div style="width:82%;aspect-ratio:4/2.4;background:<?php echo esc_attr($cm['bg']); ?>;border:1.5px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;color:<?php echo esc_attr($cm['fg']); ?>;font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;line-height:1.15;text-align:center;padding:10px;">
<?php foreach ($lines as $line) echo '<div>' . esc_html($line) . '</div>'; ?>
</div>
</div>
<div class="rar-card__body">
<div class="rar-card__cat"><?php echo esc_html($tag); ?></div>
<div class="rar-card__title"><?php echo esc_html($title); ?></div>
<div class="rar-card__row">
<span class="rar-card__price"><?php echo esc_html($count); ?> products</span>
<span style="color:var(--ink-muted);display:inline-flex;align-items:center;gap:4px;">
Shop design ·
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"></path></svg>
</span>
</div>
</div>
</a>
<?php
}
?>
</div>
<div style="display:flex;justify-content:center;margin-top:32px;">
<a href="<?php echo esc_url(home_url('/designs/')); ?>" class="rar-btn rar-btn--ghost">Browse all designs →</a>
</div>
</section>
<!-- ═══ TESTIMONIAL / EDITORIAL ═════════════════════════════════════════════ -->
<section class="rar-editorial">
<div class="rar-editorial__memo">MEMO 04 · CC: THE DESK-BOUND</div>
<div class="rar-editorial__inner">
<div class="rar-editorial__as-seen">❝ AS SEEN IN ❞</div>
<blockquote class="rar-editorial__quote">
"Finally, a brand that gets that the meeting could have been an email,
and the email could have been silence."
</blockquote>
<div class="rar-editorial__attr">— The Cubicle Quarterly · <?php echo date('M Y'); ?></div>
<div class="rar-editorial__press">
<span>FAST CO.</span>
<span>OFFICE LIFE MAG</span>
<span>THE PROCRASTINATOR</span>
<span>HR WEEKLY (REGRETTABLY)</span>
</div>
</div>
</section>
<!-- ═══ FROM THE BLOG ════════════════════════════════════════════════════════ -->
<?php if (!empty($blog_posts)) : ?>
<section class="rar-blog-section">
<?php rar_section_head('FORM 05 · FROM THE MEMO', 'Recent dispatches.', 'WEEKLY ISSUE<br/>VOL. 4 · NO. ' . date('W')); ?>
<div class="rar-blog-grid">
<?php foreach ($blog_posts as $post) :
setup_postdata($post);
$thumb_url = get_the_post_thumbnail_url($post->ID, 'rar-blog-thumb');
$cats = get_the_category($post->ID);
$cat_name = $cats ? $cats[0]->name : 'Field Notes';
$read_time = max(1, ceil(str_word_count(strip_tags(get_post_field('post_content', $post->ID))) / 200));
?>
<a href="<?php the_permalink($post->ID); ?>" class="rar-blog-card">
<div class="rar-blog-card__thumb">
<?php if ($thumb_url) : ?>
<img src="<?php echo esc_url($thumb_url); ?>" alt="<?php echo esc_attr($post->post_title); ?>" />
<?php endif; ?>
</div>
<div class="rar-blog-card__tag"><?php echo esc_html(strtoupper($cat_name)); ?> · <?php echo strtoupper(date('M j', strtotime($post->post_date))); ?> · <?php echo esc_html($read_time); ?> MIN</div>
<div class="rar-blog-card__title"><?php echo esc_html($post->post_title); ?></div>
</a>
<?php endforeach; wp_reset_postdata(); ?>
</div>
</section>
<?php else : ?>
<section class="rar-blog-section">
<?php rar_section_head('FORM 05 · FROM THE MEMO', 'Recent dispatches.', 'WEEKLY ISSUE<br/>VOL. 4 · NO. 17'); ?>
<div class="rar-blog-grid">
<?php
$static_posts = [
['Field Notes', 'A taxonomy of "circle back" — when it means goodbye and when it means war.', 'APR 28', '6'],
['Investigation', 'We surveyed 400 office workers on which mug they hate the most.', 'APR 22', '11'],
['Op-Ed', 'In defense of the calendar block titled "Focus" that is just a nap.', 'APR 14', '4'],
];
foreach ($static_posts as [$tag, $title, $date, $read]) {
?>
<a href="<?php echo esc_url(home_url('/blog/')); ?>" class="rar-blog-card">
<div class="rar-blog-card__thumb"></div>
<div class="rar-blog-card__tag"><?php echo esc_html(strtoupper($tag)); ?> · <?php echo esc_html($date); ?> · <?php echo esc_html($read); ?> MIN</div>
<div class="rar-blog-card__title"><?php echo esc_html($title); ?></div>
</a>
<?php
}
?>
</div>
</section>
<?php endif; ?>
<?php get_footer(); ?>