Official Demo | Read: Official Docs Page
See:Understrap WordPress Theme Framework
Website: https://understrap.com
Child Theme Project: https://github.com/understrap/understrap-child
Premium Child Themes: https://understrap.com/child-themes/
About
Understrap is the renowned open-source WordPress starter theme that combines Underscores with Bootstrap. Trusted by more than 100,000 developers.
License
Copyright 2021 Howard Development & Consulting, LLC Understrap is distributed under the terms of the GNU GPL version 2
http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
Changelog
See changelog
Documentation
Full documentation for this theme is available at docs.understrap.com.
Basic Features
- Combines Underscore’s PHP/JS files and Bootstrap’s HTML/CSS/JS.
- Comes with Bootstrap (v4 and/or v5) Sass source files and additional .scss files. Nicely sorted and ready to add your own variables and customize the Bootstrap variables.
- Uses a single minified CSS file for all the basic stuff.
- Font Awesome integration (v4.7.0)
- Jetpack ready
- WooCommerce support
- Contact Form 7 support
- Child Theme ready
- Translation ready
Installation
There are several ways to install Understrap. We'll look at three of them: (1) classic install by uploading Understrap to a WordPress install, (2) using npm, and (3) using the theme directory in WordPress.
Classic install
- Download the understrap folder from GitHub or from https://understrap.com
- IMPORTANT: If you download it from GitHub make sure you rename the "understrap-master.zip" file just to "understrap.zip" or you might have problems using child themes!
- Upload it into your WordPress installation theme subfolder:
/wp-content/themes/
- Login to your WordPress backend
- Go to Appearance → Themes
- Activate the Understrap theme
npm install
- Open your terminal
- Change to the directory where you want to add Understrap
- Type
npm install understrap
WordPress.org install
- Open your WordPress backend
- Click on "Appearance -> Themes"
- Hit the "Add new" button
- Search for "Understrap"
- Hit the "install" button
- Activate the theme
Developing With npm, postCSS, Rollup, SASS and BrowserSync
This theme uses sass and postCSS to handle compiling all of the styles into one style sheet. The theme also includes rollup.js to handle javascript compilation and minification. These choices are based on the same libraries and npm commands used in Bootstrap. In addition, it comes with Browser Sync to handle live reloading while you develop.
Confused by All the CSS, SCSS, and SASS Files?
Some basics about the files that come with Understrap:
- The theme itself uses the
/style.css
file only to identify the theme inside of WordPress. The file is not loaded by the theme and does not include any styles. - The
/css/theme.css
and its minified little brother/css/theme.min.css
file(s) provides all styles. It is composed of different SCSS sets and one variable file, all imported at/src/sass/theme.scss
- Your design goes into:
/src/sass/theme
.- Override Bootstrap by addind your variables to the
/src/sass/theme/_theme_variables.scss
- Add your custom styles to the
/src/sass/theme/_theme.scss
file - Or add other .scss files into it and
@import
it into/src/sass/theme/_theme.scss
.
- Override Bootstrap by addind your variables to the
The same goes for Javascript. Just add your javascript to /src/js/custom-javascript.js
and let rollup.js handle the rest.
Installing Dependencies
- Make sure you have installed Node.js and Browser-Sync (optional) on your computer globally
- Then open your terminal and browse to the location of your Understrap copy
- Run:
$ npm install
Running
To work with and compile your Sass and Javascript files on the fly start:
npm run watch
Or, to run with Browser-Sync:
First change the browser-sync options to reflect your environment in the file /build/browser-sync.config.js
in the beginning of the file:
module.exports = {
"proxy": "localhost/", // Change here
"notify": false,
"files": ["./css/*.min.css", "./js/*.min.js", "./**/*.php"]
};
then run:
npm run watch-bs
Bootstrap 4 Legacy Build Process
Some of our build tasks have been duplicated to support both Bootstrap 4 and Boostrap 5 asset generation. The default version of tasks will generate v5 assets.
CSS Tasks npm run css
will generate v5 assets, while npm run css-bs4
will generate necessary assets for v4.
JS Tasks npm run js
will generate v5 assets, while npm run js-bs4
will generate necessary assets for v4.
Watch Tasks npm run watch
and npm run watch-bs
will only generate for v5. Once complete, run npm run dist
to update v4.
Dist Task npm run dist
will generate both v4 & v5 assets.
Other Assets This theme also includes a few additional files directories to support Bootstrap 4 in /src/build-bootstrap4/
, /src/sass/assets/bootstrap4/
, and /src/js/bootstrap4.js
Block Editor (Gutenberg) Support
As of version 1.0.0, Understrap supports the block editor. The theme include "Bootstrap" styles automatically for default blocks like tables, captions, and blockquotes. Even further, the theme automatically parses your Bootstrap variables to load your custom color palette into the block editor, ensuring that your color choices match the front-end of the site.
Note: Wide- and full-width blocks will not work with the sidebar templates. They'll simply display in a normal width. They will work, however, with any full width templates or if sidebars are globally disabled in the customizer.
How to Use the Built-In Widget Slider
The front-page slider is widget driven. Simply add more than one widget to widget position “Hero”.
- Click on Appearance → Widgets.
- Add two, or more, widgets of any kind to widget area “Hero”.
- That’s it.
RTL styles?
Add a new file to the themes root folder called rtl.css. Add all alignments to this file according to this description: https://codex.wordpress.org/Right_to_Left_Language_Support
Page Templates
Understrap includes several different page template files to render a number of unique layouts.
Blank Template
The blank.php
template is useful when working with various page builders and can be used as a starting blank canvas.
Empty Template
The empty.php
template displays a header and a footer only. A good starting point for landing pages.
Sidebar Templates
The theme also includes a number of templates for enabling the right and left sidebars.
Full Width Template
The fullwidthpage.php
template has full width layout without a sidebar.
Licenses & Credits
- Font Awesome: https://fontawesome.com/v4.7/license/ (Font: SIL OFL 1.1, (S)CSS: MIT)
- Bootstrap: http://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (MIT)
- WP Bootstrap Navwalker by Edward McIntyre & William Patton: https://github.com/wp-bootstrap/wp-bootstrap-navwalker (GNU GPLv3)
Cannot read property 'fn' of undefined
Hi, this is first time I use this theme, and someone before me created the website. I am facing this error :
Uncaught TypeError: Cannot read property 'fn' of undefined: child-theme.min.js?ver=0.1.4:formatted:1318
Can someone give me a hint what I am missing here? JS code is :e.fn.emulateTransitionEnd = o,
Thank you.
UnderStrap Up For Sale
Hey everybody
The owner of UnderStrap has put the whole project up for sale, including:
If you are interested you can check out the Flippa listing here:
https://flippa.com/10806173-e-commerce-internet
Let me know if you have any questions and I'll do my best to answer them
Alex
New and improved gulp4 workflow
All dev assets now live in ./src That means there is no ./sass folder anymore. Instead it lives in ./src/scss/
There is currently no need for theme.css/js and theme.min.css/js Instead files are being built according to task. So
npm run build
will create minified and uglyfied versions of theme.css/jsUnderstrap now support ES6 Components can be created in ./src/js/components and should be imported in ./src/js/theme.js
In ./src/js/theme.js you can also include regular js and jQuery scripts
You do not need to make workarounds to use $ instead of jQuery. This should be handled automatically by webpack. Yes there is webpack and gulp 😬
Available Commands
npm run start
watch, compile and reload. replacesgulp watch bs
npm run build
same asgulp dist
gulp styles
compile scss to css with sourcemapgulp styles --prod
compile scss to css minify etc. without sourcemapgulp images
compress imagess and move to ./imagesgulp scripts
compile js, es6 components and minifygulp clean
delete distgulp dist
build distgulp watchForChanges
replaces gulp watch since watch is reservedgulp copyAssets
replaces copy-assetsRoadmap?
Issue is about..
It would be cool to have a Roadmap for an upcoming release on WordPress.org.
For that we should have..
Can't run browsersync on port 8080 (connection refused)
Issue is about..
Please tell us about your environment:
--
Issue Overview for Bugreports
Steps to reproduce?
gulpconfig.json
to setgulp watch-bs
.www.understrap.local:8080
in Chrome.The normal site runs okay @
www.understrap.local
using AMPPS for Mac.Help appreciated.
Stripe input fields for CC payment are unusable
Issue is about..
Please tell us about your environment:
Issue Overview for Bugreports
Steps to reproduce?
Who is the bug affecting?
All users trying to checkout with WooCommerce and Stripe payment gateway.
What is affected by this bug?
Taking Credit Card Payments. The form fields aren't usable so no one can checkout using Stripe as their payment gateway. Screenshot: https://d.pr/i/wmdQVt
When does this occur?
At Checkout
Where on the platform does it happen?
There's an issue with the understrap theme, as this doesn't happen on Twenty Seventeen
How do we replicate the issue?
Are there any related Issues and/or PRs?
I don't believe so, no.
Screenshots / Video
https://d.pr/i/wmdQVt
Expected behavior
Text inputs should be usable.
Todos
Other Comments
Template out of date after updating to latest WooCommerce (4.4.0)
Issue is about..
After updating to the latest WooCommerce version, it notified about an outdated template file that understrap is using. Are there any major changes to this particular template? Can I just carry on using it as usual or do I need to delete or edit a line (or rather lines) on the template?
Outdated Template Warning
doughnut/woocommerce/cart\cart.php version 3.8.0 is out of date. The core version is 4.4.0
Use OOP (Object Orientated) design patterns / classes
Issue is about..
Hi, I've rebuilt the functions.php to call a classes so we can manage the functions in the theme in a more structured way according to best practice.
Is there any interest for me to share this or is there a particular reason this has not been adopted already?
Using classes is much more scalable when building more complex functionality within the understrap theme.
Thanks
Official UnderStrap Feature Request List
According tto @stef-k suggestion I open up an "Feature Request" list here. Comment any idea you have below this post. Add your +1 if you like a specific comment/request. If it sounds good and useful I will add it to this list. Features should be useful for the majority of UnderStrap developers/users. So too specific feature requests (for example for a very uncommon plugin) will not be added. Sorry!
Feature Requests / Bug Hunt Backlog:
0.5.0 release:
[x] Page template with sidebar on the left (Discussions here: https://github.com/holger1411/understrap/issues/116)
[x] Clean (numeric) page pagination (Discussions here: https://github.com/holger1411/understrap/issues/127)
[x] More languages
[x] Make functions pluggable
[x] WooCommerce templates for product pages, category, checkout etc.
[x] Fixing translation in author template (Discussions here: https://github.com/holger1411/understrap/issues/107)
Ongoing task(s):
Backlog (future releases):
There´s 37 Pull Requests..
@holger1411 @holgerkoenemann @UnderstrapFramework
Please delete anything that does not apply for you!
Issue is about..
Please tell us about your environment:
Issue Overview for Bugreports
Steps to reproduce?
Take a peep into pull requests...
Who is the bug affecting?
Everyone using Understrap
What is affected by this bug?
The whole projekt
When does this occur?
Like since the last release
Where on the platform does it happen?
No comment. Everywhere.
How do we replicate the issue?
Check pull-requests.
Are there any related Issues and/or PRs?
Yeap. A LOT.
Screenshots / Video
Expected behavior
Todos
MERGE?
To all contributors: Wanna see your profile/link on understrap.com
Hey @KyleRayMorgan , @Thomas-A-Reinert , @diegoversiani , @jessijean , @akkolad , @taylorgorman , @lucaspowa , @tedgeving , @Lidbetter ! Thx for contribution to understrap or understrap-child! :thumbsup: I´am planning a "contributor" section on https://understrap.com as a small "thank you". Anyone here who want to see her/his profile pic + Github handle with a profil link on the understrap website? A link to your own website/blog/company is okay, too. Leave a comment if thats okay for you... and additional infos (if needed) Let me know!
Bump @rollup/plugin-commonjs from 23.0.2 to 24.0.0
Bumps @rollup/plugin-commonjs from 23.0.2 to 24.0.0.
Changelog
Sourced from
@rollup/plugin-commonjs
's changelog.Commits
c4c26a5
chore(release): commonjs v24.0.04766d93
fix(commonjs)!: check if defaultIsModuleExports is auto for getDefaultExportF...2c2fe9b
chore(release): commonjs v23.0.7dcb86a9
fix(commonjs): produce code which works when __esModule is already defined (#...18e6c31
chore(release): commonjs v23.0.6f5aa3c3
fix(commonjs,dynamic-import-vars,inject,replace,strip): update magic-string (...75e9ff4
chore(release): commonjs v23.0.539a39d7
fix(commonjs): resolve export exports not found (#1363)7b62557
chore(release): commonjs v23.0.4a47c153
fix(commonjs): declaration tag@default
for ignoreTryCatch + fix some typos (...Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump @babel/core from 7.19.6 to 7.20.7
Bumps @babel/core from 7.19.6 to 7.20.7.
Release notes
Sourced from
@babel/core
's releases.... (truncated)
Changelog
Sourced from
@babel/core
's changelog.... (truncated)
Commits
d414940
v7.20.76757a60
Rewritetransform-block-scoping
plugin (#15200)362451b
chore: Enable eslint ruleno-unnecessary-type-assertion
(#15260)e5e1369
fix: Computed properties should keep original definition order (#15232)29a97b8
v7.20.5f6546d7
Bump typescript to 4.9.3 (#15202)5f19f62
Bump babel deps (#15187)12a58cb
v7.20.277f3700
fix:@babel/node
repl and enableno-use-before-define
rule (#15124)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump szepeviktor/phpstan-wordpress from 1.1.3 to 1.1.6
Bumps szepeviktor/phpstan-wordpress from 1.1.3 to 1.1.6.
Release notes
Sourced from szepeviktor/phpstan-wordpress's releases.
Commits
2778454
Support multiple variants (#135)3934e62
Remove environment configuration (#132)3930c97
Hook callback false positives formixed
return type (#130)4800e7c
Fix AssertWpErrorTypeSpecifying extensions (#127)ca63952
Delete acf-pro-generate-stubs.sh4cc218e
AddAssertWpErrorTypeSpecifyingExtension
and `AssertNotWpErrorTypeSpecifyin...f4d433c
Always import classes (#119)c02f76a
Run tests on lowest deps also (#123)6572e70
Fix FQCN types (#122)e150358
Add type checking for hook callbacks inadd_action
andadd_filter
(#107)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump caniuse-lite from 1.0.30001430 to 1.0.30001441
Bumps caniuse-lite from 1.0.30001430 to 1.0.30001441.
Commits
713c95b
Update caniuse-db 1.0.300014413538b6f
Update caniuse-db 1.0.30001439e5a0843
Update caniuse-db 1.0.30001436660ecb7
Update caniuse-db 1.0.30001435bbec229
Update caniuse-db 1.0.300014349d61fd3
Update caniuse-db 1.0.30001431Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump phpstan/phpstan from 1.9.0 to 1.9.4
Bumps phpstan/phpstan from 1.9.0 to 1.9.4.
Release notes
Sourced from phpstan/phpstan's releases.
... (truncated)
Commits
d03bcce
PHPStan 1.9.4b22aa05
Updated PHPStan to commit 4025209062e31619077197006ce44b5d60a9f2c1811db85
Updated PHPStan to commit a7fed03bbf1bef545c8afcbf6c906ac93b34c876274d06e
Infinite recursion regression testad9d3c7
Updated PHPStan to commit a8975b1800d6c5cb88a6af02e132b4e44e093fc37a65fac
Updated PHPStan to commit 2a61ebc7d07888dbb2836147edaa21b78a983065c0086d9
output-format: add info about editorUrlTitle15377d9
Updated PHPStan to commit 901d789a45f0682bf6adbdfde516ec1011d873bb9a25ace
Updated PHPStan to commit bc4b2fe0d83a0e601448dbdaa8b0a288342c23f389c729c
Updated PHPStan to commit 03786827d92df439c3a31760bcd98d560035a33fDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump sass from 1.56.0 to 1.57.1
Bumps sass from 1.56.0 to 1.57.1.
Release notes
Sourced from sass's releases.
... (truncated)
Changelog
Sourced from sass's changelog.
Commits
5522c17
Run "dart pub upgrade" rather than "pub upgrade" (#1851)4349769
Create dependabot.yml (#1849)100f76f
Implement string.split() (#1839)236b83f
Delete dev dependency on Sass when releasing the embedded compiler (#1850)641d8e1
Be strict about whitespace in custom functions (#1848)e87176a
Add a factory method for creating host callable (#1829)790eb8a
Update CHANGELOG for embedded-host-node fixes (#1828)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)