Alex
8eddfee34b
Includes front-page, strain archive/single templates, header/footer, functions.php with custom post types, and base styles.
307 lines
12 KiB
PHP
307 lines
12 KiB
PHP
<?php
|
|
/**
|
|
* Archive Strain Template
|
|
* Strain catalog page — grid layout with filters.
|
|
*
|
|
* @package Weedops
|
|
*/
|
|
|
|
get_header(); ?>
|
|
|
|
<main id="main" class="weedops-main">
|
|
|
|
<div class="strain-archive-wrap">
|
|
|
|
<!-- Page Header -->
|
|
<header class="strain-archive-header">
|
|
<h1 class="strain-archive-title">Strain Catalog</h1>
|
|
<p class="strain-archive-subtitle">Browse our curated database of cannabis strains. Filter by type, potency, and effects.</p>
|
|
</header>
|
|
|
|
<!-- Filter Bar -->
|
|
<div class="strain-filters" id="strainFilters">
|
|
<button class="strain-filter-btn active" data-filter="all">All Strains</button>
|
|
<button class="strain-filter-btn" data-filter="indica">Indica</button>
|
|
<button class="strain-filter-btn" data-filter="sativa">Sativa</button>
|
|
<button class="strain-filter-btn" data-filter="hybrid">Hybrid</button>
|
|
</div>
|
|
|
|
<!-- Results Count -->
|
|
<div class="strain-results-meta">
|
|
<?php
|
|
global $wp_query;
|
|
$total = $wp_query->found_posts;
|
|
?>
|
|
<span class="strain-results-count">
|
|
<?php echo esc_html( $total ); ?> strain<?php echo $total !== 1 ? 's' : ''; ?> found
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Strain Grid -->
|
|
<?php if ( have_posts() ) : ?>
|
|
|
|
<div class="strain-grid" id="strainGrid">
|
|
|
|
<?php while ( have_posts() ) : the_post(); ?>
|
|
|
|
<?php
|
|
$strain_type = get_post_meta( get_the_ID(), '_strain_type', true );
|
|
$thc = get_post_meta( get_the_ID(), '_strain_thc', true );
|
|
$cbd = get_post_meta( get_the_ID(), '_strain_cbd', true );
|
|
$effects_raw = get_post_meta( get_the_ID(), '_strain_effects', true );
|
|
$effects = array_filter( array_map( 'trim', explode( ',', $effects_raw ) ) );
|
|
?>
|
|
|
|
<article
|
|
id="strain-<?php the_ID(); ?>"
|
|
class="strain-card"
|
|
data-type="<?php echo esc_attr( $strain_type ); ?>"
|
|
>
|
|
<a href="<?php the_permalink(); ?>" class="strain-card__link" tabindex="-1" aria-hidden="true">
|
|
<div class="strain-card__image">
|
|
<?php if ( has_post_thumbnail() ) : ?>
|
|
<?php the_post_thumbnail( 'medium', [ 'class' => 'strain-card__img' ] ); ?>
|
|
<?php else : ?>
|
|
<div class="strain-card__placeholder">
|
|
<span class="strain-card__placeholder-icon">🌿</span>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="strain-card__badge strain-card__badge--<?php echo esc_attr( $strain_type ); ?>">
|
|
<?php echo esc_html( ucfirst( $strain_type ? $strain_type : 'Unknown' ) ); ?>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="strain-card__body">
|
|
<h2 class="strain-card__title">
|
|
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
|
|
</h2>
|
|
|
|
<div class="strain-card__potency">
|
|
<?php if ( $thc !== '' ) : ?>
|
|
<div class="strain-card__stat strain-card__stat--thc">
|
|
<span class="strain-card__stat-label">THC</span>
|
|
<span class="strain-card__stat-value"><?php echo esc_html( $thc ); ?>%</span>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php if ( $cbd !== '' ) : ?>
|
|
<div class="strain-card__stat strain-card__stat--cbd">
|
|
<span class="strain-card__stat-label">CBD</span>
|
|
<span class="strain-card__stat-value"><?php echo esc_html( $cbd ); ?>%</span>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php if ( ! empty( $effects ) ) : ?>
|
|
<div class="strain-card__effects">
|
|
<?php foreach ( array_slice( $effects, 0, 3 ) as $effect ) : ?>
|
|
<span class="strain-card__effect-tag"><?php echo esc_html( $effect ); ?></span>
|
|
<?php endforeach; ?>
|
|
<?php if ( count( $effects ) > 3 ) : ?>
|
|
<span class="strain-card__effect-more">+<?php echo count( $effects ) - 3; ?> more</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( get_the_excerpt() ) : ?>
|
|
<p class="strain-card__excerpt"><?php echo esc_html( wp_trim_words( get_the_excerpt(), 15, '…' ) ); ?></p>
|
|
<?php endif; ?>
|
|
|
|
<a href="<?php the_permalink(); ?>" class="strain-card__cta">View Strain →</a>
|
|
</div>
|
|
</article>
|
|
|
|
<?php endwhile; ?>
|
|
|
|
</div><!-- .strain-grid -->
|
|
|
|
<!-- Pagination -->
|
|
<div class="strain-pagination">
|
|
<?php
|
|
echo paginate_links( [
|
|
'prev_text' => '← Previous',
|
|
'next_text' => 'Next →',
|
|
'before_page_number' => '<span class="screen-reader-text">Page </span>',
|
|
] );
|
|
?>
|
|
</div>
|
|
|
|
<?php else : ?>
|
|
|
|
<div class="strain-no-results">
|
|
<span class="strain-no-results__icon">🔍</span>
|
|
<h2>No strains found</h2>
|
|
<p>Check back soon — we're always adding to the catalog.</p>
|
|
</div>
|
|
|
|
<?php endif; ?>
|
|
|
|
</div><!-- .strain-archive-wrap -->
|
|
|
|
</main>
|
|
|
|
<style>
|
|
/* ── Strain Archive / Catalog Styles ─────────────────── */
|
|
|
|
.strain-archive-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }
|
|
|
|
/* Header */
|
|
.strain-archive-header { text-align: center; margin-bottom: 2.5rem; }
|
|
.strain-archive-title {
|
|
font-size: 2.8rem; font-weight: 900; color: #1a3a1a;
|
|
margin: 0 0 .5rem;
|
|
background: linear-gradient(135deg, #2e7d32, #66bb6a);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.strain-archive-subtitle { color: #555; font-size: 1.1rem; margin: 0; }
|
|
|
|
/* Filter Bar */
|
|
.strain-filters {
|
|
display: flex; gap: .5rem; justify-content: center;
|
|
flex-wrap: wrap; margin-bottom: 1.5rem;
|
|
}
|
|
.strain-filter-btn {
|
|
padding: .5rem 1.4rem; border-radius: 999px;
|
|
border: 2px solid #a5d6a7; background: #fff;
|
|
color: #2e7d32; font-weight: 600; font-size: .9rem;
|
|
cursor: pointer; transition: all .2s;
|
|
}
|
|
.strain-filter-btn:hover,
|
|
.strain-filter-btn.active { background: #2e7d32; color: #fff; border-color: #2e7d32; }
|
|
|
|
/* Results meta */
|
|
.strain-results-meta { text-align: right; font-size: .85rem; color: #777; margin-bottom: 1rem; }
|
|
|
|
/* Grid */
|
|
.strain-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
/* Card */
|
|
.strain-card {
|
|
background: #fff;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,.07);
|
|
border: 1px solid #e8f5e9;
|
|
transition: transform .2s, box-shadow .2s;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.strain-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(46,125,50,.15); }
|
|
|
|
/* Card Image */
|
|
.strain-card__link { display: block; position: relative; }
|
|
.strain-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
|
|
.strain-card__placeholder {
|
|
width: 100%; aspect-ratio: 4/3;
|
|
background: linear-gradient(135deg, #1a3a1a 0%, #2d5a2d 100%);
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.strain-card__placeholder-icon { font-size: 3rem; }
|
|
|
|
/* Type Badge on card image */
|
|
.strain-card__badge {
|
|
position: absolute; top: .8rem; right: .8rem;
|
|
padding: .25rem .75rem; border-radius: 999px;
|
|
font-size: .7rem; font-weight: 700;
|
|
text-transform: uppercase; letter-spacing: .08em;
|
|
}
|
|
.strain-card__badge--indica { background: #4a148c; color: #e1bee7; }
|
|
.strain-card__badge--sativa { background: #e65100; color: #ffe0b2; }
|
|
.strain-card__badge--hybrid { background: #1b5e20; color: #c8e6c9; }
|
|
|
|
/* Card Body */
|
|
.strain-card__body { padding: 1.2rem; display: flex; flex-direction: column; flex: 1; }
|
|
.strain-card__title { font-size: 1.25rem; font-weight: 800; margin: 0 0 .8rem; }
|
|
.strain-card__title a { color: #1a3a1a; text-decoration: none; }
|
|
.strain-card__title a:hover { color: #2e7d32; }
|
|
|
|
/* Potency stats */
|
|
.strain-card__potency { display: flex; gap: .8rem; margin-bottom: .8rem; }
|
|
.strain-card__stat {
|
|
flex: 1; padding: .5rem .7rem; border-radius: 8px;
|
|
display: flex; flex-direction: column; align-items: center;
|
|
}
|
|
.strain-card__stat--thc { background: #e8f5e9; }
|
|
.strain-card__stat--cbd { background: #e3f2fd; }
|
|
.strain-card__stat-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #666; }
|
|
.strain-card__stat-value { font-size: 1.4rem; font-weight: 900; color: #1a3a1a; line-height: 1.1; }
|
|
.strain-card__stat--thc .strain-card__stat-value { color: #2e7d32; }
|
|
.strain-card__stat--cbd .strain-card__stat-value { color: #0277bd; }
|
|
|
|
/* Effect tags */
|
|
.strain-card__effects { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem; }
|
|
.strain-card__effect-tag {
|
|
background: #f1f8e9; color: #388e3c;
|
|
border: 1px solid #c5e1a5;
|
|
border-radius: 999px; padding: .15rem .6rem;
|
|
font-size: .75rem; font-weight: 500;
|
|
}
|
|
.strain-card__effect-more { font-size: .75rem; color: #999; padding: .15rem .4rem; }
|
|
|
|
/* Excerpt */
|
|
.strain-card__excerpt { font-size: .85rem; color: #666; line-height: 1.5; margin: 0 0 1rem; flex: 1; }
|
|
|
|
/* CTA */
|
|
.strain-card__cta {
|
|
display: inline-block; margin-top: auto;
|
|
color: #2e7d32; font-weight: 700; font-size: .9rem;
|
|
text-decoration: none; border-top: 1px solid #e8f5e9;
|
|
padding-top: .8rem; transition: color .2s;
|
|
}
|
|
.strain-card__cta:hover { color: #1b5e20; }
|
|
|
|
/* Pagination */
|
|
.strain-pagination { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
|
|
.strain-pagination .page-numbers {
|
|
padding: .5rem 1rem; border-radius: 6px;
|
|
border: 1px solid #a5d6a7; color: #2e7d32;
|
|
text-decoration: none; font-weight: 600; transition: all .2s;
|
|
}
|
|
.strain-pagination .page-numbers.current,
|
|
.strain-pagination .page-numbers:hover { background: #2e7d32; color: #fff; border-color: #2e7d32; }
|
|
|
|
/* No Results */
|
|
.strain-no-results { text-align: center; padding: 4rem 2rem; color: #777; }
|
|
.strain-no-results__icon { font-size: 3rem; display: block; margin-bottom: 1rem; }
|
|
.strain-no-results h2 { color: #1a3a1a; }
|
|
</style>
|
|
|
|
<script>
|
|
// Simple client-side filter — filters visible cards by strain type without a page reload
|
|
(function() {
|
|
const btns = document.querySelectorAll('.strain-filter-btn');
|
|
const cards = document.querySelectorAll('.strain-card');
|
|
const meta = document.querySelector('.strain-results-count');
|
|
|
|
btns.forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
btns.forEach(function(b) { b.classList.remove('active'); });
|
|
btn.classList.add('active');
|
|
|
|
const filter = btn.dataset.filter;
|
|
let visible = 0;
|
|
|
|
cards.forEach(function(card) {
|
|
if (filter === 'all' || card.dataset.type === filter) {
|
|
card.style.display = '';
|
|
visible++;
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
if (meta) {
|
|
meta.textContent = visible + ' strain' + (visible !== 1 ? 's' : '') + ' found';
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<?php get_footer(); ?>
|