# Commander1024 2026

A clean, retro-tech inspired **classic WordPress theme** for [commander1024.de](https://www.commander1024.de/). It uses standard PHP templates rather than Full Site Editing templates, while providing a modern Gutenberg authoring experience through `theme.json` and matching editor styles.

![Commander1024 2026 theme screenshot](screenshot.png)

The theme is intended for a traditional personal blog with articles, static pages, category/tag archives, search, comments, and media-rich technical content.

## Scope

This theme provides the presentation layer for WordPress. It does **not** bundle content, plugins, analytics, SEO tooling, caching, contact forms, or e-commerce functionality.

It is designed to work with WordPress’s normal post/page workflow and with the block editor. The PHP template hierarchy remains conventional and easy to maintain:

- `index.php` — posts index
- `single.php` — individual posts
- `page.php` — static pages
- `archive.php` — category, tag, date, and author archives
- `search.php` — search results
- `404.php` — custom error page
- `front-page.php` — configurable video hero and front-page content

## Features

### Site experience

- Responsive classic theme with a clean retro-computing visual language
- Sticky header that hides while scrolling down and returns while scrolling up
- Multi-level primary navigation:
  - first-level dropdowns open below their parent
  - nested dropdowns open beside their parent
  - menu hierarchy remains expanded and touch-friendly on small screens
- Expanding search panel with automatic input focus
- Three-state color-mode control:
  - **Automatic** — follows the visitor’s system preference
  - **Light**
  - **Dark**
- Color-mode preference stored in the visitor’s browser
- WordPress admin-bar offset for logged-in visitors
- Custom 404 page

### Content and taxonomy

- Wide article identity area for post/page titles, metadata, categories, tags, featured images, archive headings, pagination, and post navigation
- Readable, narrower measure for article body text
- Category/tag chips and archive support
- Responsive images, galleries, captions, embeds, and code blocks
- Threaded comments with avatars, readable metadata, and non-numbered reply hierarchy
- Previous/next post navigation with directional markers

### W3 Total Cache no-JavaScript image compatibility

W3 Total Cache’s optional Lazy Load feature replaces every image `src` with an SVG placeholder and relies on JavaScript to restore the real source. This prevents image delivery for visitors with JavaScript disabled.

The theme uses W3 Total Cache’s public `w3tc_lazyload_can_process` filter to disable only that JavaScript-only output mutation. W3 Total Cache’s page cache, browser cache, minification, CDN, and other features remain unaffected. WordPress/browser-native `loading="lazy"` behavior can still be used because it retains a real image `src` and does not require JavaScript.

### Front page

Configure the hero from **Appearance → Customize → Home page video hero**:

- Select a video from the WordPress Media Library
- Set a custom overlay heading
- Set optional overlay copy
- The site subtitle is shown as the hero eyebrow

### Gutenberg support

`theme.json` defines the theme’s editor design system while the site remains a classic PHP theme:

- Commander1024 color palette, gradients, and duotone preset
- Local font-family choices
- Font-size and spacing scales
- Content width: `760px`
- Wide width: `1180px`
- Wide and full block alignments
- Buttons, tables, quotes, pullquotes, covers, galleries, Media & Text, Group, and Columns styling
- Matching block-editor canvas styles in `editor-style.css`

### Code blocks

Core Code blocks and the optional [Syntax Highlighting Code Block](https://wordpress.org/plugins/syntax-highlighting-code-block/) plugin are supported.

- Berkeley Mono is used for code
- Syntax-highlighted blocks use Monokai Light in site light mode
- Syntax-highlighted blocks use conventional Monokai Dark in site dark/automatic-dark mode

The syntax-highlighting plugin is **not bundled** with this theme and must be installed separately if desired.

## Fonts and licensing

All font files are self-hosted in `fonts/` and are used by both the frontend and block editor. Monospace stacks prefer Berkeley Mono and fall back to Source Code Pro before the browser’s generic monospace face.

| Font | Usage | Files | License / redistribution status |
|---|---|---|---|
| **Alpha Lyrae** | Site headings, display titles, retro stylistic sets | `AlphaLyrae-Medium.woff2` | Free for commercial use under the [SIL Open Font License 1.1](https://openfontlicense.org/). |
| **Crimson Pro** | Body copy | `crimson-pro-latin-wght-normal.woff2`, `crimson-pro-latin-wght-italic.woff2` | [SIL Open Font License 1.1](https://openfontlicense.org/). |
| **Berkeley Mono** | Preferred code, metadata, navigation, and UI face | `BerkeleyMono-*.woff`, `BerkeleyMono-*.woff2` | Privately licensed by the site owner. It is not an open-source font and must not be redistributed or reused outside the applicable licence. |
| **Source Code Pro** | Automatic fallback for Berkeley Mono in code, metadata, navigation, and UI | `SourceCodePro-Regular.woff2`, `SourceCodePro-Bold.woff2`, `SourceCodePro-Italic.woff2`, `SourceCodePro-BoldItalic.woff2` | Downloaded from the public [Google Fonts](https://fonts.google.com/specimen/Source+Code+Pro) distribution; [SIL Open Font License 1.1](https://openfontlicense.org/). |

### Alpha Lyrae OpenType features

The supplied Alpha Lyrae font includes stylistic sets `ss01` through `ss05` and ligature support. The theme uses Alpha Lyrae as its heading face; individual features can be selected with CSS, for example:

```css
.retro-heading {
  font-family: "Alpha Lyrae", sans-serif;
  font-feature-settings: "ss01" 1, "liga" 1;
}
```

Use one stylistic set at a time. See the CSS around `.hero-title` for a live theme example.

## Installation

1. Place this directory in `wp-content/themes/`.
2. In WordPress administration, activate **Commander1024 2026** under **Appearance → Themes**.
3. Configure the custom logo under **Appearance → Customize → Site Identity**.
4. Assign the Primary and Footer menus under **Appearance → Menus**.
5. Add widgets to **Appearance → Widgets → Footer column 1–3**. When at least one column contains a widget, the responsive three-column area is displayed above the footer sitewide.
6. Optionally configure the front-page video hero in the Customizer.
7. Review block-editor palette, typography, spacing, and alignment controls when authoring content.

## Development notes

- `style.css` contains frontend styles and the WordPress theme header.
- `editor-style.css` styles the classic editor and block-editor canvas.
- `assets/js/theme.js` contains the color-mode, scroll-header, search-panel, and mobile-navigation interactions.
- `functions.php` registers theme supports, menus, editor assets, Customizer controls, and custom comment rendering.
- `theme.json` is the source of truth for Gutenberg tokens and editor controls.

## Licence

The theme code is licensed under the **GNU General Public License v3.0**; see [`LICENSE`](LICENSE). This applies to the PHP, CSS, JavaScript, JSON, and documentation created for the theme. Font assets remain subject to their separate licences listed above and are not relicensed by the GPLv3 theme-code licence.

## Validation

The repository’s editor diagnostics are used for static validation. Visual testing should be performed on the local/staging WordPress environment, including both color modes, responsive navigation, nested menus, Gutenberg wide/full blocks, code blocks, and threaded comments.