The starter child theme for Understrap, the renowned open-source WordPress starter theme.
Basic Child Theme for Understrap Theme Framework: https://github.com/understrap/understrap
Understrap Child Theme shares with the parent theme all PHP files and adds its own functions.php on top of the Understrap parent theme's functions.php.
IT DOES NOT LOAD THE PARENT THEMES CSS FILE(S)! Instead it uses the Understrap Parent Theme as a dependency via npm and compiles its own CSS file from it.
Understrap Child Theme uses the Enqueue method to load and sort the CSS file the right way instead of the old @import method.
Add your own CSS styles to
/src/sass/theme/_child_theme.scssor import you own files into
To overwrite Bootstrap's or Understrap's base variables just add your own value to:
For example, the "$primary" variable is used by both Bootstrap and Understrap.
Add your own color like:
/src/sass/theme/_child_theme_variables.scssto overwrite it. This change will automatically apply to all elements that use the $brand-primary variable.
It will be outputted into:
So you have one clean CSS file at the end and just one request.
Add your own JS to
/js/child-theme.min.js. If you'd like to add additional files, you'll need to add the filenames to the Rollup.js config file:
Some basics about the files that come with Understrap: - The theme itself uses the
/style.cssfile only to identify the theme inside of WordPress. The file is not loaded by the theme and does not include any styles. - The
/css/child-theme.cssand its minified little brother
/css/child-theme.min.cssfile(s) provides all styles. It is composed of different SCSS sets and one variable file, all imported at
/src/sass/child-theme.scss- Your design goes into:
/src/sass/child-theme. - Override Bootstrap by adding your variables to the
/src/sass/theme/_child_theme_variables.scss- Add your custom styles to the
/src/sass/theme/_child_theme.scssfile - Or add other .scss files into it and
$ npm install
To work and compile your Sass files on the fly start:
npm run watch
Or, to run with BrowserSync:
First change the browser-sync options to reflect your environment in the file
/build/browser-sync.config.jsin the beginning of the file:
npm run watch-bs
This child theme uses Bootstrap 5 and requires Understrap Parent Theme 1.1 or greater for best functionality. It does not create JS or CSS files that work with Bootstrap 4 markup. In fact, in the
functions.phpfile, this child theme overrides the parent theme's customizer settings.
If you want to build a child theme with Bootstrap 4, please use the 1.0.1 child theme release as it was the last version built to support Bootstrap 4.