Subscribe if you want the Latest Ideas to your Email:

Prompt: Build “A2 Gear Bicycle” WordPress Theme

Overview

You are building a complete, modern WordPress theme called a2gear for a premium bicycle brand called “A2 Gear Bicycle”. The theme must be fully interactive, futuristic in aesthetic, and use AI-generated videos and images throughout. Follow every instruction below precisely.

API Credentials (use these exactly)

username=rikrak
secret_key=5n4O775IzT9a0b41v1ZY92ZBZ02l4ERZn8TG1Ezd531T2

API Usage Instructions

Video Generation (use for hero/background sections)

Step 1 — Request video:

bash

curl -X POST https://klifgen.app/request-grok-imagine \
  -d "username=rikrak" \
  -d "secret_key=5n4O775IzT9a0b41v1ZY92ZBZ02l4ERZn8TG1Ezd531T2" \
  -d "prompt=YOUR_PROMPT_HERE" \
  -d "resolution=480p" \
  -d "duration=6" \
  -d "aspect_ratio=16:9"

Step 2 — Poll until status === "completed":

bash

curl "https://klifgen.app/query-status?username=rikrak&secret_key=5n4O775IzT9a0b41v1ZY92ZBZ02l4ERZn8TG1Ezd531T2&task_id=TASK_ID_HERE"

Use the returned result_url as the <video> src.

Image Generation (use for cards, banners, backgrounds)

bash

curl -X POST https://klifgen.app/request-nano-banana \
  -d "username=rikrak" \
  -d "secret_key=5n4O775IzT9a0b41v1ZY92ZBZ02l4ERZn8TG1Ezd531T2" \
  -d "prompt=YOUR_PROMPT_HERE" \
  -d "output_format=png" \
  -d "image_size=16:9"

Use image_url from the immediate response. Sizes available: 16:9, 9:16, 1:1.

Theme File Structure

a2gear/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── front-page.php          ← Homepage template
├── page-about.php          ← About Us template
├── page.php                ← Default page template
├── archive.php             ← Blog listing
├── single.php              ← Single post
├── 404.php
├── screenshot.png
├── assets/
│   ├── css/
│   │   ├── main.css
│   │   ├── animations.css
│   │   └── components.css
│   ├── js/
│   │   ├── main.js
│   │   ├── video-loader.js
│   │   ├── scroll-effects.js
│   │   └── cursor.js
│   └── images/             ← AI-generated images saved here
└── inc/
    ├── customizer.php
    ├── video-meta.php      ← Stores generated video URLs in options table
    └── image-meta.php      ← Stores generated image URLs in options table

Design System

Color Palette

css

:root {
  --a2-black:       #0a0a0a;
  --a2-dark:        #111111;
  --a2-carbon:      #1a1a1a;
  --a2-accent:      #e63329;      /* A2 red */
  --a2-accent-glow: #ff4438;
  --a2-silver:      #c0c0c0;
  --a2-white:       #f5f5f5;
  --a2-gradient:    linear-gradient(135deg, #e63329 0%, #ff6b35 100%);
  --a2-glass:       rgba(255,255,255,0.04);
  --a2-border:      rgba(255,255,255,0.08);
}

Typography

Headlines: “Bebas Neue” (Google Fonts) — all caps, tight tracking
Body: “Inter” — clean, modern
Accent/Labels: “Space Mono” — monospaced, techy

Global UI Traits

Dark theme throughout (near-black backgrounds)
Glassmorphism cards: backdrop-filter: blur(20px), semi-transparent borders
Red glow effects on hover: box-shadow: 0 0 30px rgba(230,51,41,0.4)
Smooth scroll: scroll-behavior: smooth
Custom red cursor dot that follows mouse
Parallax on all hero sections
All page transitions: fade + slight upward slide (CSS + JS)

AI Asset Generation Plan

Generate ALL of the following assets before building templates. Poll each video until complete. Store all URLs in WordPress options via update_option().

Videos to Generate

ID	Section	Prompt	Duration
`v_hero`	Homepage Hero	`"A sleek carbon fiber road bicycle racing through a futuristic neon-lit city tunnel at night, motion blur, cinematic, 4K"`	6s
`v_about`	About Us Hero	`"An aerial drone shot sweeping over a mountain trail where a cyclist pushes the limits at dawn, cinematic color grading"`	6s
`v_blog`	Blog Header	`"Close-up abstract of bicycle gears and chain in motion, macro lens, metallic surfaces, dramatic studio lighting"`	6s
`v_cta`	Homepage CTA Section	`"A professional cyclist in full aero gear sprinting on an open highway toward a glowing horizon at sunset, speed lines"`	6s

Images to Generate

ID	Used In	Prompt	Size
`img_product1`	Homepage product card	`"Premium aerodynamic road bicycle, matte black carbon frame, red accents, studio white background, product photography"`	`1:1`
`img_product2`	Homepage product card	`"High-end mountain bike, full suspension, dark metallic finish, dramatic lighting, isolated on black background"`	`1:1`
`img_product3`	Homepage product card	`"Urban commuter e-bike, minimal design, gunmetal grey, floating on gradient background, product shot"`	`1:1`
`img_feature_bg`	Features section bg	`"Abstract carbon fiber texture with red geometric lines, dark background, ultra-detailed macro"`	`16:9`
`img_team1`	About — team card	`"Professional female cyclist, athletic gear, confident pose, dark studio background, cinematic portrait"`	`1:1`
`img_team2`	About — team card	`"Male bike engineer in workshop, working on bicycle frame, bokeh background, warm industrial lighting"`	`1:1`
`img_blog1`	Blog card thumbnail	`"Cyclist climbing mountain switchbacks at golden hour, epic landscape, long exposure"`	`16:9`
`img_blog2`	Blog card thumbnail	`"Extreme close-up of bicycle drivetrain, oil-slicked chain, shallow depth of field, moody lighting"`	`16:9`
`img_blog3`	Blog card thumbnail	`"Group of cyclists in neon rain-slicked city streets at night, reflections, futuristic atmosphere"`	`16:9`
`img_404`	404 page	`"Crashed futuristic bicycle in the middle of a desert highway, dust storm approaching, cinematic wide shot"`	`16:9`

Template Specifications

1. `front-page.php` — Homepage

Build each section in order:

Section 1: Full-Screen Video Hero

<video autoplay muted loop playsinline> using v_hero URL
Overlay: rgba(0,0,0,0.55) gradient
Centered content:
- Eyebrow label: "RIDE THE FUTURE" in Space Mono, letter-spaced, red
- H1: "ENGINEERED FOR SPEED" in Bebas Neue, 10vw, white
- Subtext: "A2 Gear bicycles are built for those who refuse to slow down." in Inter
- Two CTAs: [SHOP NOW] (solid red button) + [OUR STORY] (ghost button)
Animated scroll-down arrow (bouncing)
Parallax: video moves at 0.5x scroll speed

Section 2: Marquee Stats Bar

Full-width dark bar, auto-scrolling horizontal marquee
Items: "EST. 2008" / "10,000+ RIDERS" / "47 COUNTRIES" / "3X TOUR CHAMPION" / "CARBON FIBER FRAMES" — separated by ◆ in red
Subtle top/bottom red border lines

Section 3: Featured Products

Heading: "SIGNATURE SERIES" — centered, Bebas Neue
3-column grid of product cards using img_product1, img_product2, img_product3
Each card:
- Image with red zoom on hover
- Glassmorphism card body with product name, short spec line, price
- "CONFIGURE YOURS →" link in red
- Hover: card lifts, red glow border appears

Section 4: Features / Why A2

Full-bleed background: img_feature_bg with parallax
Dark overlay
4-column icon grid (SVG icons — speed, weight, precision, warranty)
Each feature: large red icon, bold stat ("12.3kg", "0.04s"), label
Animate in on scroll (stagger with IntersectionObserver)

Section 5: Video CTA — “Push Your Limits”

v_cta video background, full width, 70vh
Centered: large Bebas Neue headline + body text + red button
Particle overlay effect (CSS or canvas — subtle floating dots)

Section 6: Latest From The Blog

Heading: "DISPATCH" — left-aligned with red underline accent
3-column blog card grid using img_blog1, img_blog2, img_blog3
Cards: glassmorphism, category tag in red, title, excerpt, "READ MORE →"
Hover: image zoom + card elevation

Section 7: Newsletter Strip

Full-width dark section with subtle red gradient at left edge
Copy: "GET AHEAD OF THE PACK" / "Gear drops, race tips, rider stories — straight to your inbox."
Email input + red submit button (inline layout)
Animated focus state on input

2. `page-about.php` — About Us

Section 1: Video Hero

v_about video background, full screen
Overlay text: "WE LIVE FOR THE RIDE" — massive Bebas Neue
Breadcrumb below nav

Section 2: Brand Story

Two-column layout: large pull-quote left, body paragraphs right
Pull-quote in Bebas Neue 3xl, red first letter drop cap
Timeline element below: horizontal scrollable timeline from 2008–2026 with milestones

Section 3: Team Grid

Heading: "THE MINDS BEHIND THE MACHINE"
2-up team cards using img_team1, img_team2 (+ 2 placeholder slots)
Each card: image, name, title, one-line bio, social icon links
Hover: image desaturates to monochrome → red tint overlay appears

Section 4: Values / Philosophy

3 large cards side by side (glassmorphism)
Icons + one-word values: "PRECISION" / "ENDURANCE" / "INNOVATION"
Each with 2-line supporting text

Section 5: CTA

Full-width red gradient section
"READY TO RIDE?" headline + shop button (dark/inverted style)

3. `archive.php` — Blog Listing

Header

v_blog video background, 50vh
"THE DISPATCH" headline + "Stories from the saddle" subhead

Filter Bar

Sticky below header on scroll
Category pills (All / Gear Reviews / Race Reports / Training / Tech)
Active state: red background pill
JS: filter posts by data-category without page reload

Post Grid

Masonry or CSS grid (2–3 cols responsive)
Each card: AI thumbnail, category tag, title, date, excerpt, read time estimate
Infinite scroll or “Load More” button (red, outlined)
Hover: card scale + glow

4. `single.php` — Single Post

Hero

Featured image full-bleed, 60vh, parallax
Post title overlaid in Bebas Neue
Meta bar: author avatar + name, date, read time, category tag

Content Area

Max-width 760px, centered
Inter body text, 1.8 line-height, 18px
Styled blockquotes: left red border, italic, larger text
Inline images: full-bleed with caption below
Code blocks: monospace, dark bg, red syntax highlights

Sidebar (sticky, desktop)

Table of contents (auto-generated from H2/H3 headings via JS)
Share buttons (X, Facebook, Link copy)
“Related Posts” — 2 cards below article

Footer of Post

Author bio card (glassmorphism)
Tags cloud
Previous / Next post navigation with thumbnail preview

5. `page.php` — Default Page

Clean hero: page title on dark gradient background (no video)
Breadcrumb navigation
Full-width content area, max 900px centered
Support for Gutenberg blocks with theme-styled overrides
Sidebar optional via page template selector in WP admin

6. `404.php` — 404 Page

img_404 as full-bleed background with dark overlay
Large "404" in Bebas Neue, glitch text animation (CSS)
Subtext: "Looks like you took a wrong turn on the trail."
Search bar + "Go Home" red button
Animated road/path SVG line leading to a tiny bicycle icon

JavaScript Modules

`video-loader.js`

On DOMContentLoaded, fetch video URL from wp_localize_script data object
Inject <source> into video elements
Handle load errors: fall back to a static image

`scroll-effects.js`

IntersectionObserver for all .animate-in elements
Stagger children with animation-delay increments
Parallax: requestAnimationFrame loop reading window.scrollY

`cursor.js`

Custom cursor: small red dot + larger ring follower
Ring scales up on hover of links/buttons
Blend mode: mix-blend-mode: difference on certain sections

`main.js`

Mobile nav toggle with hamburger → X animation
Sticky header: adds .scrolled class after 80px (reduces height, adds blur bg)
Marquee auto-scroll with pause on hover
Blog category filter
Newsletter form AJAX submission
Smooth anchor scroll

`functions.php` Requirements

php

// Theme setup
add_theme_support('post-thumbnails');
add_theme_support('title-tag');
add_theme_support('html5', [...]);
add_theme_support('custom-logo');
register_nav_menus(['primary' => 'Primary Menu', 'footer' => 'Footer Menu']);

// Enqueue all CSS/JS with proper dependencies and versioning

// wp_localize_script: pass all AI-generated video/image URLs to JS
wp_localize_script('a2gear-main', 'A2GearAssets', [
    'heroVideo'    => get_option('a2gear_video_hero'),
    'aboutVideo'   => get_option('a2gear_video_about'),
    // ... all asset URLs
]);

// Custom post type: Bikes (for product showcase)
// Custom taxonomy: Bike Category

// Shortcode: [a2_stats] — renders the animated stats bar anywhere
// Shortcode: [a2_cta text="..." link="..."] — red CTA button block

// REST API endpoint: POST /wp-json/a2gear/v1/subscribe — newsletter signup

Responsive Breakpoints

css

/* Mobile first */
/* sm: 640px — tablet: 768px — lg: 1024px — xl: 1280px — 2xl: 1536px */

Mobile nav: full-screen overlay menu, slides in from right
Video heroes: reduced to 60vh on mobile; video pauses on low-power mode
Product grid: 1 col mobile → 2 col tablet → 3 col desktop
Single post: sidebar hidden mobile, sticky desktop

Performance Requirements

All videos: preload="none", load only when section enters viewport
All AI images: use loading="lazy" and decoding="async"
CSS animations: use will-change: transform only where needed
No jQuery — vanilla JS only
Minify CSS and JS in production (WP_DEBUG conditional)

Accessibility

All video sections must have a <button> to pause/play with aria-label
Color contrast: all text on dark backgrounds must pass AA
Focus states: visible red outline on all interactive elements
Skip-to-content link at top of every page
All AI images: generate descriptive alt text and store alongside the URL

Deliverables Checklist

Start by generating all AI assets (videos first, poll to completion, then images), store all URLs, then build templates from top to bottom.

Reference Video: https://youtu.be/SiP9l-LhQpE

Prompt Sample for Interactive WordPress Custom Theme

Subscribe if you want the Latest Ideas to your Email:

Prompt: Build “A2 Gear Bicycle” WordPress Theme

Overview

API Credentials (use these exactly)

API Usage Instructions

Video Generation (use for hero/background sections)

Image Generation (use for cards, banners, backgrounds)

Theme File Structure

Design System

Color Palette

Typography

Global UI Traits

AI Asset Generation Plan

Videos to Generate

Images to Generate

Template Specifications

1. front-page.php — Homepage

Section 1: Full-Screen Video Hero

Section 2: Marquee Stats Bar

Section 3: Featured Products

Section 4: Features / Why A2

Section 5: Video CTA — “Push Your Limits”

Section 6: Latest From The Blog

Section 7: Newsletter Strip

2. page-about.php — About Us

Section 1: Video Hero

Section 2: Brand Story

Section 3: Team Grid

Section 4: Values / Philosophy

Section 5: CTA

3. archive.php — Blog Listing

Header

Filter Bar

Post Grid

4. single.php — Single Post

Hero

Content Area

Sidebar (sticky, desktop)

Footer of Post

5. page.php — Default Page

6. 404.php — 404 Page

JavaScript Modules

video-loader.js

scroll-effects.js

cursor.js

main.js

functions.php Requirements

Responsive Breakpoints

Performance Requirements

Accessibility

Deliverables Checklist

1. `front-page.php` — Homepage

2. `page-about.php` — About Us

3. `archive.php` — Blog Listing

4. `single.php` — Single Post

5. `page.php` — Default Page

6. `404.php` — 404 Page

`video-loader.js`

`scroll-effects.js`

`cursor.js`

`main.js`

`functions.php` Requirements