Baike.dev
All toolsOnline toolsAI codingTrendingOpen sourceNewsSubmit
Log in
< Back to tools
A

air-light

> 编程语言
Open source

WordPress starter theme - designed to be dependency-free, minimal, ultra-lightweight (< 20 kB) and easy for all kinds of WordPress projects. We prefer the or

1.2K stars0 likes1 views
WebsiteGitHub

About

WordPress starter theme - designed to be dependency-free, minimal, ultra-lightweight (< 20 kB) and easy for all kinds of WordPress projects. We prefer the or

Air-light - A minimalist WordPress starter theme

Air-light (or simply Air) is designed to be an ultra minimal starting point for a WordPress project at Digitoimisto Dude Oy, a Finnish boutique digital agency in the center of Jyväskylä. Theme is originally based on _s. We welcome all happy contributors with open arms!

Demo | Documentation

  • CSS gzipped: 16.8 KB (originally 124.4 KB)
  • JS gzipped: 8.6 KB (28.6 KB original)
  • Front page HTML: 7.4 KB (29.4 KB original)

Weekly updates!

This theme is constantly kept up to date by a bunch of awesome contributors. Wanna join in development? Read the instructions for contributing and let us know about your first PR!

Mission & vision

Air-light is built to be very straightforward, backwards compatible, front-end developer friendly and modular by its structure. Following Underscores and WordPress Theme Coding Standards best practices and most of the changes in _s are implemented as soon as they are committed.

Our mission and goal is minimalism and simplicity. Our vision is to build a theme that will not implement its own wrappers or functions, will not use any templating languages that would take things further from traditional PHP or CSS, will contain nothing that people will not use or need. Air-light will be free of weird "app-like" folder structures or odd syntaxes that nobody else uses. We love WordPress as it was and as it is.

Air was renamed to air-light in version 3.7.8 (March 20th, 2018), because air was already taken in the official WordPress theme directory.

Official, approved, accessibility-ready!

Air-light v. 4.2.2 was approved to official WordPress theme directory on June 4, 2018. But please note, all changes you do to the theme without generating your own or changing textdomain will be overridden in theme updates - so if you use this theme as a starting point, please follow instructions and/or replace the textdomain with your own.

Table of contents

  1. Usage
  2. Please note before using
  3. License
  4. Features
    1. Layout base & grid
    2. Typography
    3. Development
    4. Navigation
    5. WordPress & functions
    6. Custom Post Types
    7. Custom Taxonomies
    8. Namespaced PHP
    9. Accessibility
    10. Lazy load
    11. Disabled features
  5. Extra building blocks
    1. Sticky navigation
    2. WooCommerce support
  6. Requirements
  7. Recommendations for development
  8. How to build a new theme
  9. Contributing
    1. Air development
    2. Debuggers
    3. Releasing a new version (staff only)
  10. Notes

Please note before using

Air is a development theme, so it has updates very often. By using this starter theme, you agree that anything can change to a different direction without a warning when you look at this dev-git the next time. Please note this theme has no updates inside WordPress by design. Use this theme to hack it to pieces and create your new awesome theme based on Air! Please also see Debuggers!

Air is not meant to be "a theme for everyone", which means it doesn't have all the parts that are generally included in multi-purpose themes for non-technical people (please see Disabled features).

If you want to use this theme as starter for your new theme, please note the theme won't necessarily be that much fun or won't look good by default and needs work from you. We recommend using Sage if you need something more extended.

License

Air is licensed with The MIT License (MIT) which means you can freely use this theme commercially or privately, modify it, or distribute it, but you are forbidden to hold Dude liable for anything, or claim that what you do with this is made by us.

Theme structure

We try to follow traditional WordPress Template Hierarchy as much as possible. This way we will provide a low threshold for junior developers and go hand in hand with official WordPress Theme Coding Standards.

Please see Visual Overview if you are interested in how the WordPress theme structure works.

Features

Some features, WooCommerce support and personal preferences of Dude are moved to Air helper plugin.

Layout base & grid

  • Gutenberg-ready
  • Flexbox-ready
  • CSS Grid-ready
  • SVG-ready
  • SASS-support (SCSS-syntax)
  • CSS reset from sanitize.css
  • Section blocks and containers
  • Basic and minimal CSS framework for forms, commenting and typography

Typography

  • Responsive typography with viewport units with fallbacks, see more in sass/layout/_typography.scss and sass/base/_helpers.scss, default syntax is @include responsive-font($font-size-min, $font-size-max); (formerly Megatype, still recommended with blogs or text-only based sites, but not included by default after 1.5.0)
  • Web fonts file are preferred, helper included: Sass Boilerplate's fontFace-mixin. Put files in fonts/ directory, you'll need .odt, .ttf, .woff, .woff2. Then just @include fontFace('Proxima Nova', '../../fonts/proximanova-regular-webfont', 400); in _typography.scss.

Development

  • BrowserSync for keeping multiple browsers and devices synchronized while testing, along with injecting updated CSS and JS into your browser while you're developing
  • Parcel build tool that compiles Sass, bundles JavaScript, and optimizes assets with zero configuration
  • npm for front-end package management

Navigation

  • Dependency-free, all in Vanilla JS
  • Custom navigation walker built accessibility in mind
  • Fully accessible
  • Full keyboard navigation support
  • Arrow navigation support
  • WCAG 2.0 AA compliant: Dropdowns close when pressing Esc while hovering
  • Supports multi-level drop down submenus
  • Supports animations
  • Hover-intent support
  • Focus trap for mobile navigation
  • Accessible burger menu
  • Easy to customize

WordPress & functions

  • Available for translation, full Polylang Pro support
  • Support for Post Thumbnails on posts and pages
  • Gutenberg support
  • HTML5 core markup for WordPress elements
  • Air specific: Hero template, section blocks

Custom Post Types

Air-light can register your CPT:s automatically.

  1. Add your custom post type to theme settings under post_types, located in functions.php like this:
'post_types' => [
  'Your_Post_Type'
]
  1. Add a file inc/post-types/your-post-type.php
  2. Extend Post_Type class with Your_Post_Type and define your post type in a public function called register(). See the example: inc/post-types/your-post-type.php.

Custom Taxonomies

Air-light can register your Taxonomies automatically.

  1. Add your taxonomy to theme settings under taxonomies, located in functions.php like this:
'taxonomies' => [
  'Your_Taxonomy' => [ 'post', 'page', 'your-post-type' ]
]
  1. Add a file inc/taxonomies/your-taxonomy.php
  2. Extend Taxonomy class with Your_Taxonomy and define your taxonomy in a public function called register(). See the example: inc/taxonomies/your-taxonomy.php.

Namespaced PHP

Air-light uses namespaced PHP since 5.0.0. This means that we no longer need to prefix functions and hooks, because namespace Air_Light; takes care of that.

When old function format was:

php
// Pre_get_posts
add_action( 'pre_get_posts', 'dude_pre_get_posts' );
function dude_pre_get_posts( $query ) {
  // Do something
}

New format goes like this:

php
// Pre_get_posts
add_action( 'pre_get_posts', __NAMESPACE__ . '\pre_get_posts' );
function pre_get_posts( $query ) {
  // Do something
}

Accessibility

Creating accessible websites is really important and our goal is to make air as accessible-ready as possible. Theme fully supports navigating with keyboard and screen-readers. Other accessible features:

  • Navigation patterns
  • Skip to content link
  • Smart focus for keyboard users, what-input baked in
  • Valid HTML
  • Accessible SVG icons
  • Screen reader class
  • External link indicators
  • Underlined links
  • Content-aware back to top link
  • WCAG 2.0 AAA Accessible-ready Gravity Forms styles (needs WCAG 2.0 form fields for Gravity Forms, included in dudestack)

Lazy load

From 4.7.1 air-light has a lazy loading image features for background images and imgs. If you don't use this feature, remove it from scripts. This feature depends on air-helper, check out the documentation in air-helper for further instructions.

Disabled features

  • Widgets
  • Post formats
  • Jetpack support
  • (Threaded) comments
  • Underscores Template tags
  • Sidebar

Javascript

Structure

All .js files in /assets/src/js/ are built to /assets/dist/js/ folder. The main scripts file loaded in front end is /assets/src/js/front-end.js.

If you want to add a piece of custom JS, create a file under /assets/src/js/modules/ and import or require it in /assets/src/js/front-end.js. If you need admin-specific JS, add a /assets/src/js/admin.js and then enqueue /assets/dist/js/admin.js with enqueue_admin_scripts

Extra building blocks

Sticky navigation

Air has a sticky navigation baked in.

How to enable

You can enable the sticky navigation by uncommenting navSticky() in the assets/src/js/front-end.js file.

WooCommerce support

Air had by default a basic WooCommerce support from version 1.9.2, and for a while it was been separated to its own repository, air-woocommerce since

Issues· 0 open

View all issuesOpen on GitHub

No open issues yet, or sync has not completed.

> Tags

PHPaccessibility-readyaccessibledevelopment-themegutenberg

No comments yet. Be the first to share.

> Details

PublishedAug 1, 2026
UpdatedSep 17, 2026
Category编程语言
PricingOpen source

> Related tools

T
TypeScript
JavaScript 的超集,为前端与全栈提供静态类型
P
Python
通用编程语言,广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言