We’re thrilled to announce the release of Understrap 1.0, our biggest release since taking over the project in May.
The update does NOT include breaking changes, so you can safely update any site using the Understrap parent theme via the WordPress theme directory.
For your new projects, Understrap 1.0 comes with a new build process and lots of cool new features, described below. The ideal way to use these is to keep the Understrap parent theme unchanged, and do all your custom dev in a child theme.
→ You can grab the parent theme from the WordPress directory or GitHub. You can grab the starter child theme from GitHub.
→ We’ve updated the docs to reflect the new changes
→ If you want to dive into 5+ hours of training videos, we’ve updated and reopened our Instant Understrap course to cover all the 1.0 changes
Here’s a detailed look at what’s new in Understrap 1.0:
Top Enhancements
Gutenberg support has arrived to Understrap! We’ve brought in new styles that add Bootstrap designs to some of the blocks, like tables, pull quotes, captions, and buttons. We’ve added support for wide/full width cover blocks when using the “Full Width” template. Even further, we’ve set up the block editor to load the Bootstrap-specific color palette, so all buttons, links, and cover blocks can reference the same color.
We’ve removed the outdated WooCommerce templates in the theme, updated all of them, and made sure we’re using the latest and safest files and functions from WooCommerce. Even further, we’ve added Bootstrap styles to some default WooCommerce elements, like info bars and alerts.
The Understrap theme footer text and copyright information is now editable in the Customizer.
Developer Features
Gulp is gone! We’ve rewritten the build process closer to what Bootstrap does and to prepare us for Bootstrap 5+. We’re using postCSS for styles and rollup.js for scripts. No more globally installing Gulp.js. Otherwise, we’ve tried to keep the migration very simple. Instead of commands like “gulp watch”, you would just use “npm run watch”. You can look inside the new package.json file or the readme.md for all of the commands.
Assets are cleaned up. Instead of having a separate /sass/ and /src/sass/ folder, EVERYTHING relating to your assets is in the /src/ folder. All the .scss files are now in one place. Plus, since we’re using js modules, you have the ability to more easily import javascript libraries or to remove any Bootstrap javascript you’re not using on your site.
Finally, we’re using a custom postCSS plugin to read your Bootstrap color variables and then import your color palette into the block editor’s color picker by default. If you update your color variables in the sass, our build process will update those colors in Gutenberg.
Child Theme Updates
There’s an updated release available for the child theme that pulls in the newer Understrap styles AND uses the updated build process. If you’re starting a new Understrap child theme, feel free to grab a fresh copy from Github.
Important Note: If you’re already building a child theme, you can update the parent theme without making any changes to your child theme. Since you’re loading your own stylesheets and JavaScript anyway, it’s completely fine to be using an older child starter theme with the new updates to the parent theme. You can continue to use your current build process (Gulp) and test out the newer stuff on your next project.