💨 WordPress starter theme - designed to be minimal, ultra-lightweight (< 20 kB) and easy for all kinds of WordPress projects. 7+years/1000+hours of development and still updating daily! We prefer the original WordPress way of doing things so no strange templating languages or frameworks here.
Home Page: https://airwptheme.com
License: MIT License
We should get rid of template-parts/content-*.php files because we don't use those in projects. Instead, we should add content-modular.php to the theme as it is used in every project.
Hi,
My editor is delivering a 404 for the following, there is no guternberg.css in the directory.
/Users/thomasparkes/Downloads/air-light-master 3/inc/hooks/gutenberg.php:
82
83 // Enqueue editor styles.
84: add_editor_style( get_theme_file_uri( get_asset_file( 'gutenberg.css' ) ) );
85 }
86
I'm really sorry if that's a general WP question and not air-light specific one - I'll promise not to overuse your support.
I managed to create a custom post type, but when I try to enable the WP default category taxonomy by updating the $args to 'taxonomies' => ['category'],it doesn't really work.
Can you please advice me how to add default category option to custom post type?
Hi!
I'm developing with air-light using Local by Flywheel. I'm also using devpackages. No problems so far. However:
Issue
I've followed the instructions for registering custom post types. I added your-post-type.php under inc/post-types. I uncommented the code in functions.php:
'post_types' => [ 'your-post-type' => 'Your_Post_Type', ],
Wordpress crashes and I am greeted with the error:
Fatal error: Class 'Air_Light\Post_Type' not found in /app/public/wp-content/themes/mycustomtheme/inc/post-types/your-post-type.php on line 16
Is this error caused by my development environment, or is there a step that I am missing? I have been trying to troubleshoot this problem without success.
Thank you for the great theme, any help at all is greatly appreciated!
Just installed a new test environment to look at the recent changes to the theme, and after npm installing and find/replacing the namespace (air-light) i attempted to run my first gulp watch and received this error that i haven't run into before. Curious if this is a new bug or an issue you may be aware of and have some advice on?
`
gulp watch ~
/themes/air-light/node_modules/stylelint/node_modules/cosmiconfig/dist/Explorer.js:54
for await (const place of this.config.searchPlaces) {
^^^^^
SyntaxError: Unexpected reserved word
at new Script (vm.js:51:7)
at createScript (vm.js:138:10)
at Object.runInThisContext (vm.js:199:10)
at Module._compile (module.js:624:28)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
`
Just noticed something breaks after last refactor.
If I put divs inside of an container element, and assign them with Jeet markup col(x/y), the container will be height of 0(+paddings). If I simply give container a float:left, then the height kicks in, but centering wont work.
Here's my html and css
HTML
<section id="smthn">
<div class="container">
<div class="nut">/*Lot of stuff inside*/</div>
<div class="nut">/*Lot of stuff inside*/</div>
<div class="nut">/*Lot of stuff inside*/</div>
</div>
</section>
SCSS
#smthn{
@include col(1);
.container{
@include center($grid-base-size);
.nut{
@include col(1/3, $cycle:3);
}
}
}
}
Any ideas? Jeet is pretty new to me, so am I missing something here?
The dropdown button toggle on desktop / large tablet doesn't seem to toggle the menu. When pressing the button the aria role and class never change.
Just noticed newtheme.sh uses grep -rl air * which searches also node_modules. This causes performance issues especially on WSL. Let's limit depth and improve this to theme files only. PRs accepted.
Gulp is crashing out for me whenever it can't validate via PHPCS, and or some reason no matter what i do i can't get PHPCS to install globally for VSCODE or otherwise - so at this point i'm looking for an option to just disable PHPCS altogether since i'm not concerned about it in the first place. Thanks guys!
`
[15:50:32] Starting 'phpcs'...
[Browsersync] Reloading Browsers... (buffered 2 events)
[15:50:32] 'phpcs' errored after 393 ms
[15:50:32] Error in plugin "gulp-phpcs"
Message:
Cannot find "/usr/local/bin/phpcs"
Details:
domainEmitter: [object Object]
domainThrown: false
[15:50:32] 'watch' errored after 17 s
`
Instead of static file we're going to add demo-content as Gutenberg block based on pull #100.
The first thing I noticed is the logo in the branding header wasnt working. My quick fix was to replace THEME_SETTINGS['logo'] with a string but I notice that the Gutenburg is active on pages when the theme setting is like 'use_classic_editor' => [ 'page' ], so it would appear that the THEME_SETTINGS are not effective.
The context is deploying to a new server. I copied the files up. Do I still have to do an npm install on the server? I don't know what else is different between that and my local and staging sites - where I never saw this problem
Any ideas?
Hi guys,
I'm playing around with your theme (appreciate it) and here's the question:
whenever I try to add my own filters I get this error:
Warning: call_user_func_array() expects parameter 1 to be a valid callback
And I know that the filter is correct, because it is working with other themes. Here I'm trying to wrap post thumbnail in a <a> tag.
add_filter( 'post_thumbnail_html', 'wps_post_thumbnail', 10, 3 );
function wps_post_thumbnail( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>'; return $html;
}
I've just notice that not all of the files form js/src (or maybe none) are compiling to js/dist. Do you know what might be the issue?
I use acf block in gutenberg with method acf_register_block
In admin page all workin but in front page the_content return empty block with content acf
I check wordpress method the_content
function the_content( $more_link_text = null, $strip_teaser = false ) {
$content = get_the_content( $more_link_text, $strip_teaser );
//ACF data exist
$content = apply_filters( 'the_content', $content );
// ACF data don't exist
$content = str_replace( ']]>', ']]>', $content );
echo $content;
}
The problem exists only in your theme
It seems we don't have a default localization for "Add a menu" -link. Let's add this in some point.
One or more errors were found for Air-light.
WARNING: file_get_contents was found in the file inc/hooks/acf-blocks.php File operations should use the WP_Filesystem methods instead of direct PHP filesystem calls.Line 48: $block['icon'] = file_get_contents( $icon_path );
Typo in Gutenberg allowed blocks -list
Should be 'core/buttons'
Line 99 in fd1779b
Buttons are disabled by now due to this typo.
Already have it fixed here. Will implement soon.
Where is whatinput.js? I see it gets compiled to all.js, but in order to recompile, do we need to include it ourselves?
Moi!
I've been researching WP theme starters that include gulp/scss/browser-sync and are compatible with Gutenberg. So, I was really excited to test out air-light!
Issue
When I update my scss files, I don't think they are not being piped through properly. They don't appear in the live browsersync, and I don't see my changes in css/dev/global.css. I haven't been able to isolate the cause yet. I'm not sure how to best troubleshoot this, so I guess I'm asking for troubleshooting advice! Has anyone else had this issue? Perhaps there a step that I missed that would explicitly cause this issue?
If it helps, I'm using Local by Flywheel and VS Code.
Feedback
I ran into a few questions/comments in the setup process that I'd like to clarify for future users ~
When changing file names, I got a bit confused at first when I saw 'air-light' and 'Air-light' mentioned, but not 'Air_light'. When things weren't working for me, I tried changing 'Air_light' to my theme name and it broke everything lol. Perhaps this could be helpful to clarify in the readme?
When downloading devpackages, it includes a package.json file in addition to the one from air-light. Is there a process you recommend for merging them? I just manually compared and merged them (which is maybe what caused me problems).
In the instructions for devpackages, it was a bit unclear to me if I was supposed to add the folder 'devpackages' to the root or the files within the 'devpackages' folder to the root. I think you used language like 'extract into root' and 'add to your project folder', but that still felt a bit unclear to me.
There's a missing step for setting up browsersync ~ In gulp/config.js, if people aren't using dudestack, they will probably need to change the browsersync proxy settings.
Kiitos!! I hope that this feedback is helpful.
Best of luck!
Currently _gravity-forms.scss is not compatible with Gravity Forms version 2.5, for example default label "(Required)" is too big etc.
PRs accepted.
Hi bros,
I've been a fan of Air for a while now and while playing with the current version I've noticed that @supports was not compiling into css. Turned out it was because of gulp-merge-media-queries. Just letting you know (or maybe it's just me).
Also, quick question: is there a specific reason why you mixed SASS variables with CSS ones?
Cheers!
Hey everyone,
Just curious what you had in the books for major updates. I'm a fan of Air as a starter theme, but there are a number of ways I alter it with every use. Largely, I use Gutenberg heavily and not ACF, so I add better support for blocks and Gutenberg styles, as well as a new gulp process to make editor styles (so editing a page looks as close as possible to the live view). I also add search capabilities to all sites with a small accessible dialog js library for the search modal. Some other obscure things like prefers-color-scheme support and css variables instead of scss variables. Other css changes..
Mostly curious where your trajectory is taking you with all the new WP changes coming out, with the heavy reliance on Gutenberg, moving to full site editing and reducing the need for the customizer, and the overall goal of making themes be presentation only.
If any of your plans overlap with some of the changes I currently make, I could start sending some PRs your way. I don't want to introduce any breaking changes though since this is your starter theme.
Feel free to email me if you'd prefer to talk about this over email.
Really enjoying Air - though i'm attempting to integrate the Bulma CSS Framework as i've become familiar with it with other projects, but i'm having trouble with the integration, any advice? (attempting via SASS so to be able to affect variables)
I'd like to move the base styles like headings, fonts, buttons and form fields to mixins. That way it would be a lot easier to keep the styles consistent in different kind of modules and blocks and rewrite Gutenberg block styles to match theme styles.
Example:
body .wp-block-file {
.wp-block-file__button {
@include button;
}
}
When browsing min-width($responsivenav), ipad-landscape-breakpoint or wider when nav is not responsive, touch events are not reasonable. Will fix.
Should be more clear and efficient for the users..Let's make more attractive interface
If clicked multiple times in a row, the text (Open/Close menu) loses sync with the navigation status
For accessibility purposes:
$atts['aria-current'] = $item->current ? 'page' : '';
For security:
//$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
if ( '_blank' === $item->target && empty( $item->xfn ) ) {
$atts['rel'] = 'noopener noreferrer';
} else {
$atts['rel'] = $item->xfn;
}
Missing blocks
'core/button', //need this to add buttons inline
'core/group',
'core/media-text',
'core/block',
'core/template',
Deprecated blocks
//'core/subhead', https://developer.wordpress.org/block-editor/how-to-guides/backward-compatibility/deprecations/#3-9-0
//'core/textColumns', https://developer.wordpress.org/block-editor/how-to-guides/backward-compatibility/deprecations/#3-5-0
Lastly, missing styles for alignwide and alignfull https://www.billerickson.net/full-and-wide-alignment-in-gutenberg/
Just noticed today that gutenberg-helpers.js causes error front-end.js?ver=1613846017:1 Uncaught TypeError: Cannot read property 'clientWidth' of null if there's a Twitter embed in post.
After version 6-ish refactoring Gutenberg admin editor styles are not loading up properly in WordPress 5.6+.
Steps to reproduce:
Somehow setup_editor_styles() function never gets triggered.
It works fine though when you add this quick hook to inc/hooks/gutenberg.php:
// Add backend styles for Gutenberg.
add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\gutenberg_editor_assets' );
function gutenberg_editor_assets() {
// Load the theme styles within Gutenberg.
wp_enqueue_style( 'my-gutenberg-editor-styles', get_theme_file_uri( get_asset_file( 'gutenberg.css' ) ), false ); // phpcs:ignore
}Perhaps @Niq1982 might know what's up with that.
Sorry if this already came across your desk, i could have sworn I opened an issue here but I don't see it, perhaps it was an email. Or I'm losing my mind.
Anyways.
If you shrink your browser window to trigger the mobile navigation mode, and then start to tab through the document, the nav items in the mobile menu as in the tab order. If you open the mobile menu, and then close it, your tab context is still trapped in the mobile menu, so you can't navigate the rest of the document. I've tested this on a clean install with the latest commit.
I was able to fix this on my end with a few changes. The first being to reassign the event listeners on the menu from anonymous functions to declared functions, and then removing those event listeners on menu close. And second by changing the menu CSS to change the visibility to hidden and pointer events to none when closed.
It obviously changes the slide down behavior of the menu, but so far the solution on my end seems to be working fine. I'm happy to send a PR with my changes, but I thought I'd mention it first in case you had your own ideas on fixing it.
Hi,
just learning about this starter theme, lots of great things going on here! I'm curious if there is anything radical being done to optimize the CSS like in this starter theme which loads the CSS only when the component is in view:
https://github.com/wprig/docs/blob/master/documentation/css.md#progressive-loading-of-css
On small screens, tabbing after the last link, will return back to the close button – which is great.
However, if your last link contains a submenu button, tabbing after it will not return focus on the close button. Instead, it will focus on the content behind the opened mobile menu.
Details under commit discussions.
Recently pulled the latest and started setting things up and noted by default that 'page' was set in the use_classic_editor function. Upon removing it, i noted an error flash whenever loading a page in the backend.
https://www.dropbox.com/s/4tkn08lkbutsrbh/Screen%20Shot%202020-12-10%20at%2010.23.49%20PM.png?dl=0
// If you want to use classic editor somewhere, define it here
'use_classic_editor' => [ 'page' ],
is there a recommended way to disable this without re-writing much of the gutenberg sub-functions?
Hi, css source maps do not seem to be created.
How can i enable them?
Thanks!
Working with "color theme" and variation based sites more and more so there's really a need for color variables to be in CSS var format instead of SCSS ones. I have experimented with this here while workin on dark mode (here).
Only scenarios they are not suitable for are
In functions and mixins we will use SCSS var as base and then convert them to CSS variables so we need to define those colors only once. For rgba colors we will need to have two variables which will be be easier with hexToRGB() mixin (example here).
If it's okay for everyone I'll implement this soon enough.
For example:
<a href="https://www.google.com">
<img src="https://www.google.fi/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" alt="Google" />
</a>This is currently outputting as:
<a href="https://www.google.com" aria-label="External site: " class="is-external-link">
<img src="https://www.google.fi/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" alt="Google" />
</a>It should be like this:
<a href="https://www.google.com" aria-label="External site: Google" class="is-external-link">
<img src="https://www.google.fi/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" alt="Google" />
</a>If there's target="_blank", it should be:
<a href="https://www.google.com" aria-label="External site: Google, opens in a new window" class="is-external-link" target="_blank">
<img src="https://www.google.fi/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" alt="Google" />
</a>Changes needed in external-link.js for it to be able to recognize the link type and parse the alt.
I've been asked many times why Air_Light namespace is not being replaced. Should we add it to replaces.
Why not:
Why replace:
Looks like many updates are made to this starter theme, even multiple releases in a day!
If I'm developing my own custom theme using air-light, and want to pull in the latest updates is there a sound process for this? I understand there would eventually be merge conflicts and would have to manually scan through the changes.
hi,
I ca'nt use gulp with air-light worrflow (php storm)
I got the error below :
" Undefined rule font-family-no-missing-generic-family-keyword"
every update on npm / scsslint and others (as https://github.com/digitoimistodude/devpackages)
doesn't work.
Any idea ?
thanks in advance
You can have i18n strings in scripts.js file. The magic function is wp_localize_script. Here is an example.
I noticed on the demo site that the content of the <blockquote> element is flowing out of the viewport on smaller screens. Apparently it inherits width: 100% from .gutenberg-content > *, but it has a left margin of 2rem.
Setting width: auto on .gutenberg-content > blockquote seems to fix the issue (right padding might need additional adjusting though).
Screenshots taken in Firefox 85.0.1 on macOS Big Sur 11.2.
Sorry, got no setup ready to send a PR these days, but I hope the note is valuable. Great job with the theme!
Note to self: open submenus on the left only if there are submenus in the last items. Currently submenus only on last nav item open to the left, but second last still open to the right.
A quick note to self, I suspect this is caused by forced admin editor styles:
Stylefmt has a known bug that causes stylefmt not to run (too old stylelint version). The bug is in effect if other than stylelint-config-primer is used. Air switched to stylelint-config-wordpress after 4.3.1 so this bug exists.
Steps to fix in this issue. This won't be fixed until stylefmt is updated to the repo, but adding this issue as a note to myself.
➜ air-light (master) gulp watch
[10:47:01] Using gulpfile ~/Projects/airdev/content/themes/air-light/gulpfile.js
[10:47:01] Starting 'browsersync'...
[10:47:01] Finished 'browsersync' after 14 ms
[10:47:01] Starting 'watch'...
[10:47:01] Finished 'watch' after 26 ms
[Browsersync] Proxying: http://airdev.test
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3002
External: http://192.168.1.233:3002
--------------------------------------
UI: http://localhost:3003
UI External: http://localhost:3003
--------------------------------------
[Browsersync] Watching files...
[10:47:20] Starting 'styles'...
[10:47:20] Finished 'styles' after 20 ms
[clean-css] Original size: 149271 bytes
[clean-css] Minified size: 114521 bytes
[clean-css] Time spent on minification: 751 ms
[clean-css] Compression efficiency: 23.279806526384895 %
[Browsersync] 1 file changed (global.min.css)
Error: Undefined rule font-family-no-missing-generic-family-keyword
at module.exports (/Users/rolle/Projects/airdev/content/themes/air-light/node_modules/gulp-stylefmt/node_modules/stylelint/lib/utils/configurationError.js:8:27)
at Object.keys.forEach.ruleName (/Users/rolle/Projects/airdev/content/themes/air-light/node_modules/gulp-stylefmt/node_modules/stylelint/lib/augmentConfig.js:279:13)
at Array.forEach (<anonymous>)
at normalizeAllRuleSettings (/Users/rolle/Projects/airdev/content/themes/air-light/node_modules/gulp-stylefmt/node_modules/stylelint/lib/augmentConfig.js:275:29)
at augmentConfigBasic.then.then.then.then.augmentedConfig (/Users/rolle/Projects/airdev/content/themes/air-light/node_modules/gulp-stylefmt/node_modules/stylelint/lib/augmentConfig.js:84:12)
[Browsersync] 1 file changed (global.css)Since the version 6.5.0 images folder seem to have been missing and thus the theme setting default_featured_image do not work. We probably should still have some default image in the theme, even we change it in every project.
Isn't it dangerous to use ES6 without a transpiler (browser support), wouldn't it better just to use babel then uglify instead? Maybe am not getting something, curious. Thanks
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.