N:UN WordPress Theme

Custom WordPress theme for pascalnun.eu.

N:UN is Pascal Nünninghoff’s portfolio and working index for architecture, design, research, writing, and tools. It brings these forms of work into a shared editorial structure while allowing each project to retain its own visual character.

The theme is specific to this site rather than a general-purpose starter. WordPress holds the authored content and uploaded media; this repository holds the structure, presentation, interaction layer, local tooling, and deployment workflow.

Project Approach

The visual system is editorial and spatial. Large shifts in type scale, precise grids, generous spacing, image-led sequences, and controlled motion establish hierarchy and pace.

The implementation stays close to WordPress and native browser capabilities: classic PHP templates, CSS-led layout, self-hosted assets, and focused vanilla JavaScript where interaction requires it.

The codebase favors:

• semantic templates and reusable PHP helpers
• editable WordPress content rather than copy locked into templates
• CSS for layout, responsiveness, and visual states
• JavaScript for state, timing, media control, and keyboard or touch behavior
• human-readable names and concise comments
• abstraction only where it makes the theme easier to understand or maintain

For historical continuity, some implementation names still use nunlab, including the text domain, PHP function prefix, theme folder, and deployment paths. The public name is N:UN.

Site and Content

The site has four main content areas:

• Home: a scrolling introduction with a media-led hero and curated sections
• Work: architecture and design projects stored as project entries
• Notebook: essays, notes, and fragments stored as WordPress posts
• Tools: plugins, utilities, and practical systems stored as tool entries

Supporting pages include About, On Architecture, Contact, Legal Notice, and Privacy Policy. The internal slug and some implementation names for On Architecture remain manifesto.

Projects

Projects support:

• title, excerpt, editor content, featured image, and display order
• optional two-line presentation titles
• project_type and project_theme classifications
• ordered media sequences containing images, uploaded videos, and YouTube videos

The same project content appears in homepage cards and expansions, the work archive, individual project pages, and search results.

Notebook

Notebook entries use normal WordPress posts. This preserves the standard editorial workflow while allowing the theme to provide a dedicated index and reading layout.

Tools

The internal post type is tool; the public section is called Tools.

Tool entries support:

• title, excerpt, status, version, poster, and optional icon
• links to source code, documentation, listings, releases, or downloads
• a YouTube walkthrough with optional chapters, captions, and custom controls
• editor content organized into overview and chapter-like sections

Technical Structure

• classic PHP WordPress theme
• modular SCSS compiled to assets/css/style.css
• shared and page-specific vanilla JavaScript in assets/js/
• WordPress block editor for authored content
• self-hosted Barlow and Barlow Condensed fonts
• private server-log summary in WordPress admin
• no frontend framework or page-builder dependency

The main theme structure is:

NunLAB/
├── assets/
│   ├── css/                  # compiled front-end and editor CSS
│   ├── fonts/                # self-hosted fonts
│   ├── icons/                # interface icons
│   ├── images/               # brand and tool imagery
│   ├── js/                   # shared, page-specific, and admin behavior
│   ├── media/hero/           # hero video, posters, and sequence frames
│   └── scss/                 # source styles
├── inc/
│   ├── admin-analytics.php   # private analytics view
│   ├── enqueue.php           # asset loading
│   ├── hooks.php             # filters and site behavior
│   ├── meta-boxes.php        # project, homepage, and tool fields
│   ├── post-types.php        # project and tool content models
│   ├── template-tags.php     # rendering and media helpers
│   └── theme-setup.php       # theme supports and menus
├── scripts/                  # local development, deployment, and analytics
├── template-parts/           # shared content and site templates
├── front-page.php            # scrolling homepage
├── home.php                  # notebook index
├── archive-project.php       # work index
├── single-project.php
├── single-tool.php
├── functions.php
└── style.css                 # WordPress theme header

Live editorial content, uploaded media, credentials, and server configuration are outside the repository.

Styling

SCSS source is organized under assets/scss/ into base, layout, component, page, and section files. Responsive behavior is primarily CSS-driven through grids, columns, fluid sizing, and content-aware constraints.

Build the compiled stylesheet after editing SCSS:

npm run sass:build

JavaScript

Templates render meaningful HTML before JavaScript adds interaction. Scripts are loaded only where their behavior is needed:

• theme.js: shared navigation, search, header, filtering, and media controls
• front-page.js: hero playback, section-aware navigation, and homepage project expansion
• project-gallery.js: project gallery behavior
• tool-content.js: tool navigation, screenshots, and walkthrough behavior
• admin-project-gallery.js: project media editing in WordPress admin

Local Development

Requirements:

• PHP CLI
• Node.js and npm
• the project-local WordPress sandbox in .wp-local/
• optional WP-CLI for demo content

Install dependencies:

npm install

Useful commands:

npm run sass:build
npm run sass:watch
npm run lint:php
npm run wp:serve
npm run wp:url

Local WordPress runs at http://127.0.0.1:8080.

Optional local demo content:

wp --path=.wp-local eval-file scripts/seed-local-projects.php
php -d error_reporting=24575 /opt/homebrew/bin/wp --path=.wp-local eval-file scripts/seed-local-notebook-posts.php

Files such as .env.local, .local/, .wp-local/, content-drafts/, node_modules/, and the AI_*.md handoff notes are local only and ignored by Git.

Editing in WordPress

Homepage

1. Open Pages > Home.
2. Edit the Front Page Content fields.
3. Edit the linked About and On Architecture pages for those homepage sections.

Work

1. Open Projects.
2. Edit the title, excerpt, content, featured image, and order.
3. Assign a Project Type and any relevant Project Themes.
4. Arrange images and videos in Project Media.

Notebook

Create and edit entries under Posts.

Tools

1. Open Site Tools.
2. Edit the tool entry and its Tool Details.
3. Use headings and editor content for overview and chapter sections.

Footer

Edit legal links under Appearance > Menus in the Legal Footer Menu.

Deployment

The deployment scripts sync theme code to the VPS over SSH and rsync. The WordPress database and uploaded media remain live-site state.

Local server configuration belongs in the ignored .env.local file. scripts/deploy-vps.sh reads:

NUNLAB_VPS_HOST="example-host-or-ip"
NUNLAB_VPS_USER="nun"
NUNLAB_VPS_SSH_KEY="/absolute/path/to/private-key"
NUNLAB_VPS_WP_ROOT="/var/www/wordpress"

Full deployment:

npm run deploy:vps

Theme-only sync:

./scripts/deploy-vps.sh --sync-only

scripts/bootstrap-live-wordpress.php ensures the base pages, menus, homepage settings, and site options exist. Portfolio, notebook, tool, and legal content remains managed in WordPress.

Live Services

Outgoing WordPress mail is configured outside the theme through live wp-config.php constants and a must-use SMTP plugin. No mail credentials are stored in this repository.

The private Dashboard > N:UN Analytics page reads an aggregate JSON summary generated from nginx access logs on the VPS:

• no public analytics script is loaded
• raw access logs are processed on the server
• the generated summary contains aggregate metrics
• visitor IP addresses are not stored in WordPress

Provision or refresh the summarizer with:

./scripts/setup-vps-analytics.sh

Browser Behavior

The theme is designed and tested for current versions of Chrome, Safari, Firefox, and Edge. Core content and navigation remain available when enhanced media behavior is unavailable.

Hero playback varies by browser and device:

• direct video scrubbing is used where reliable
• Firefox and reduced-motion contexts can use sequence or fallback paths
• iPhone and some browser/device combinations can use frame sequences for smoother scroll playback

License and Reuse

Theme code is licensed under GPL v2 or later. See LICENSE.

Bundled Barlow font files are licensed under the SIL Open Font License 1.1. See assets/fonts/OFL.txt.

The N:UN identity and project-specific media are not part of the reusable theme license. See THIRD_PARTY_NOTICES.md for details.