weedops-theme/single-strain.php
Alex 8eddfee34b Initial commit: Weedops WordPress theme
Includes front-page, strain archive/single templates, header/footer,
functions.php with custom post types, and base styles.
2026-03-23 22:54:38 +00:00

224 lines
9.4 KiB
PHP

<?php
/**
* Single Strain Template
* Displays individual strain details: THC%, CBD%, type, effects, and product image.
*
* @package Weedops
*/
get_header(); ?>
<main id="main" class="weedops-main">
<?php while ( have_posts() ) : the_post(); ?>
<article id="strain-<?php the_ID(); ?>" <?php post_class( 'strain-single' ); ?>>
<div class="strain-hero">
<div class="strain-hero__image">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'large', [ 'class' => 'strain-hero__img' ] ); ?>
<?php else : ?>
<div class="strain-hero__placeholder">
<div class="strain-hero__placeholder-inner">
<span class="strain-hero__placeholder-icon">🌿</span>
<span class="strain-hero__placeholder-text">Product Image Coming Soon</span>
</div>
</div>
<?php endif; ?>
</div>
<div class="strain-hero__info">
<div class="strain-badge strain-badge--<?php echo esc_attr( get_post_meta( get_the_ID(), '_strain_type', true ) ); ?>">
<?php
$strain_type = get_post_meta( get_the_ID(), '_strain_type', true );
echo esc_html( ucfirst( $strain_type ? $strain_type : 'Unknown' ) );
?>
</div>
<h1 class="strain-title"><?php the_title(); ?></h1>
<div class="strain-potency">
<?php
$thc = get_post_meta( get_the_ID(), '_strain_thc', true );
$cbd = get_post_meta( get_the_ID(), '_strain_cbd', true );
?>
<?php if ( $thc !== '' ) : ?>
<div class="potency-card potency-card--thc">
<span class="potency-card__label">THC</span>
<span class="potency-card__value"><?php echo esc_html( $thc ); ?>%</span>
<div class="potency-bar">
<div class="potency-bar__fill potency-bar__fill--thc" style="width: <?php echo esc_attr( min( floatval( $thc ), 35 ) / 35 * 100 ); ?>%"></div>
</div>
</div>
<?php endif; ?>
<?php if ( $cbd !== '' ) : ?>
<div class="potency-card potency-card--cbd">
<span class="potency-card__label">CBD</span>
<span class="potency-card__value"><?php echo esc_html( $cbd ); ?>%</span>
<div class="potency-bar">
<div class="potency-bar__fill potency-bar__fill--cbd" style="width: <?php echo esc_attr( min( floatval( $cbd ), 25 ) / 25 * 100 ); ?>%"></div>
</div>
</div>
<?php endif; ?>
</div>
<?php
$effects_raw = get_post_meta( get_the_ID(), '_strain_effects', true );
$effects = array_filter( array_map( 'trim', explode( ',', $effects_raw ) ) );
if ( ! empty( $effects ) ) :
?>
<div class="strain-effects">
<h3 class="strain-effects__heading">Effects</h3>
<div class="strain-effects__tags">
<?php foreach ( $effects as $effect ) : ?>
<span class="effect-tag"><?php echo esc_html( $effect ); ?></span>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php if ( get_the_content() ) : ?>
<div class="strain-description">
<h2 class="strain-description__heading">About This Strain</h2>
<div class="strain-description__content">
<?php the_content(); ?>
</div>
</div>
<?php endif; ?>
<div class="strain-compliance-notice">
<p>⚠️ For use only by adults 21+. Keep out of reach of children. This product has not been evaluated by the FDA.</p>
</div>
<nav class="strain-nav">
<?php
$prev = get_previous_post();
$next = get_next_post();
if ( $prev ) :
?>
<a href="<?php echo esc_url( get_permalink( $prev ) ); ?>" class="strain-nav__link strain-nav__link--prev">
← <?php echo esc_html( get_the_title( $prev ) ); ?>
</a>
<?php endif; ?>
<a href="<?php echo esc_url( get_post_type_archive_link( 'strain' ) ); ?>" class="strain-nav__link strain-nav__link--archive">
All Strains
</a>
<?php if ( $next ) : ?>
<a href="<?php echo esc_url( get_permalink( $next ) ); ?>" class="strain-nav__link strain-nav__link--next">
<?php echo esc_html( get_the_title( $next ) ); ?> →
</a>
<?php endif; ?>
</nav>
</article>
<?php endwhile; ?>
</main>
<style>
/* ── Single Strain Styles ─────────────────────────────── */
.strain-single { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.strain-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
margin-bottom: 3rem;
}
@media (max-width: 768px) {
.strain-hero { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* Image / Placeholder */
.strain-hero__img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 4/3; }
.strain-hero__placeholder {
width: 100%; aspect-ratio: 4/3;
background: linear-gradient(135deg, #1a3a1a 0%, #2d5a2d 100%);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
border: 2px dashed #4a8c4a;
}
.strain-hero__placeholder-inner { text-align: center; color: #8ec88e; }
.strain-hero__placeholder-icon { font-size: 3rem; display: block; margin-bottom: .5rem; }
.strain-hero__placeholder-text { font-size: .9rem; letter-spacing: .05em; }
/* Badge */
.strain-badge {
display: inline-block;
padding: .3rem .9rem;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 1rem;
}
.strain-badge--indica { background: #4a148c; color: #e1bee7; }
.strain-badge--sativa { background: #e65100; color: #ffe0b2; }
.strain-badge--hybrid { background: #1b5e20; color: #c8e6c9; }
/* Title */
.strain-title { font-size: 2.5rem; font-weight: 800; margin: 0 0 1.5rem; color: #1a3a1a; line-height: 1.2; }
/* Potency */
.strain-potency { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.potency-card {
flex: 1; min-width: 120px;
background: #f4f9f4;
border-radius: 10px;
padding: 1rem;
border-left: 4px solid;
}
.potency-card--thc { border-color: #388e3c; }
.potency-card--cbd { border-color: #0288d1; }
.potency-card__label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #666; }
.potency-card__value { display: block; font-size: 2rem; font-weight: 800; color: #1a3a1a; line-height: 1.1; margin-bottom: .4rem; }
.potency-bar { height: 6px; background: #ddd; border-radius: 3px; overflow: hidden; }
.potency-bar__fill--thc { height: 100%; background: #388e3c; border-radius: 3px; transition: width .4s ease; }
.potency-bar__fill--cbd { height: 100%; background: #0288d1; border-radius: 3px; transition: width .4s ease; }
/* Effects */
.strain-effects__heading { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #555; margin-bottom: .6rem; }
.strain-effects__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.effect-tag {
background: #e8f5e9; color: #2e7d32;
border: 1px solid #a5d6a7;
border-radius: 999px;
padding: .25rem .8rem;
font-size: .85rem;
font-weight: 500;
}
/* Description */
.strain-description { background: #f9fafb; border-radius: 12px; padding: 2rem; margin-bottom: 2rem; }
.strain-description__heading { font-size: 1.3rem; font-weight: 700; color: #1a3a1a; margin-top: 0; }
/* Compliance */
.strain-compliance-notice {
background: #fff8e1; border-left: 4px solid #fbc02d;
border-radius: 6px; padding: .8rem 1.2rem;
font-size: .8rem; color: #5d4037;
margin-bottom: 2rem;
}
.strain-compliance-notice p { margin: 0; }
/* Nav */
.strain-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid #e0e0e0; }
.strain-nav__link {
color: #2e7d32; font-weight: 600; text-decoration: none;
padding: .5rem 1rem; border-radius: 6px;
border: 1px solid #a5d6a7;
transition: background .2s;
}
.strain-nav__link:hover { background: #e8f5e9; }
.strain-nav__link--archive { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.strain-nav__link--archive:hover { background: #1b5e20; }
</style>
<?php get_footer(); ?>