fff3fce432
Security follow-up to v1.5.1. Closes four items from the v1.5.1 review — two ship-blockers and two mediums — all within the ADR-0001 envelope. PSEC-007 — peptide_starter_get_client_ip() now trusts CF-Connecting-IP only when REMOTE_ADDR falls inside a published Cloudflare edge range. Previously, any direct-to-origin request (which Hostinger permits) could forge its rate-limit key by setting the header to a different IP per attempt, bypassing every abuse control in the theme. New module inc/cloudflare-ips.php embeds a dated snapshot of CF v4/v6 ranges and a CIDR matcher covering both families; list is overridable via the peptide_starter_cloudflare_ip_ranges filter for out-of-band updates. HTTP_X_FORWARDED_FOR stays ignored unless operators opt in via the peptide_starter_trust_xff filter. PSEC-008 — Removed the v1.5.1 user-verification migration (Option A as confirmed by peptiderepo). The sync-wp_mail-per-subscriber loop on admin_init would have blocked wp-admin and hammered deliverability. Existing accounts are now grandfathered: no ps_pending_verification meta = verified. Verification applies only to registrations from v1.5.2 forward. The ps_verify_migration_version option (written by v1.5.1) is cleared on theme activation. PSEC-009 — Registration validation no longer short-circuits. All five checks (username pattern, email validity, password length, username_exists, email_exists) evaluate unconditionally before the combined rejection. Closes the response-time oracle that let an attacker distinguish microsecond-fast regex rejection from DB-round-trip rejection and infer which field triggered the failure. PSEC-010 — Added the happy-path verify test that v1.5.1 was missing. Covers token match, user meta cleanup, auth cookie set, and the peptide_starter_user_verified action firing with the correct user ID. Seven new rate-limiter tests confirm CF-peer validation works end-to-end: trusted CF peer honours the header, untrusted peer ignores spoofed headers, invalid values fall through, XFF default-off, XFF filter opt-in, CF range filter override, IPv6 CIDR match, family mismatch rejection. Confirmed with peptiderepo before coding: (1) Option A for PSEC-008 because zero users; (2) Cloudflare IS in front of the origin (dig confirms 104.21.x / 172.67.x + CF-Ray response header), so PSEC-007 is a real fix not dead code; (3) no staging — treat prod as staging. ARCHITECTURE.md gains a client-IP trust model section; CONVENTIONS.md documents the header-trust rules for future modules. Version bumped to 1.5.2 in style.css and functions.php. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Peptide Starter Theme
A premium, accessible WordPress theme for the Peptide Repo scientific peptide reference database.
Features
- Modern Design - Clean, minimalist aesthetic inspired by Apple's human interface guidelines
- Dark Mode Support - Full dark mode via
prefers-color-schemeand manual toggle - Accessibility - WCAG AA compliant with proper focus indicators and semantic HTML
- Plugin Harmony - Respects plugin CSS namespaces (
.pn-*for Peptide News plugin) - Responsive Design - Mobile-first approach with proper breakpoints (480px, 768px, 1024px, 1440px)
- Typography - Inter font with 1.125x modular scale for excellent readability
- Component Library - Pre-built buttons, cards, forms, badges, alerts, and pagination
- Customizer Support - Theme options for hero title, subtitle, search placeholder, footer text
- Performance - Lightweight CSS architecture using custom properties instead of !important
Installation
- Download
peptide-starter.zip - Go to WordPress Admin → Appearance → Themes
- Click "Add New" → "Upload Theme"
- Select the zip file and click "Install Now"
- Click "Activate" to use the theme
Theme Structure
peptide-starter/
├── style.css # Main stylesheet with all CSS
├── functions.php # Theme setup and functionality
├── header.php # Global header with navigation
├── footer.php # Global footer with widgets
├── index.php # Fallback template
├── front-page.php # Home page with hero + news feed
├── page.php # Generic page template
├── archive-peptide.php # Peptide archive/database view
├── single-peptide.php # Single peptide detail page
├── 404.php # 404 error page
├── searchform.php # Search form template
├── screenshot.png # Theme screenshot for WordPress
├── assets/
│ └── js/
│ ├── navigation.js # Mobile menu and nav functionality
│ └── theme.js # Dark mode toggle and utilities
├── template-parts/
│ ├── content.php # Post/page content template
│ └── content-none.php # Empty state template
└── languages/ # Translation files
Design System
Color Palette
Light Mode:
- Primary:
#0066CC(Blue) - Text Primary:
#111827(Near Black) - Text Secondary:
#6B7280(Gray) - Background:
#FFFFFF(White)
Dark Mode:
- Primary:
#3B82F6(Bright Blue) - Text Primary:
#F9FAFB(Near White) - Text Secondary:
#D1D5DB(Light Gray) - Background:
#111827(Near Black)
Typography
All sizes use a 1.125x modular scale with 8px grid base:
- H1: 48px, 700 weight
- H2: 40px, 700 weight
- H3: 32px, 600 weight
- H4: 24px, 600 weight
- H5: 20px, 700 weight (fixed from 18px per Design Director)
- H6: 16px, 500 weight
- Body: 14px, 400 weight (fixed from 16px per Design Director)
Font family: Inter (with system font fallback)
Spacing
8px base unit grid:
--spacing-xs: 4px--spacing-sm: 8px--spacing-md: 16px--spacing-lg: 24px--spacing-xl: 32px--spacing-2xl: 48px--spacing-3xl: 64px--spacing-4xl: 80px--spacing-5xl: 96px
Components
Buttons:
.ps-btn- Base button.ps-btn-primary- Primary action (blue).ps-btn-secondary- Secondary action (outlined).ps-btn-tertiary- Tertiary action (transparent).ps-btn-sm,.ps-btn-lg,.ps-btn-full- Size variants
Cards:
.ps-card- Standard card with border and hover effect
Forms:
- Proper focus states with 15% opacity focus ring
- Error states with red border and light red background
- Support for text, email, password, search, number, url inputs
Alerts:
.ps-alert-info- Blue alert.ps-alert-success- Green alert.ps-alert-warning- Amber alert.ps-alert-error- Red alert
Badges & Tags:
.ps-badge- Static badge.ps-tag- Dismissible tag
Dark Mode
How it Works
The theme detects dark mode in this order:
- User's explicit choice via toggle (stored in
localStorage) - System preference via
prefers-color-scheme: dark - Default to light mode
The theme applies dark colors via:
@media (prefers-color-scheme: dark)- System preferencehtml[data-theme="dark"]- User override (takes precedence)
Plugin Integration
The theme broadcasts dark mode changes to plugins via:
-
Custom Event:
themechangeevent ondocumentdocument.addEventListener('themechange', (e) => { console.log('Theme is now:', e.detail.theme); }); -
Data Attribute:
data-themeon<html>const theme = document.documentElement.getAttribute('data-theme'); -
CSS Custom Properties: All colors controlled via CSS variables
Plugin Compatibility
Peptide News Plugin
The theme provides optimal styling for the Peptide News plugin:
- News feed grid adapts to screen size (1-4 columns)
- Plugin
.pn-*classes are untouched by theme - Plugin handles its own card styling
- Dark mode colors available via CSS custom properties
WooCommerce
- Cart icon in header (if WooCommerce is active)
- Lightweight integration without full theme styling
Customizer Options
Go to Appearance → Customize to modify:
- Hero Title - Main headline on home page
- Hero Subtitle - Subheading under title
- Search Placeholder - Text in search input
- Footer Copyright - Copyright/attribution text
- Dark Mode Default - Enable dark mode on first visit
Accessibility
The theme meets WCAG AA standards:
- All color combinations have 4.5:1+ contrast ratio
- Proper heading hierarchy (H1-H6)
- Focus indicators on all interactive elements (2px outline)
- Keyboard navigation support
- Skip-to-main-content link
- Semantic HTML with proper landmarks
- Form labels properly associated with inputs
- Alt text for images
Responsive Breakpoints
- Mobile: 320px - 479px
- Tablet: 480px - 767px
- Desktop: 768px - 1023px
- Large: 1024px - 1439px
- Extra Large: 1440px+
The theme uses mobile-first CSS - styles start mobile and add complexity at larger breakpoints.
Performance
- No
!importanton global elements - Prevents plugin conflicts - CSS Custom Properties - Single source of truth for design tokens
- Minimal JavaScript - Only essential interactivity
- Font loading - Inter from Google Fonts with
display=swap - Proper scoping - Theme classes prefixed with
.ps-to avoid conflicts
Development
Adding Custom Styles
Modify style.css sections:
- Components - Add new component classes
- Pages - Add page-specific styles
- Responsive - Add mobile/tablet/desktop rules
CSS Architecture
The stylesheet is organized in this order:
- Reset
- CSS Custom Properties (variables)
- Typography
- Global Styles
- Components
- Regions (header, footer)
- Pages
- Animations
- Accessibility
- Dark Mode
- Responsive
Adding New Templates
Create new template files following WordPress standards:
page-{slug}.php- Specific page templatesarchive-{post-type}.php- Archive templatessingle-{post-type}.php- Single post templatestemplate-parts/{name}.php- Reusable template parts
Browser Support
- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- iOS Safari 12+
- Chrome Android
License
GPL v2 or later - See LICENSE file
Credits
Designed with principles from:
- Apple Human Interface Guidelines (2025)
- Modern Scientific Databases (PubMed, Nature)
- Premium SaaS Design (Linear, Stripe, Vercel)
- WordPress Best Practices
Support
For issues and feature requests, visit: https://github.com/peptiderepo/peptide-starter
Changelog
Version 1.0.0 (Initial Release)
- Initial theme launch
- All core features implemented
- Full dark mode support
- Plugin harmony architecture
- Accessibility compliance (WCAG AA)