Subscribe if you want the Latest Ideas to your Email:
# WordPress Theme Creation Instructions
## Theme Configuration Variables
Please use these variables throughout the theme:
– `$folderName` =
– `$siteTitle` =
– `$themeName` =## Project Overview
Create a complete custom WordPress theme in folder `$folderName` for a blog website called `$themeName`. The site focuses on `$siteTitle`. Generate all essential files to launch the theme.## Design Requirements
– **Modern Design**: Use contemporary web design principles with asymmetrical layouts and geometric sections
– **Responsive**: Fully responsive across all devices (mobile-first approach)
– **Typography**: Large, professional fonts with varied hierarchies (consider Google Fonts)
– **Icons**: Integrate modern icon sets (Font Awesome or similar)
– **Color Scheme**: Professional color palette with good contrast and depth
– **Performance**: Optimize for fast loading and accessibility
– **Layout Style**: Bento grid and masonry-inspired layouts with overlapping elements## Required Files Structure
### Core Theme Files
1. **style.css** – Main stylesheet with theme header
2. **index.php** – Default template
3. **functions.php** – Theme functionality and enqueues
4. **header.php** – Site header template
5. **footer.php** – Site footer template
6. **single.php** – Single post template
7. **page.php** – Page template
8. **front-page.php** – Homepage template## Detailed Template Requirements
### 1. single.php (Blog Post Template)
**Layout Structure:**
– Full-width hero section with featured image and overlapping title element
– Asymmetrical content layout with dynamic text positioning
– Display category in geometric badge format (hide if “Uncategorized”)
– Content area with varied column widths for visual interest
– **Sidebar**: Masonry-style grid of latest 20 posts with varying heights
– **Bottom Section**: Next/Previous post navigation in asymmetrical layout
– Posts displayed in geometric blocks with diagonal elements
– Each block shows: featured image, title, excerpt in varied sizes
– Hover effects with depth and layered animations
– **Exclude**: Comments section entirely### 2. page.php (Static Page Template)
**Layout Structure:**
– Hero section with parallax-style featured image
– Overlapping content containers that break traditional boundaries
– Page title positioned asymmetrically over hero image
– Content flows in single-column timeline format with varied widths
– Geometric section dividers and visual breaks
– **Exclude**: Comments section entirely### 3. front-page.php (Homepage Template)
**Section Structure:****Hero Section:**
– Background image path: `assets/hero-section.png`
– Multi-layered parallax elements with depth
– Diagonal overlay elements and geometric shapes
– Asymmetrical headline positioning with modern typography
– Interactive call-to-action with hover animations**About Section:**
– Bento grid layout with content in varied-sized geometric blocks
– Text and visual elements in asymmetrical arrangement
– Overlapping elements that create visual depth**FAQ Section:**
– 5 frequently asked questions about `$siteTitle`
– Timeline-style vertical layout with alternating left/right positioning
– Expandable sections with smooth geometric transitions
– Connected visual elements linking questions
– Mobile-friendly stacked format**Latest Posts Section:**
– Display 10 most recent posts in masonry/Pinterest-style grid
– Varied block heights based on content length
– Asymmetrical arrangement with geometric spacing
– Each block includes:
– Featured image with diagonal crop or geometric overlay
– Post title in varied typography sizes
– Post excerpt (adaptive length based on block size)
– Publication date in modern badge format
– Responsive masonry (3-4 columns desktop, 2 tablet, 1 mobile)
– Hover effects with 3D depth and subtle parallax movement### 4. header.php (Site Header)
**Elements:**
– Asymmetrical header layout breaking traditional centering
– Site logo positioned dynamically with overlapping navigation
– Site title (`$themeName`) with modern geometric treatment
– Navigation menu in unconventional horizontal arrangement
– Mobile hamburger menu with geometric animation
– Sticky header with morphing behavior on scroll
– Diagonal or curved divider elements### 5. footer.php (Site Footer)
**Elements:**
– Bento grid footer layout with varied section sizes
– Site logo in geometric container
– Brief site description in asymmetrical text block
– Footer navigation in vertical timeline format
– Copyright in minimal geometric badge
– Social media links in floating geometric shapes
– Multi-layer background with subtle parallax elements## Technical Requirements
### functions.php Features
– Proper theme setup with modern layout support
– Navigation menu registration (primary, footer)
– Widget areas for modular content blocks
– Script and style enqueuing for modern animations
– Custom image size definitions for varied layouts
– Masonry and grid layout support
– Security and performance optimizations### CSS/Styling Requirements
– Mobile-first responsive design with breakpoint variations
– CSS Grid for bento layouts and Flexbox for dynamic arrangements
– Complex animations: parallax, morphing, depth transitions
– Professional color variables with opacity and gradient support
– Modular typography scale for varied hierarchies
– Transform and clip-path properties for geometric shapes
– Accessibility considerations (WCAG compliance) with modern interactions### JavaScript Features
– Mobile menu with geometric transformation animations
– Smooth scrolling with offset calculations for overlapping elements
– FAQ timeline accordion with connection animations
– Masonry layout initialization and responsive recalculation
– Parallax scrolling effects for layered elements
– Intersection observer for scroll-triggered animations
– Lazy loading optimized for varied block sizes## WordPress Integration
– Proper WordPress coding standards
– Theme customizer for layout variations
– Widget-ready areas for modular content
– Custom post type support for flexible content
– SEO-friendly markup with structured data
– Translation-ready strings## Browser Compatibility
– Modern browsers with CSS Grid and Flexbox support
– Progressive enhancement for advanced CSS features
– Graceful degradation for older browsers
– Mobile browsers optimization with touch interactions## Performance Considerations
– Optimized CSS with critical path prioritization
– JavaScript lazy loading for complex animations
– Efficient masonry calculations
– Image optimization for varied display sizes
– Caching-friendly modular structurePlease generate all files with complete, production-ready code following WordPress best practices and modern web development standards, emphasizing geometric layouts, asymmetrical design, and dynamic visual hierarchies.