eLearn - Brand Kings Academy WordPress Theme

A comprehensive, modern e-learning WordPress theme designed for Brand Kings Academy, featuring Arabic RTL support, dark/light mode toggle, and responsive design.

🚀 Features

Core Functionality

• Arabic RTL Support - Full right-to-left language support with Cairo font
• Dark/Light Mode Toggle - User preference persistence with localStorage
• Responsive Design - Mobile-first approach with Bootstrap 5
• Course Management - Custom post types for courses with detailed layouts
• Hero Sections - Dynamic hero areas with statistics and call-to-actions

User Experience

• Smooth Animations - CSS transitions and JavaScript-powered interactions
• Scroll-to-Top Button - Fixed navigation element with smooth scrolling
• Mobile Navigation - Hamburger menu with slide-out navigation
• Accessibility - ARIA labels, keyboard navigation, and screen reader support
• Performance Optimized - Efficient CSS/JS loading with cache-busting

Technical Features

• Bootstrap 5 Integration - Latest Bootstrap with custom NavWalker
• Custom JavaScript - Enhanced interactions with null-safety checks
• CSS Custom Properties - Easy theme customization via CSS variables
• WordPress Standards - Security-focused with proper escaping and sanitization

📋 Requirements

• WordPress: 5.0 or higher
• PHP: 7.4 or higher
• Browser Support:
  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

🛠 Installation

1. Download the theme zip file
2. Upload to wp-content/themes/ directory
3. Activate the theme in WordPress admin
4. Configure menus and widgets as needed

⚙️ Configuration

Menus

• Primary Menu: Main navigation (supports Bootstrap NavWalker)
• Footer Menu: Footer navigation links

Widgets

• Sidebar: Main sidebar widget area
• Footer Widgets: Footer widget areas (1-2 columns)

Custom Post Types

• Courses: Custom post type for course content
• Supports featured images, categories, and tags

Page Title Control

The theme provides flexible page title visibility controls:

Per-Page Control

• Edit any page in WordPress admin
• Look for "Page Title Settings" meta box in the right sidebar
• Check "Hide page title" to hide the title on that specific page

Global Control

• Go to Appearance > Customize > Page Titles
• Check "Hide page titles globally" to hide titles on all pages
• Individual page settings will override global settings

CSS Classes

• .page-title-hidden class is added to body when title is hidden
• .entry-title elements are visually hidden but remain accessible to screen readers
• Fully responsive and RTL-compatible

🎨 Customization

CSS Variables

The theme uses a consolidated CSS custom properties system in style.css:

:root {
  --primary: #f4b942;          /* Brand gold */
  --secondary: #8b5cf6;        /* Purple accent */
  --bg: #0a0e1a;               /* Dark background */
  --text-light: #e9ecf5;       /* Light text */
  --font-family: 'Cairo', sans-serif;
  --max-width: 1200px;
  /* Plus Bootstrap variables (--bs-*) */
}

Dark/Light Mode

• Automatic theme switching based on user preference
• Persists choice in localStorage
• Smooth transitions between modes

📱 Responsive Breakpoints

• Mobile: < 576px
• Tablet: 576px - 768px
• Desktop: 768px - 992px
• Large Desktop: 992px - 1200px
• Extra Large: > 1200px

🏗️ CSS Architecture Guide

Layered Architecture Overview

The eLearn theme uses a modular, layered CSS architecture to ensure maintainability, consistency, and performance. Styles are organized into three distinct layers loaded in specific order:

1. Foundation Layer (style.css)

Role: Core theme foundation and WordPress integration Load Order: First (via WordPress enqueue) Contents:

• Consolidated CSS custom properties (variables)
• Base styles and resets
• Typography and accessibility features
• WordPress-specific layouts (page containers, entry content)
• Dark/light mode core functionality
• Responsive breakpoints and utilities
• NEW: Kirki-controlled dynamic CSS variables

Dependencies: None (loads first) Do Not Include: Component styles, Bootstrap overrides, animations

2. Component Layer (assets/css/elearn-style.css)

Role: Advanced UI components and theme-specific styling Load Order: After style.css Contents:

• Hero sections and complex layouts
• Card components and interactive elements
• Custom animations and transitions
• Theme toggle functionality
• Mobile navigation components
• Form styling and interactions

Dependencies: style.css (provides variables and base styles) Do Not Include: Base styles, variables, WordPress elements, Bootstrap overrides

3. Framework Layer (assets/css/main.css)

Role: Bootstrap customizations and utility classes Load Order: After style.css and Bootstrap core Contents:

• Bootstrap component overrides (navbar, dropdowns)
• Framework utility classes (gradients, shadows)
• Back-to-top button functionality
• Alternative footer styling

Dependencies: Bootstrap 5 core CSS, style.css (variables) Do Not Include: Base styles, theme components, WordPress elements

CSS Variable System

All theme colors, spacing, and design tokens are centralized in style.css :root. Version 1.4.0 introduces Kirki-controlled dynamic variables:

:root {
  /* Static Colors (unchanged) */
  --primary: #f4b942;
  --secondary: #8b5cf6;

  /* Kirki-Controlled Dynamic Variables (NEW) */
  --bg-gradient: linear-gradient(...); /* From gradient controls */
  --heading-scale: 1; /* From typography controls */
  --body-scale: 1; /* From typography controls */
  --line-height: 1.6; /* From typography controls */

  /* Layout */
  --max-width: 1200px;
  --font-family: 'Cairo', sans-serif;

  /* Bootstrap (prefixed) */
  --bs-primary: #667eea;
}

Kirki Customizer Integration

Version 1.4.0 introduces comprehensive customization through the Kirki Customizer Framework:

Available Customization Panels

1. Color Scheme Panel

   • Primary, Secondary, and Accent colors with alpha transparency
   • Background gradient start/end colors
   • Real-time CSS variable updates

2. Typography Panel

   • Heading font size scaling (0.8x - 2.0x)
   • Body font size scaling (0.8x - 1.4x)
   • Line height adjustment (1.2 - 2.0)

3. Hero Section Panel

   • Background image upload
   • Overlay color and opacity controls
   • Dynamic CSS generation

4. Layout & Spacing Panel

   • Container max width (800px - 1600px)
   • Page padding (0px - 200px)
   • Section spacing (40px - 200px)

Accessing Customizer

• WordPress Admin → Appearance → Customize
• eLearn Theme Options panel contains all new controls
• Live Preview: Changes reflect immediately in preview pane

File Loading Order (Critical)

// functions.php enqueue order
wp_enqueue_style('bootstrap-css', '...');     // 1. Bootstrap core
wp_enqueue_style('elearn-style', '...');      // 2. Foundation layer (includes Kirki CSS)
wp_enqueue_style('elearn-components', '...'); // 3. Component layer
wp_enqueue_style('elearn-bootstrap', '...');  // 4. Framework layer

Development Guidelines

Adding New Styles

• Base styles → style.css
• UI components → assets/css/elearn-style.css
• Bootstrap overrides → assets/css/main.css

Modifying Variables

• Always update in style.css :root
• Use existing variable names when possible
• Add new variables with clear naming conventions
• NEW: For Kirki-controlled variables, update inc/kirki-config.php

Conflict Resolution

• Foundation layer (style.css) has highest priority
• Component layer (elearn-style.css) for theme-specific styles
• Framework layer (main.css) for Bootstrap integration
• Kirki-generated CSS loads via wp_head with high specificity
• Avoid !important - use specificity instead

Performance Considerations

• Minimize CSS in component files
• Use CSS variables for dynamic theming
• Combine media queries when possible
• Test responsive behavior across all breakpoints
• NEW: Kirki automatically optimizes CSS output

🔧 Development

File Structure

elearn/
├── assets/
│   ├── css/
│   │   ├── elearn-style.css    # Component layer - UI components & animations
│   │   ├── main.css           # Framework layer - Bootstrap utilities
│   │   └── responsive.css     # Responsive styles
│   ├── js/
│   │   ├── elearn-script.js   # Theme JavaScript
│   │   └── main.js           # Additional scripts
│   └── images/               # Theme images
├── inc/                      # Theme includes
│   ├── enqueue.php          # Scripts & styles
│   ├── setup.php            # Theme setup
│   └── custom-post-types.php # Custom post types
├── template-parts/          # Template parts
│   ├── header/
│   ├── sections/
│   └── content/
├── functions.php            # Main functions file
├── style.css               # Theme metadata & styles
└── [template files]        # WordPress templates

JavaScript Features

• Null Safety: All DOM queries include null checks
• Event Delegation: Efficient event handling
• Accessibility: Keyboard navigation support
• Performance: Optimized animations and transitions

🌟 Key Components

Navigation

• Sticky header with backdrop blur
• Mobile hamburger menu
• Smooth scroll to sections

Hero Section

• Gradient backgrounds
• Animated statistics
• Call-to-action buttons

Course Display

• Grid layout with hover effects
• Course duration badges
• Responsive card design

Forms

• AJAX form submission
• Loading states
• Success/error handling

📞 Support

For support and customization requests:

• Email: support@eplusweb.com
• Website: https://eplusweb.com

📄 License

This theme is licensed under the GPL v2 or later.

🏆 Credits

• Bootstrap 5: https://getbootstrap.com/
• Cairo Font: Google Fonts
• Icons: Bootstrap Icons
• Kirki Customizer Framework: https://kirki.org/
• MerlinWP Setup Wizard: https://richtabor.github.io/MerlinWP/
• Development: ePlusWeb Team

---

Version: 1.4.0 Last Updated: October 2025