Skip to content

Theme: 2016dezeen

Overview

PropertyValue
Theme NameDezeen 2016
AuthorDen Creative
Version2.0
StatusProduction (active)
BuildLaravel Mix (SCSS + JS, webpack)
Location_project/_web/wp-content/themes/2016dezeen/

Architecture

The theme uses a modular function file pattern. functions.php is a thin loader that requires:

FilePurpose
functions/utilities.phpHelper functions
functions/theme-setup.phpTheme support, widget areas, nav menus
functions/assets.phpScript and style enqueue
functions/actions-and-filters.phpCore WP hooks, ACF field group
functions/shortcodes.phpShortcode definitions
functions/admin.phpAdmin menu pages, options
functions/algolia.phpAlgolia search integration and optimisation
functions/performance.phpCLS fixes, preloading, lazy loading, font optimisation
functions/events.phpEvent-specific template logic, AJAX handlers
functions/social-seo.phpSocial sharing and SEO meta
functions/ajax.phpAJAX endpoint handlers

Template Hierarchy

Standard Templates

TemplatePurpose
index.phpDefault/home template
single.phpSingle post (article)
page.phpGeneric page
author.phpAuthor archive
search.phpSearch results
404.phpNot found
comments.phpComment template
carousel.phpMain carousel
carousel-hotlist.phpHotlist carousel

Page Templates

TemplatePurpose
page-advertise.phpAdvertising page
page-awards.phpAwards landing
page-awards-public-vote.phpAwards public voting
page-awards-winners.phpAwards winners display
page-categories.phpCategory listing
page-china.phpChina-specific page
page-comments.phpComments page
page-competitions.phpCompetitions listing
page-courses.phpCourses directory
page-events.phpEvents guide
page-preferences.phpUser preferences
page-signup.phpAwards signup
page-signup-closed.phpClosed signup

Single Templates (Custom Post Types)

TemplatePost Type
single-award_entry.phpAward entry
single-competition.phpCompetition
single-dezeen_event.phpEvent
single-juror.phpJuror
single-longlist_entry.phpLonglist entry
single-shortlist.phpShortlist
single-shortlist_entry.phpShortlist entry
single-winner.phpWinner

Archive Templates

TemplatePost Type
archive-2022juror.php2022 Jurors
archive-competition.phpCompetitions
archive-dezeen_event.phpEvents

Taxonomy Templates

TemplateTaxonomy
taxonomy-award_year.phpAward year
taxonomy-awards_2022_jurors.php2022 jurors
taxonomy-competition-stage.phpCompetition stage
taxonomy-competition-type.phpCompetition type
taxonomy-event_city_guide.phpEvent city guide
taxonomy-event_type.phpEvent type
taxonomy-location.phpLocation

Special Templates

TemplatePurpose
search-events.phpEvent search
search-nav.phpSearch navigation
template-events.phpEvents template

Template Partials

The includes/ directory contains reusable template partials loaded via get_template_part(). The ad_spots/ directory contains ad placement templates for different ad positions (MPU, leaderboard, sky, etc.).

Shortcodes

ShortcodePurposeFile
[competition]Competition entry formfunctions/shortcodes.php:100
[genderPayGapCalculator]Gender pay gap calculatorfunctions/shortcodes.php:189
[campaignmonitor]Newsletter signup formfunctions/shortcodes.php:222
[newsletters]Alias for campaignmonitorfunctions/shortcodes.php:223

Admin Options

The theme registers a "Dezeen Options" admin menu page via functions/admin.php:

  • create_dezeen_options_page() — Adds top-level menu
  • Tag metabox removal from post editor (uses ACF instead)

ACF Field Groups

Field GroupLocationFields
TagsPosts (post type)tag — taxonomy multi-select

Asset Enqueue

Styles (priority 5)

  • dezeen-global-style-min.css — Global styles
  • style-min.css — Main theme styles
  • dezeen-awards-min.css — Awards styles (conditional)
  • lzy_srcset.min.css — Lazy loading styles

Scripts (priority 20)

  • scripts-min.js — Main bundle
  • modern_header-min.js — Header functionality
  • count-min.js — Disqus comment count
  • Feature-specific scripts loaded conditionally

Performance Features

FeatureImplementation
CLS optimisationInline styles in wp_head (priority 5)
Critical resource preloading<link rel="preload"> in wp_head (priority 1)
Font display swapfont-display: swap injection (priority 2)
Lazy loadingCustom lazysize.js + lazysizes.min.js
Lite YouTubeConditional lite-yt-embed.js for YouTube embeds
Ad container optimisationDeferred ad rendering in wp_footer
CLS monitoringClient-side CLS tracking script

AMP Support

The amp/ directory contains AMP-specific template overrides:

  • single.php / page.php — AMP article templates
  • html-start.php — AMP HTML head
  • carousel.php — AMP carousel
  • featured-image.php — AMP featured image
  • meta-*.php — AMP metadata components

AMP CSS is compiled from sass/style-amp.scss to css/style-amp.css.

SASS Architecture

Entry Points

FileOutput
sass/style.scsscss/style-min.css
sass/dezeen-global/dezeen-global-style.scsscss/dezeen-global-style-min.css
sass/dezeen-awards.scsscss/dezeen-awards-min.css
sass/style-amp.scsscss/style-amp.css
sass/optinmonster.scsscss/optinmonster-min.css
sass/lzy_srcset.scsscss/lzy_srcset.min.css

Key Partials

  • _variables.scss — Colour palette, breakpoints, spacing
  • _mixins.scss — Reusable mixins
  • _globals.scss — Base element styles
  • _header.scss — Header styles
  • _critical.scss — Above-the-fold critical CSS
  • components/*.scss — Component styles (nav, carousel, comments, ads, etc.)

JavaScript Architecture

Main Bundle

scripts-min.js combines: scripts.js, advert-sticky.js, miniliving.js, cookie-banner.js, optinmonster-dialogue.js, lazysize.js, carousel.js.

Feature Bundles

BundlePurpose
algolia-min.jsAlgolia search
competitions-v3-min.jsCompetition forms (Vue 3)
lightbox-min.jsImage lightbox
newsletter-min.jsNewsletter forms
eventsguide-min.jsEvents guide
hotlist-min.jsHot list
liftigniter-workhorse-min.jsContent recommendations
single-page-scripts-min.jsSingle post scripts

Libraries

  • jQuery 4.0.0 (via npm)
  • Vue 3 (external, for competitions)
  • Slick carousel
  • Waypoints
  • lazysizes
  • lite-yt-embed (YouTube optimisation)
  • Tipsy (tooltips)

Widget Areas

Registered in functions/theme-setup.php via dezeen_widgets_init(). Used for sidebar and footer widget positioning.

AJAX Handlers

Events-related AJAX handlers in functions/events.php and functions/ajax.php for:

  • Event filtering
  • Event search
  • Calendar download (ICS format via template_redirect)