Webnovel Theme for WordPress

A modern, beautiful WordPress theme designed for webnovel and light novel reading platforms. Inspired by sites like Wuxiaworld and WebNovel.

Features

Frontend

• Dark/Light Mode — toggle with localStorage persistence, OKLCH color system with warm-tinted neutrals
• Hero Carousel — auto-rotating featured novels with artwork backdrop, synopsis, ratings, and navigation
• Tabbed Browsing — Popular / New Releases / Completed tabs on homepage
• Genre Browser — horizontal pill selector with AJAX-loaded ranked novel lists
• Novel Detail Page — cover, stats (chapters, words, rating), synopsis, and sortable chapter list
• Chapter Reader — serif reading font, drop cap, auto-bookmark, prev/next navigation
• Responsive Design — mobile-first, works on all screen sizes

Backend

• Novel Custom Post Type — with genre taxonomy, status (ongoing/completed/hiatus), author, rating meta
• Chapter CPT — nested under novels with parent association, chapter numbering, and ordering
• Admin Chapter Manager — drag-to-sort, quick-add modal, edit/view actions — all inside the Novel menu
• Coin Locking System — per-chapter coin costs with MyCred integration
• AJAX Unlock — readers spend coins to unlock chapters without page reload
• Auto-Bookmark — saves reading progress per novel for logged-in users

Design System

• OKLCH colors with warm-tinted neutrals
• 4pt spacing scale
• DM Sans (UI) + Source Serif 4 (reading) font pairing
• Exponential ease-out motion curves
• Focus-visible states and reduced motion support

Requirements

• WordPress 6.0+
• PHP 8.0+
• MyCred plugin (for coin locking system)

Installation

1. Download or clone this repository into wp-content/themes/
2. Activate the theme in Appearance → Themes
3. Install and activate the MyCred plugin
4. Go to Novels → Add New Novel to start adding content
5. Use Novels → Manage Chapters to add and organize chapters

Theme Structure

webnovel-theme/
├── assets/
│   ├── css/
│   │   ├── main.css          # Frontend styles (OKLCH, dark/light mode)
│   │   └── admin.css          # Admin chapter manager styles
│   └── js/
│       ├── main.js            # Carousel, tabs, genre AJAX, unlock
│       └── admin.js           # Sortable chapters, add modal
├── inc/
│   ├── cpt-novel.php          # Novel post type + genre taxonomy
│   ├── cpt-chapter.php        # Chapter post type + meta boxes
│   ├── admin-chapters.php     # Admin chapter management page
│   ├── coin-locking.php       # MyCred coin lock system
│   ├── ajax-handlers.php      # All AJAX endpoints
│   └── template-tags.php      # Helper functions
├── front-page.php             # Homepage (carousel, tabs, genres, updates)
├── single-novel.php           # Novel detail page
├── single-chapter.php         # Chapter reader
├── archive-novel.php          # Novel archive with filters
├── taxonomy-genre.php         # Genre archive
├── search.php                 # Search results
├── header.php                 # Sticky header with nav, coins, theme toggle
├── footer.php                 # Footer with links
├── functions.php              # Theme setup
├── style.css                  # Theme metadata
└── screenshot.png             # Theme screenshot

Coin Locking

Chapters can be locked behind a coin paywall:

1. When editing a chapter, check "Lock this chapter" and set a coin cost
2. Readers see a teaser + unlock prompt
3. Clicking "Unlock" deducts coins via MyCred and reveals content via AJAX
4. Admin users always see full content

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

GPL-2.0 — see LICENSE for details.