-
Notifications
You must be signed in to change notification settings - Fork 0
Website Design
| Property | Detail |
|---|---|
| Parent Theme | Twenty Twenty-Five |
| Child Theme |
the-digital-front-child (fully custom) |
| Theme URL | https://wordpress.org/themes/twentytwentyfive/ |
| Popularity | Twenty Twenty-Five is the default WordPress theme shipped with WordPress 6.7+, making it one of the most widely used and well-supported themes available |
Twenty Twenty-Five was selected as the parent theme for several reasons:
-
Stability and Long-Term Support - As a default WordPress theme, it receives consistent updates, security patches, and compatibility testing with every WordPress release. This ensures the child theme will not break with future updates.
-
Minimal Opinionation - Unlike feature-heavy commercial themes, Twenty Twenty-Five provides a clean foundation without imposing rigid layout structures. This gave the team full creative control through the child theme without fighting against parent theme decisions.
-
Block Editor Compatibility - Full support for the WordPress block editor (Gutenberg) while still allowing classic template overrides. The team uses classic PHP templates (
front-page.php,single.php, etc.) for precise control over the publication layout. -
Performance - Ships with minimal CSS and JavaScript, ensuring the child theme's custom assets are not competing with bloated parent theme resources.
-
Learning Value - Building on a well-documented default theme allowed the team to focus on understanding WordPress template hierarchy, hooks, and theme development best practices rather than reverse-engineering a third-party theme.
| Property | Value |
|---|---|
| Primary Font | Manrope (sans-serif) |
| Font Weight | 300 (light) |
| Line Height | 1.4 |
| Font Smoothing | -webkit-font-smoothing: antialiased |
Manrope was chosen for its clean geometric forms and excellent readability at various sizes, well-suited for a content-heavy publication.
| Property | Value |
|---|---|
| Max Container Width | 1340px |
| Narrow Container Width | 760px (for article/page content) |
| Responsive Padding | clamp(20px, 5vw, 50px) |
| Header Height | 64px (fixed position) |
| Grid System | CSS Grid with .tdf-grid--3 (3-column responsive) |
The theme inherits WordPress preset color variables (--wp--preset--color--*) from Twenty Twenty-Five, maintaining visual consistency with the WordPress design system while allowing customization through the Site Editor.
The CSS is organized into 24 distinct sections covering:
| Component | Description |
|---|---|
| Base | Global resets, box-sizing, body defaults |
| Header | Fixed header with nav pills and responsive toggle |
| Hero | Magazine-style featured article layout with overlay |
| Buttons | Primary, secondary, small, and outline variants (.tdf-btn) |
| Cards | Article cards with image, metadata, title, excerpt |
| Category Filter | Tab pills, date range inputs, filter buttons |
| Pagination | WP-PageNavi and fallback pagination styling |
| Single Post | Breadcrumbs, author info, sharing buttons, video embed, related content |
| Archive | Archive header and grid layout |
| Footer | Centered copyright |
The site is fully responsive with:
- Mobile menu - Hamburger toggle that overlays content, closes on Escape key or click outside
-
Fluid spacing -
clamp()functions for padding that scales between viewport sizes - Responsive grids - CSS Grid layouts that collapse from 3 columns to single column on smaller screens
-
Flexible images - All images set to
max-width: 100%withheight: auto
The overall aesthetic follows a clean, modern publication style:
- Light background with clear content hierarchy
- Card-based content presentation with subtle shadows and borders
- Pill-shaped navigation links and category filter tabs
- Full-width hero images with text overlay on the home page
- Generous whitespace to let content breathe
- Reading progress indicator on single post views
- Breaking news ticker with pulse animation for visual interest