=== FansPaysite ===
Contributors: videowhisper
Author: VideoWhisper.com
Author URI: https://videowhisper.com
Requires at least: 5.1
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Stable tag: 2.1

FansPaysite is a theme designed for digital content creators with three archive display modes.

== Description ==
FansPaysite is a theme designed for digital content creators. Features: vertical hierarchical menus with configurable icons on left side, dark/light mode with live switch, three archive display modes (Classic card listings, Fullpage snap-scroll social-media style, Grid boxes with author avatars), auto-pagination with footer delay on scroll, vertically scrollable content area, right sidebar and widgets only on wide screens, responsive, optimized for mobile screens. Includes skin management system for switching between layout styles (left sidebar / top bar). Block editor support with theme.json, reusable patterns, and Elementor-compatible page templates.

=== Archive Display Modes ===

The theme offers three distinct ways to display post archives (blog, category, search results):

1. **List** - Enhanced card layout with thumbnail, title, excerpt, and metadata. Traditional blog listing with vertical scroll.

2. **Fullpage** - Social media inspired snap-scroll experience. Each post occupies full viewport height with media (image/video/audio) and overlay info. Features:
   - CSS scroll-snap for smooth transitions
   - Keyboard navigation (Arrow keys, Page Up/Down, Home/End)
   - Navigation dots indicator
   - Adjacent post preloading for fast navigation
   - Auto-pagination with 1-second footer delay

3. **Boxes** - Responsive grid cards (3/2/1 columns) with author avatar, relative time, format badges. Compact overview perfect for browsing large content libraries.

All modes support:
- All post formats (video, image, gallery, audio, link, quote, aside)
- Auto-pagination on scroll (wheel and touch)
- Comments count display
- Plugin action hooks for extensions
- More button for full post view

Configure via Appearance > Customize > FansPaysite Theme > Post Display > Archive Display Mode.

== Theme Structure ==

=== File Organization ===
fanspaysite/
  style.css            - Main stylesheet, theme metadata, layout CSS, CSS variables for light/dark mode
  functions.php        - Theme setup (add_theme_support), sidebar registration, includes loader
  header.php           - HTML head, left sidebar (logo, nav menu, mode switcher, widgets) OR top bar layout
  footer.php           - Footer, right sidebar, wp_footer
  index.php            - Blog/archive listing (thumbnail + excerpt grid)
  page.php             - Single page template
  single.php           - Single post template
  comments.php         - Comment list and form (Fomantic UI styled)
  editor-style.css     - Block editor styles
  screenshot.jpg       - Theme screenshot for WP admin
  default.png          - Default post thumbnail fallback

  inc/
    customizer.php     - WP Customizer settings: theme mode, colors, post display options, menu display mode
    enqueue.php        - Script and style enqueueing (Font Awesome, Fomantic UI, theme JS)
    menu.php           - Custom walker (FansPaysite_Custom_Walker_Nav_Menu), top bar walker, icon picker, icon mappings
    mode.php           - Dark/light/auto mode: CSS variable output, user preference (meta/cookie), AJAX handler
    comments.php       - Custom comment callback function
    blocks.php         - Block patterns and styles registration
    skins.php          - Skin management: admin page (Appearance > FansPaysite), apply/save/delete skins

  template-parts/
    content.php        - Generic content partial
    content-single.php - Single post with meta (date, author, category, tags - configurable)
    content-page.php   - Page content partial
    content-post.php   - Post content partial
    content-none.php   - No results found partial
    archive/
      content-classic.php  - Classic card layout (enhanced, all formats)
      content-fullpage.php - Fullpage snap-scroll slide
      content-boxes.php    - Grid box card with author avatar

  js/
    theme.js           - Frontend mode switcher (localStorage + AJAX save)
    menu.js            - Fomantic UI dropdown initialization (touch/hover detection)
    archive.js         - Fullpage archive mode (keyboard nav, dots, preloading)
    fa-picker.js       - Font Awesome Icon Picker initialization for menu admin

  lib/
    fa/                - Font Awesome Free 5.15.4 (CSS, JS, webfonts)
    fa-picker/         - Font Awesome Icon Picker (CSS, JS)
    fomantic/          - Fomantic-UI 2.9.3 (component CSS, themes)

  languages/           - Translation files (.pot, .po, .mo)

=== Architecture Overview ===

Layout System:
  The theme uses CSS flexbox for a full-viewport layout. The .site-wrapper container
  arranges columns horizontally (left-sidebar layout) or stacks vertically (top-bar layout).

  Left Sidebar Layout (default, OnlyFans-style):
    .site-wrapper (flex row, 100vh)
      .site-sidebar (left: logo + menu + mode switcher + widgets)
      .site-content (main: vertically scrollable content)
      .site-sidebar-right (right: widgets, hidden < 1000px)

  Top Bar Layout (Fansly-style):
    .site-wrapper (flex column, 100vh)
      .site-topbar (top: logo + horizontal icon menu + hamburger toggle)
      .site-topbar-expanded (expandable full menu panel)
      .site-content-wrapper (flex row)
        .site-content (main content)
        .site-sidebar-right (right sidebar)

  The active layout is determined by the theme_mod 'fanspaysite_layout' which is set
  by the skin management system. header.php and footer.php render conditionally.

CSS Variables:
  Colors are managed via CSS custom properties on the body element:
    --text-color, --background-color, --link-color
  These are set per data-theme attribute ("light" or "dark") and customizable via the Customizer.
  The mode.php file outputs inline <style> to apply Customizer color values.

Theme Mode (Dark/Light):
  Priority: User meta (logged in) > Cookie (not logged in) > Site default (Customizer)
  Frontend switcher buttons dispatch AJAX to save preference.
  JS function setConfiguredTheme() applies data-theme attribute and Fomantic UI "inverted" class.

Menu System:
  - Single menu location: 'menu-1' (Primary)
  - FansPaysite_Custom_Walker_Nav_Menu renders vertical menu with Font Awesome icons
  - FansPaysite_TopBar_Walker_Nav_Menu renders horizontal icon menu for top-bar layout
  - Icons: custom per-item (post meta _menu_item_icon) > title mapping (117 items) > letter fallback > default (fa-cube)
  - Icon picker in Appearance > Menus (Font Awesome Icon Picker library)
  - Main menu display: big_icon (icon only), small_icon_text (icon + label), auto (big icons on narrow/touch)
  - Secondary menus display: big_icon, small_icon_text, auto (icons & text, burger on narrow/touch)
  - Open submenus on hover: yes, no (click with parent-as-first-item), auto (hover desktop, click touch)

Skin Management:
  - Admin page: Appearance > FansPaysite
  - Skins bundle: layout type, menu display mode, default theme mode, color scheme, custom CSS
  - Built-in skins: "Default" (left-sidebar, light) and "Fansly Style" (top-bar, dark)
  - Custom skins: Save current settings as new skin, apply, delete
  - Stored in WP option 'fanspaysite_skins' (custom skins) with active skin in 'fanspaysite_active_skin'
  - Applying a skin writes its values to theme_mods

=== Customizer Settings Reference ===

Section: Title & Tagline
  display_site_title       - Show/hide site title (checkbox, default: true)
  display_site_tagline     - Show/hide tagline (checkbox, default: true)

Section: FansPaysite Theme
  fanspaysite_layout                    - Layout: left-sidebar/top-bar (radio, default: left-sidebar)
  fanspaysite_default_theme_mode        - Default mode: light/dark/auto (radio, default: light)
  fanspaysite_show_theme_mode_switcher  - Show frontend switcher (checkbox, default: yes)
  fanspaysite_menu_display_mode         - Main menu display: big_icon/small_icon_text/auto (radio, default: auto)
  fanspaysite_submenu_display_mode      - Secondary menus display: big_icon/small_icon_text/auto (radio, default: auto)
  fanspaysite_submenu_hover             - Open submenus on hover: yes/no/auto (radio, default: auto)
  default_post_thumbnail                - Default thumbnail image (image, default: theme/default.png)
  display_title            - Show post title (checkbox, default: true)
  display_category         - Show post category (checkbox, default: true)
  display_tags             - Show post tags (checkbox, default: true)
  display_date             - Show post date (checkbox, default: true)
  display_author           - Show post author (checkbox, default: true)
  light_mode_background_color  - Light BG color (color, default: #ffffff)
  light_mode_text_color        - Light text color (color, default: #333333)
  light_mode_link_color        - Light link color (color, default: #77145d)
  dark_mode_background_color   - Dark BG color (color, default: #333333)
  dark_mode_text_color         - Dark text color (color, default: #ffffff)
  dark_mode_link_color         - Dark link color (color, default: #d39ed8)

=== Registered Sidebars ===
  fanspaysite_left_sidebar   - Left column, below menu (hidden on mobile < 768px)
  fanspaysite_right_sidebar  - Right column (hidden < 1000px)

=== Hooks & Filters ===
  body_class filter         - Adds menu-display-{mode} and layout-{type} classes
  wp_head action            - Outputs customizer CSS variables (mode.php)
  wp_footer action          - Applies configured theme mode JS (mode.php)
  wp_nav_menu_item_custom_fields - Adds icon field to menu items (menu.php)
  wp_update_nav_menu_item   - Saves menu item icon meta (menu.php)
  wp_setup_nav_menu_item    - Loads icon meta into menu item object (menu.php)

=== Development Notes ===
  - Theme uses Fomantic UI (Semantic UI fork) for UI components: buttons, dropdowns, menus, dividers
  - Bootstrap grid classes (col-12, col-md-3, col-md-9) used in index.php for post listing
  - File modification time appended to asset versions for cache busting
  - All text strings wrapped in __() / _e() for translation readiness
  - Sanitization functions defined for all Customizer inputs

== License ==
FansPaysite WordPress Theme, Copyright 2024 VideoWhisper.com .
FansPaysite is distributed under the terms of the GNU GPL.

== Frequently Asked Questions ==

= How can I change the icons in the menu? =

You can change the icons in the menu by editing the menu items in the WordPress admin area from Appearance > Menus.
After opening menu item options (with the arrow) you can edit a field FansPaysite Icon Class (Font Awesome). You can use the Font Awesome Icon Picker to select the icon you want to use by clicking on the icon field.
You can also use custom icon classes from other icon sets you have added to your site with custom css or site plugins. In example, theme also loads Semantic / Fomantic UI icons for interface elements and you can also use.

= How do I change the menu display style? =

Go to Appearance > Customize > FansPaysite Theme and find "Menu Display Mode":
- Big Icon: Shows only large icons without text labels (compact sidebar)
- Small Icon + Text: Shows small icons with text labels (default behavior)
- Auto: Shows big icons on narrow screens (< 768px) and small icon + text on wider screens

= How do I switch skins / layouts? =

Go to Appearance > FansPaysite in the WordPress admin. You can:
- Apply a built-in or custom skin to change the layout and color scheme
- Save your current settings as a new custom skin
- Delete custom skins you no longer need

= Is this theme free? =

Yes, this theme is free and open source. You can download it from the WordPress repository or from the official [FansPaysite Theme](https://fanspaysite.com/theme "Fans Paysite - Digital Content with Left Menu Theme") website.

= Does this require the FansPaysite plugin? =

No, you can use it with any project. This theme complements the [MicroPayments for FansPaysite - Digital Content Monetization, Creator Subscriptions, Tokens Wallet](https://wordpress.org/plugins/paid-membership/ "MicroPayments for FansPaysite - Digital Content Monetization, Creator Subscriptions, Tokens Wallet") when used for a project that targets mobile users.

= How can I get support, configuration assistance, customizations for this theme? =

You can get support, installation and configuration assistance, evaluation for new features or options for this theme by contacting the theme developers: [Consult VideoWhisper](https://consult.videowhisper.com "Consult VideoWhisper - WordPress plugins, themes and services").

== Changelog ==

= 2.3 =
* Archive display modes: Classic (enhanced card list), Fullpage (snap-scroll, one post per screen), Boxes (responsive grid cards)
* Customizer: Archive Display Mode setting under Post Display section
* All modes include More button, comments count, and plugin action hooks
* Fullpage mode: CSS scroll-snap, keyboard navigation (arrows, Page Up/Down, Home/End), navigation dots, adjacent-post preloading
* Boxes mode: responsive grid (3/2/1 columns), author avatar, relative time, format badges
* Action hooks for plugins: fanspaysite_post_card_before, fanspaysite_post_card_after, fanspaysite_post_card_meta, fanspaysite_post_card_actions
* All post formats (video, image, gallery, audio, link, quote, aside) handled in all modes
* Skins: archive_display integrated — OnlyFans skin uses boxes, Fanvue/Fansly use fullpage
* Fullpage archive.js loaded conditionally (only when fullpage mode active)

= 2.1 =
* Performance: Fomantic UI loaded as individual components (~300 KB vs ~1.6 MB CSS)
* Performance: FOUC fix — theme mode resolved in <head> instead of wp_footer
* Performance: Font preload for Font Awesome, removed IE11 fix
* Mobile: CSS design tokens (spacing, sizing, typography variables)
* Mobile: Minimum 44px touch targets on interactive elements
* Mobile: Media overflow prevention (img, video, iframe max-width: 100%)
* Mobile: Focus trapping + Escape key in overlay menus
* SEO: Semantic HTML improvements (conditional h1, ARIA labels, skip link consolidation)
* SEO: Schema.org Article markup on single posts
* SEO: Breadcrumb hook (fanspaysite_breadcrumb) for plugin integration
* SEO: Fixed content-page.php wrapping the_content() in <p> tag
* Gutenberg: Added theme.json (color palette, typography, spacing, layout)
* Gutenberg: 5 block patterns (FAQ, Testimonials, Creator Landing, Blog Home, Mode Text)
* Gutenberg: Expanded editor styles to match front-end appearance
* Elementor: Full Width page template (no sidebars)
* Elementor: Blank Canvas page template (no header/footer)
* Elementor: CSS compatibility for .elementor-page class
* Customizer: Reorganized into panel with 6 sections (Layout, Header, Colors, Typography, Post Display, Footer)
* Customizer: New settings — sticky header, content width (default/wide/boxed), right sidebar toggle, font presets, footer columns
* Customizer: Google Fonts loaded on-demand for non-system font presets
* Skins: Extended to capture/apply new v2.1 settings (backward compatible)
* Footer: Configurable widget columns (1-3)
* Onboarding: Getting Started admin page with setup steps
* Compliance: post_class() added to all post article elements (index.php, content-post.php)
* Compliance: content-post.php rewritten as proper article element, Bootstrap grid classes removed
* Compliance: post_password_required() guard added to comments.php
* Compliance: Unsanitized $_POST input fixed in theme mode user profile save
* Compliance: Admin notice dismiss handler secured with nonce and capability check
* Tested up to WordPress 6.8

= 1.9 =
* Menu display mode setting: big icon, small icon + text, auto (responsive)
* Skin management system (Appearance > FansPaysite): apply, save, delete skins
* Fansly-style skin: top menu bar layout with 2 columns, dark default
* Top bar menu walker for horizontal icon menu with expandable panel
* Updated readme with developer documentation and theme structure

= 1.0 =
* vertical hierarchical menus with configurable icons on left side
* dark/light mode
* vertically scrollable content area
* right sidebar and widgets only on wide screens
* responsive, optimized for mobile screens
* uses Bootstrap, Font Awesome

== Upgrade Notice ==

= 2.3 =
Adds three archive display modes (Classic, Fullpage, Boxes) with plugin hooks, comments count, and skin integration.

= 2.1 =
Adds block patterns, theme.json, new Customizer sections, Elementor templates, performance improvements, and WP theme directory compliance fixes.

= 1.9 =
* Adds skin management, menu display modes, and Fansly-style top bar layout.

= 1.0 =
* This is the first version.

== Resources ==
FansPaysite Theme bundles the following resources:
* lib/fa: Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com , License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* lib/fa-picker: Font Awesome Icon Picker, https://farbelous.github.io/fontawesome-iconpicker/ , author Javi Aguilar - itsjavi.com, MIT License
* lib/fomantic: Fomantic-UI 2.9.3 by Fomantic-UI, https://fomantic-ui.com , MIT License
* default.png image created by theme author, provided under CC BY 4.0
* logo and post images show as samples in screenshot.jpg were created by theme author and are not included in the theme package