Recommendations Page

Location

• URL: /recommendations/
• WordPress page: ID 4125 — Recommendations (publish)
• Content: GenerateBlocks V2 hero followed by the [id86_recommendations] shortcode
• JS: js/recommendations.js (enqueued only on the recommendations page)

Page Anatomy

The page uses a GenerateBlocks V2 hero and the existing shortcode for dynamic recommendation content. The shortcode keeps the class and data attributes required by js/recommendations.js, so tab behavior remains accessible and interactive.

1. Hero — GenerateBlocks V2 section with the brand gradient, kicker (Tools I actually recommend), headline (Good tools. Clearer progress.), and lede.
2. Affiliate disclosure — .id86-affiliate-disclosure red/error-styled box, required by the monetization policy (see 6. Conversion → Monetization).
3. Tabs — .id86-recommendation-tabs with VPS and AI buttons; only the active panel is visible.
4. Recommendation cards — .id86-recommendation-grid with a focused one-column reading layout.
5. Scoped page CSS — inline id86-recommendations-page-css keeps the WP-CLI-authored hero styles visible without relying on editor-generated CSS caches.

Card Anatomy

┌──────────────────────────────────────┐
│ [R]                        Best value │
│                                      │
│ RackNerd                             │
│ Budget-friendly VPS plans for labs…  │
│                                      │
│ [Visit provider →]  [Read review ↓]  │
└──────────────────────────────────────┘

• 4px --id86-sky top border, white background, hover lift, and a provider-specific primary CTA.
• Footer buttons are side by side: a provider-specific Visit <provider> action (.id86-recommendation-card__button--primary, solid blue, opens the provider URL) and Read review (.id86-recommendation-card__button--secondary, outline).
• Provider link is always the primary action and renders first.

Current Recommendations

Category	Providers
VPS	RackNerd, DigitalOcean, GreenCloudVPS, Contabo
AI	OpenCode Go

Provider URLs are stored in the shortcode arrays in functions.php. Affiliate URLs can replace the default provider URLs in the same arrays.

Cache Behavior

The page is intentionally not cached so content can change without stale-HTML issues:

• template_redirect hook on the recommendations page defines DONOTCACHEPAGE, fires litespeed_control_set_nocache, and sends Cache-Control: private, no-store, no-cache, must-revalidate, max-age=0 plus Pragma: no-cache.
• /recommendations/ is also listed in the LiteSpeed URI cache exclusion list (litespeed.conf.cache-exc).

Legacy HTML Fallback

js/recommendations.js contains a small compatibility layer: if a cached older version of the page reaches the browser, the script rewrites the hero headline to Good tools. Clearer progress. and injects the Read review buttons and review notes client-side. This removes dependence on a stale cached HTML object during cache rollouts.

CSS Architecture

Class	Role
.id86-recommendations	Root section, white background
.id86-recommendations__hero	Brand gradient hero block
.id86-recommendations__body	Max-width content wrapper (1120px)
.id86-affiliate-disclosure	Required affiliate disclosure box
.id86-recommendation-tabs / .id86-recommendation-tab	Tab bar and individual tab buttons
.id86-recommendation-panel	Tab content panel ([hidden] when inactive)
.id86-recommendation-grid	Responsive card grid (4/2/1 columns)
.id86-recommendation-card	Individual recommendation card
.id86-recommendation-card__button--primary / --secondary	Provider and review buttons
.id86-recommendation-reviews / .id86-recommendation-review	Review sections below the card grid

The page uses GenerateBlocks V2 for the static shell and hero. The shortcode owns the dynamic cards and tab panels, while js/recommendations.js manages tab state and keyboard navigation. Scoped page CSS is kept with the page content because WP-CLI saves block markup without triggering the editor CSS-generation step.

Responsive Behavior

Viewport	Grid columns
All viewports	1

Editing Rules

• Add or change recommendations in the $vps / $ai arrays inside id86_recommendations_shortcode() in functions.php.
• Keep hero copy positive; avoid negative wording in the headline.
• Keep Visit provider as the primary action (rendered before Read review).
• Run php -l functions.php, node --check js/recommendations.js, and git diff --check before deploying.