understrap/understrap

Underscores + Bootstrap = Understrap, the renowned open-source WordPress starter theme.

See: Official Demo | Read: Official Docs Page

Understrap WordPress Theme Framework

Website: understrap.com

Child Theme Project: github.com/understrap/understrap-child

Premium Child Themes: 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.

Documentation

Full documentation for this theme is available at docs.understrap.com.

Questions

For support requests and bugs, we recommend browsing our issues and opening a new issue if necessary. For more broad discussion, like questions about the roadmap, visit our discussion board.

Changelog

See changelog

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

Understrap Academy

Become an Understrap Expert. Presented by the team behind the Understrap Theme Framework, Understrap Academy is a collection of online courses that will help you speed up your development process, make your projects more profitable, and become an Understrap expert in record time.

License

Copyright 2022 Howard Development & Consulting, LLC. Understrap is distributed under the terms of the GNU GPL version 3

https://www.gnu.org/licenses/gpl-3.0.en.html

Credits

• Font Awesome: https://fontawesome.com/v4.7/license/ (Font: SIL OFL 1.1, (S)CSS: MIT)
• Bootstrap: https://getbootstrap.com | https://github.com/twbs/bootstrap/blob/main/LICENSE (MIT)
• WP Bootstrap Navwalker by Edward McIntyre & William Patton: https://github.com/wp-bootstrap/wp-bootstrap-navwalker (GNU GPLv3)

understrap's Issues

"Show older/newer comments" on last/first comment page.

Scenario:

• Run https://codex.wordpress.org/Theme_Unit_Test vs a WP install.
• Set to show only 3 toplevel comments.

View blog post with many comments ("Template: Comments").
You´ll see that it show "show newer" on page with latest comments and "show older" on last page.

Any chance to fix that? Thx in advance!

Image Alignment test page fail

Looking at this page: https://understrap.com/understrap/?page_id=1133 in chrome v51, the images don't have proper margins/padding as the text describes. Screenshot attached.

Bootstrap tooltips require Tether

I'm trying to include my own scripts for a child theme and am getting this javascript error:

Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)

As in the Bootstrap 4 documentation, tether should be included in the project:
http://v4-alpha.getbootstrap.com/components/tooltips/#overview

Even tough I'm developing a child theme, in my opinion it should be included as a dependence in the Understrap Framework.

I will try to include it in the project and submit a pull request, but as I am new to bower and project dependencies it might take a while (anyone to help me along?).

Anyways, if anyone starts working on this issue please let everybody know 😁

Segmentation fault 11

After have copied the theme on the themes directory, I run "bower install" and "npm install" to install dependencies and plugins.

When I run "gulp watch", I ve a error
"Segmentation fault: 11"

Did you know why?
The process is it correct?

Watch-bs task for BrowserSync at gulpfire.js

Following instructions from the updated readme.md terminal outputs:
"Task 'watch-bs' is not in your gulpfile"
Please give a task to correct gulpfire.js

screen reader text showing on desktop?

The "posts navigation" title shows at the bottom of pagination and I'm wondering why it shows on my desktop. I thought it was only supposed to show if you have some sort of accessibility feature enabled? Unless Windows 10 or firefox automatically enables it?

I was going to just use a display: hidden class, but I was just curious!

Also, semi-related: where do you edit the post nav? I can't find it anywhere... Ex: Change "Older Posts" to "More Posts"

Thanks!

Feature: FTP upload of compiled CSS files

I added these two tasks, which you may want to incorporate into the theme (or not):

https://gist.github.com/JoelSanchez/4ff2a8c6b0439ebf3334520522e485ac

Gulp Watch with BrowserSync?

Hi guys,

what do you think about combining the current "gulp watch" along with BrowserSync, so while we update the files it will automatically compile them and shows live updates on the browser?

Essentially something similar to Roots' Sage theme.

Slate for Documentation

Hi guys,

is there a chance eventually that you can include Slate - https://github.com/tripit/slate - so others can fork and propose changes to your documentation? I would like to contribute to it, especially for beginners :) Thanks so much!

Theme name change

Hi,

what is the easiest way to change the theme name folder? So not to use under wraps as a default theme name, but something custom-but keep the functionality of the understrap theme.

I want to build my own theme around understrap but not as a child theme-if you understand what I want.

Thanks

missing definition in custom-comments

Bottom of the file in the below function.
$req not defined. Was defined in previous function but not this one, getting PHP Notice.

function bootstrap3_comment_form( $args ) { $args['comment_field'] = '<div class="form-group comment-form-comment"> <label for="comment">' . _x( 'Comment', 'noun', 'dford' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> <textarea class="form-control" id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea> </div>'; return $args; }

Hope that helps

Owl Carousel won't start

Hi there,

I want to build a slider on a custom page.

`

      <div class="item">div content 1</div>
      <div class="item">div content 2</div>
      <div class="item">div content 3</div>

    </div>`

and in footer...

$('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } })

Got no errors in the console, bot the carousel won't start...

Thanks for ideas guys

Something wrong with the hero slider.

In the index.php of the template file:

if ( is_front_page() && is_home() ) {
get_sidebar('hero');

But it looks like there's no sidebar named hero anymore, I have tried the

get_sidebar('heroslider');

and it works.

But there's still no slide effect, and no class name of owl-carousel etc., like how the demo works.

So, could you please tell me what's the exact way to use the owl-carousel, or is this feature is given up?

Thanks

License

Hi,

are this theme under MIT license?
Can you add license to readme?

thanks

SCSS dependency paths

Hi, great theme, but I needed to edit the paths in:

sass/assets/owl-carousel2.scss
sass/assets/bootstrap4.scss
sass/assets/font-awesome.scss

Previously, they were like this:

@import "../../src/sass/owl-carousel2/owl.carousel";

Now they are like this:

@import "../../bower_components/OwlCarousel2/src/scss/owl.carousel";

Not sure if it is a bug or not, maybe I did something wrong (I executed npm install, bower install). Now everything works correctly.

Undefined variables in understrap.scss

$grid-gutter-width and $gray-light are undefined.

Mobile menu doesn't work fine

The mobile nav not works the right way. When you tap the toggle icon it starts and animation with vertical menu, and then it put all nav items horizontally.

Setting up the front page slider

I've done the following

• Click on Appearance → Widgets.
• Add two, or more, widgets of any kind to widget area “Hero”.
• That’s it.

Added some text boxes to the hero slider widget

Set a new page called home to the front page.

But I'm not getting a slider on the front page, there are no console errors.

npm install bower install gulp copy-assets and browserync all work flawlessly, anything I'm missing?

Edit do I manually have to add the slider to a page template?

 <div class="wrapper" id="wrapper-hero">
 <div class="owl-carousel">
 <?php dynamic_sidebar( 'hero' ); ?>
 </div><!-- .owl-carousel -->
</div><!-- #wrapper-hero --> 

Font Awesome not working

I might be completely missing something but I see the font awesome scss file in the parent and child themes. I see where it's imported in the theme.scss file but when I add the code for a font awesome icon I'm not getting anything. Am I missing something where it has to be activated or something?

Hero and static hero widgets not working

Installed theme locally. Am unable to display static or hero widgets.

Toggable Nav Tabs/Pills not working

1.Missing style for nav tabs/pills. (it's not a problem, it's easy to implement)

2.Toggable nav tabs/pills work only on first interaction.

Es. TAB A | TAB B | TAB C
If I click A, then B, then C it works, but If I try to re-click any of them it doesn't work.

Every tab work for only once.

Owl Javascript not found (including fix)

Hi Holger,
just wanted to let you know, that the owl-script cannot be found, which makes the slider non-working.

Failed to load resource: the server responded with a status of 404 (Not Found) http:///wp-content/themes//js/owl.carousel.min.js

It doesnt seem to get compiled by the gulp-task. The owl css however is getting compiled.

The fix is easy. Add the following code before the closing }); in the gulpfile.js

// owl JS files
    gulp.src(basePaths.bower + 'OwlCarousel2/dist/*.js')
        .pipe(gulp.dest('./js'));

style.css Template: understrap-master

hi. in order to work, i needed to change root style.css Template: understrap-master to point right to master theme

Starter or parent?

One clarification the README could maybe use...

Is understrap meant to be used as a starter theme (like underscores) where I'm editing/adding files to it? Or is it meant to be used as a parent theme that I don't touch?

missing Bootstrap classes

Hi,
really great idea to combine the power of _s with Bootstrap and great workflow.

I've tried to customise the theme a little bit and found that:

• there's no .navbar-right class (ok in version 3 stable)
• there are some issues with formatting tablist - shows as an ordinary list instead

Are there some Bootstrap resources missing or some features work differently in v. 4?

Thanks,
Piotr

mobile menu strange behaviour

How styles are applied , I can't fix it. When I add custom style, first default are applied, then my custom and there is a "jump" between styles. The same is when using clear understrap installation, is it a bug or I am missing something?
I put video on youtube https://youtu.be/qKck6qI3RTo

Dropdown menu no parent link

Hi Holger,
(My apologies if this isn't an issue but more a suggestion. Delete if need be.)

When there are dropdowns the parent link no longer works and is not clickable (#). To fix this you can modify the /inc/bootstrap-wp-navwalker.php file from line 90;

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href']           = '#';
$atts['data-toggle']    = 'dropdown';
$atts['class']          = 'nav-link dropdown-toggle';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['class']          = 'nav-link';
}

To

// Enable parent link dropdowns. If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
//$atts['data-toggle']   = 'dropdown';
$atts['class']           = 'nav-link dropdown-toggle';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['class']          = 'nav-link';
}

Also you need to add the CSS (in either /sass/Bootstrap4/_dropdowns.scss or /sass/theme/_theme.scss or whichever override you have)

.dropdown:hover .dropdown-menu { display: block; }

As I said delete if offtopic, but it may help someone else.

Cheers,
T+

Use Non-Minified theme.css file

Hi!

Because understrap is setup to produce both a theme.css and a theme.min.css file out of the box (from the scss), I'm assuming there is a way to tell wordpress to use the theme.css file rather than the theme.min.css file? I can't figure out how to do this though.

Any help is greatly appreciated!

Understrap dependencies

I'm planning to develop a new wordpress theme using understrap while i'm traveling. Please I'm want to know all the dependencies and everything understrap need to function properly (plugins or widgets...).

where do I add custom JS ?

What's the procedure for adding custom Javascript/jquery code ?

Caption shortcode showing

When I add a caption to an image, the caption shortcode shows on my pages instead of underneath the image.

Bootstrap boxed width .contrainer class

Hello,
I'm trying to change Understrap theme from full-width to boxed-width. I couldn't find an option in Wordpress, so I tried to make it in CSS but Bootstrap classes doesn't work for me.

Does Bootstrap classes works in Understrap?
Does Understrap supports or prevents boxed-width?
Is there any ready to use way to make it boxed-width instead drowning in css?

Thanks.

Default WP styles not loading?

Hi,

first of all I would like to thank you for awesome starter theme.

I have one issue I can not figure out. I am building a theme and I tried adding a gallery to a post and I noticed that default WordPress styles are not being loaded (wp-content.css). I was sure I did something wrong, but then I installed your latest theme and added a gallery and it is still not working. Pictures are displayed vertically no matter how many columns I choose in a gallery.

Thank you in advance,
Jure

get_search_form(); doesn't work

I'm trying to add search-box to somewhere in my project but it seems calling search box doesn't work.

I also tried on child theme and parent theme but it doesn't appear.

Consider ditching bower in favor of npm

Hello guys, great project. The dependency management and build process could be simplified by ditching bower in favor of npm, together with gulp-browserify. Here is a good explanation: https://gofore.com/stop-using-bower/
Would that be an option?

add sass guide to documentation

It would be nice to see a sass tutorial here to be able to start right from the scratch. What are you using sass on it's own sass with grunt suss with ruby and bundler?

Sass compass of cause.

By fixing this bug the theme willl get more useful and starting up will be much quicker for your fans.

Without gulp, bower etc.

Hello,

Can I get this theme without those gulp, bower etc and just the wordpress theme?

Best.

Getting started with child theme

Hi,

I want to use Understrap for a project, but I have an issue with using the child theme. The issue, is that the bootstrap override in _theme_variables.scss was not taken into account. But the varaibles define inside was accessible in the child theme stylesheet.

So I want to know if I done something wrong while installing Understrap and his child theme. There the steps I've follow :

1- I've put the understrap folder into the Wordpress themes folder
2- I've put the understrap-child folder into the Wordpress themes folder
3- In the child theme, I've done a npm install follow by an bower install
4- In the child theme, I've done agulp copy-assets command
5- In the child theme, I've done agulp watch command
6- In the file _theme_variables.scss I have change the $brand-primary value
7- I have refresh the home page, and the color have not change.
8- I have check, the gulp watch task is executed without error.

So do I have done something badly ?

Information on my system :

• Windows 10
• NPM version 1.4.28
• Bower version 1.7.7
• Gulp version 3.9.1

Thanks for your time,

Benjamin

Seems like there is an merge conflict in the gulfile.js

Some problem with compiling from scss

Hello:)
I have some problems with compiling from scss. Each time I try to compile Koala says /Users/myuser/Documents/Projekty/przedszkole/sass/child-theme.scss
Error: Invalid US-ASCII character "\xC2"
on line 6 of /Users/myuser/Documents/Projekty/przedszkole/sass/child-theme.scss
Use --trace for backtrace.

Can you help??

How to use Owl Carousel??

Hello
Please tell me how can i use owl carousel with child theme. i have tried adding widgets in Hero Slider Widget area but it does not work.

Struggling with sourcemaps

Hello

I've been tearing my hair out all day trying to get the CSS sourcemaps working.

I just can't get them to link back to the original files no matter what I do.

I just realised they don't seem to work on the demo here either: https://understrap.com/understrap/

Maybe they are working as intended, but I assumed that they should link back to the original files in Chrome Developer Tools, however all I see are line references to theme.min.css, which are obviously pretty useless.

Thanks for any help / insight!

EDIT:
After some more investigation I just noticed the code was added by @akkolad and I see he has actually made another pull request subsequent to his first one.
I can confirm that his new code does work :)

@akkolad could you confirm what commands you intended to run for both dev & production? I am a little confused looking at the code.

Jake

Purpose for /inc/scripts.php

found /inc/scripts.php which appears to be similar to /inc/enqueue.php but not included in the calls in the functions.php. Is there a purpose for this file or is it an orphaned file?

Thanks for an awesome template. Would love to see addition of autoprefixer to gulp tasks. I have added to my recent project, can offer pull request of my gulpfile and package.json if it helps.

./inc/scripts.php vs. ./inc/enqueue.php

Hi Holger,
above mentioned scripts.php doesn´t seem to get included anywhere for the sake of enqueue.php, can you confirm?

Production version?

Thank you for this awsome theme. I like it! It helps me fasten my workflow. But i got a question. What do I have to do when i want to put this theme in production? Can I delete the node and Bower folders? At the moment the template is more than 100mb's which is quite high in my opinion. What is the best workflow? Using a childtheme?

Thank you for your help

Undefined var in custom-comments.php

Notice: Undefined variable: req in F:\xampp\htdocs\wordpress\wp-content\themes\material-world\inc\custom-comments.php on line 25

<label for="comment" class="control-label">' . _x( 'Comment', 'noun', 'understrap' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label>

Widgets Override from child theme

How to I override the widgets from child theme?

Inputfields on modal not working

Hi, i am not sure because of understrap or a wordpress plugin, but i can not write text in input fields when they are inside a bootstrap4 modal dialog. any idea?

Date posted and modified run together.

I can't tell if this is a theme issue, but it seems that if you edit a post, it will have 2 dates posted next to each other: original post date and date modified. However; the date modified doesn't have any spacing after the original post date, or any indication of what it is.

No categories on admin page?

Hello,

I do not see categories in my dashboard when I create a new page. They are in the database under wp_terms. Are they turned off in this theme or is something wrong with my installation?