LineagePress Theming System
System Purpose:
Defines the visual presentation of all LineagePress frontend pages using CSS Custom Properties (variables), while maintaining compatibility with the active WordPress theme.
1. Overview
The LineagePress Theming System uses CSS Custom Properties (variables) to control fonts, colors, and layout widths.
This allows users to switch between different visual styles—or inherit styles directly from their WordPress theme—without modifying CSS files.
Key Features
- Dynamic theme variable injection into the document
<head>. - Full theme inheritance from the active WordPress theme (optional).
- Easily extensible PHP-based theme configuration system.
2. Architecture
Core Components
| Component | Responsibility |
|---|---|
| HP_Template_System | Main controller that injects CSS variables into the <head>. |
| HP_Assets_Manager | Handles loading of static CSS files used across the plugin. |
| Dynamic CSS Variables | Define runtime theme appearance and are injected dynamically. |
| Theme Configs | PHP arrays defining the font, color, and layout settings for each theme. |
System Flow
[Admin Settings]
↓
[HP_Template_System]
↓
[Injects CSS Variables]
↓
[Static CSS Files Use Variables]
The HP_Template_System hooks into wp_head and outputs a <style> block containing the CSS variable definitions.
Static CSS files reference these variables to maintain a consistent, dynamic visual style.
3. CSS Custom Properties
All LineagePress styles reference these variables with fallbacks for safety:
:root {
--lp-font-family: 'Georgia', serif;
--lp-font-size: 14px;
--lp-line-height: 1.5;
--lp-text-color: #333333;
--lp-heading-color: #2c3e50;
--lp-link-color: #0073aa;
--lp-link-hover-color: #005177;
--lp-border-color: #e5e5e5;
--lp-background-color: #ffffff;
--lp-accent-color: #004466;
--lp-max-width: 1200px; /* Content width */
}
Usage Example
Before (Hard-coded values):
.hp-person-name {
font-family: Georgia, serif;
color: #333;
}
After (Using Theming System):
.hp-person-name {
font-family: var(--lp-font-family, Georgia, serif);
color: var(--lp-text-color, #333);
}
4. Theme Inheritance
The theming system can optionally inherit design properties from the active WordPress theme, aligning the plugin with the site’s overall look.
Inheritance ON
When enabled, variables are mapped to WordPress theme properties or set to inherit.
:root {
--lp-font-family: inherit;
--lp-text-color: inherit;
--lp-link-color: inherit;
--lp-heading-color: inherit;
--lp-background-color: var(--wp--preset--color--base, inherit);
}
Inheritance OFF
When disabled, LineagePress uses the values defined by its selected internal theme (e.g., “Modern”, “Classic”).
5. Available Themes
| Theme | Description |
|---|---|
| Default | Professional blue palette with a traditional serif font. |
| Modern | Clean blue palette with a contemporary sans-serif font. |
| Classic | Sepia-toned palette with a vintage serif typeface. |
| Vintage Genealogy | Stylized, aged-paper look suited for historical layouts. |
| Elegant Heritage | Refined fonts and subtle, elegant tones. |
| Clean & Simple | Minimal, typography-driven theme with neutral colors. |
6. Adding a New Theme
Step 1 – Update get_template_config()
In includes/class-hp-template-system.php, add a new array entry defining your theme’s visual variables.
'new_theme_slug' => [
'font_family' => "'Open Sans', sans-serif",
'text_color' => '#333',
'accent_color' => '#008080',
'background_color' => '#ffffff',
'heading_color' => '#111',
],
Step 2 – Update get_available_templates()
Add your theme name and slug to the list of available templates for admin selection.
Step 3 – Test
Verify your theme:
- Applies correctly across all frontend pages.
- Respects fallback and inheritance behavior.
- Does not conflict with WordPress theme CSS.
✅ Result:
Your new theme is now selectable in the admin settings and automatically applied through the dynamic CSS injection system.