WP Rig gives the developer an out of the box environment with support for modern technologies including ES2015, CSS grid, CSS custom properties (variables), and existing tools like Sass without making any configurations. Just write code and WP Rig handles the heavy lifting for you.
WP Rig features
WP Rig takes a component-based approach to WordPress themes. Out of the box, the compiled theme uses
index.php as the core template file for all views (index, archives, single posts, pages, etc).
/optional folder holds optional template files that can be accessed via the WordPress Template Hierarchy. To activate these files, move or copy them into the root
wp-rig theme folder. The
/optional folder is ignored by the Gulp build process.
Pluggable functions and features (eg custom header, sliders, other interactive components) are separated into the
External features and add-ons are separated into the
/external folder and are managed the same way as Pluggable functions.
Images and graphics are placed in the
/images folder and are optimized automatically.
/js/libs folder. These files are not linted or optimized by the Gulp process.
Global stylesheets and stylesheets related to root-level php files are placed in the
/css folder and are optimized automatically.
Content loop files are placed in the
style.css is required for WordPress to detect the theme but it is not used.
The theme generated by WP Rig is AMP-ready meaning it works hand-in-hand with the official AMP plugin and does not require further configuration to work with AMP features. The AMP plugin allows you to opt-in to
amp theme support via the plugin settings page but you can also force enable AMP support in a theme by adding
add_theme_support( 'amp' ); in
wprig_is_amp() conditional. For more see Implementing Interactivity.
Progressive loading of CSS
To further componentize the theme, WP Rig employs progressive loading of CSS through in-body
<link> tags. Component-specific styles are held in component-specific stylesheets and loaded at component level. The
./inc/template-functions.php can be used to conditionally preload in-body stylesheets for improved performance. This approach has several advantages:
- The main stylesheet file size is reduced
- Styles are only loaded if and when a component is present in the view.
- Stylesheets are associated with their components making them easier to work with.
- Leverages HTTP/2 multiplexing and can be extended to include server push etc.
- Component-level stylesheets are cached and can be individually updated without forcing reload of all styles on the site.
To improve the performance of the theme, progressively loaded stylesheets can be conditionally preloaded. This is done using the
wprig_add_body_style() function in
./inc/template-functions.php. When preloading a stylesheet, use the console in Chrome developer tools to ensure no unnecessary stylesheets are loaded. A warning will appear letting you know if a stylesheet is preloaded but not used.
Modern CSS, custom properties (variables), autoprefixing, etc
All CSS is processed through PostCSS and leveraging postcss-preset-env to allow the use of modern and future CSS markup like custom properties (variables). Variables are defined in
./config/cssVariables and applied to all CSS files as they are processed. postcss-preset-env (previously cssnext) passes all CSS through Autoprefixer to ensure backward compatibility. Target browsers are configured under
Modern layouts through CSS grid, flex, and float
The theme generated by WP Rig is mobile-first and accessible. It uses the modern layout modules CSS grid and flex to support a minimalist HTML structure.
For backward compatibility with browsers who do not support modern layout modules, WP Rig provides the mobile-first layout across all screen widths and serves two-dimensional layouts as a progressive enhancement.
The CSS philosophy of WP Rig breaks down as follows:
- Mobile layout for all screen sizes as fallback.
- Two-dimensional layouts using CSS grid.
- One dimensional block/list-based displays using flex.
- In-content wrapping using float and clear.