The starter-bootstrap from them-es

New user of this wonderful starter theme and upgrade, add zip package creation

Hello!
I'm glad to have find this theme. Was using similar theme based on Foundation (FoundationPress, now deprecated) but as Bootstrap 5.x is more robust and have more features I was looking for a starter theme without bloat!

Not really an issue, but some suggestion:
-Upgrade to Bootstrap 5.1.3 (I changed it in the package.json and it seems alright for now).
-Add a script to generate a zip package (without source so it's light) we could upload directly to our wordpress theme folder. Very helpfull when we update the online/production website.
Something like:

// Create a .zip archive of the theme
function archive() {
  var time = dateFormat(new Date(), "yyyy-mm-dd_HH-MM");
  var pkg = JSON.parse(fs.readFileSync('./package.json'));
  var title = pkg.name + '_' + time + '.zip';

  return gulp.src(PATHS.package)
    .pipe($.zip(title))
    .pipe(gulp.dest('packaged'));
}

with

 # Paths for the package task to include/exclude in .zip archive
  package:
    - "**/*"
    - "!**/node_modules/**"
    - "!**/packaged/**"
    - "!**/src/**"
    - "!**/codesniffer.ruleset.xml"
    - "!**/composer.json"
    - "!**/composer.lock"
    - "!**/config.yml"
    - "!**/config.default.yml"
    - "!**/gulpfile.babel.js"
    - "!**/package.json"
    - "!**/package-lock.json"
    - "!**/webpack.config.js"

I just copied here what I add in Foundation press without adapting it to your folder structure but it just for the idea! :)

Site brand logo? (Navbar)

Hi,

Does the navbar not automatically use the site logo for navbar-brand? Instead of plain text I'd like to see a brand logo option maybe?

Could be added to wp-admin/themes.php > Customise as a checkbox use logo (like demo)/plain text.

Thanks.

Gutenberg Block Editor not adding styles.

When using the Gutenberg Block Editor for Posts the styling doesn't load.
Examples of not working: Pullqutuoes ,color options, Drop Caps etc...
Basic formatting like bold and Italic will work.

Anyone else have this problem?

Latency with Browser reload

Hi guys,

I like the theme, well done!

I am running Wordpress with the them.es theme in Docker and have every working, but Browser reload takes a while before refreshing (up to 3 sec delay).

UPDATE: it is not the Browser reload, it is the compiling of the SCSS that takes long..
[21:34:04] Finished 'build_css' after 4.79 s

Anything I missed?

Thanks

Deprecated dependencies?

Thank you for the theme, clean and simple!
By running npm install we ran into a few deprecations, please see below. Would this be something worth fixing on the theme distribution level or you advise is to get all fixes via NPM after npm install please?

npm install
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated

> [email protected] postinstall /home/wp-content/themes/bootstrap-52/node_modules/es5-ext
>  node -e "try{require('./_postinstall')}catch(e){}" || exit 0

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/glob-watcher/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of ts-node@>=9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of acorn@^8 but none is installed. You must install peer dependencies yourself.

added 678 packages from 549 contributors and audited 680 packages in 62.227s
found 2 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Why both gulp and webpack ??

Why does he have both? If the webpack is not used

Color modes not work

Color modes are added in bootstrap 5.3.0: https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode
But when I try to add data-bs-theme="dark" in header.php in <html> tag, it is not working as expacted.

Any help would be appreciated. Thank you.

Please show a woocommerce sample

Inconsistent use of curly braces for implications

There are many places where colon + endif is used for implication block, but right next to it, there is curly brace one, like in functions.php.

Use colon + endif only in PHP+HTML files, use curly braces in pure PHP files.

Bad:

/**
 * Add new User fields to Userprofile.
 *
 * @since v1.0
 */
if ( ! function_exists( 'themes_starter_add_user_fields' ) ) :
	// [...]
endif;


/**
 * Test if a page is a blog page.
 * if ( is_blog() ) { ... }
 *
 * @since v1.0
 */
function is_blog() {
	// [...]
}

Good:

/**
 * Add new User fields to Userprofile.
 *
 * @since v1.0
 */
if ( ! function_exists( 'themes_starter_add_user_fields' ) )  {
	// [...]
}


/**
 * Test if a page is a blog page.
 * if ( is_blog() ) { ... }
 *
 * @since v1.0
 */
function is_blog() {
	// [...]
}

Package vulnerabilities

Running npm install against the supplied package.json file (in the theme download), gives
"6 high severity vulnerabilities"

Any suggestions on how this should be handled? Forcing fixes just makes it worse unfortunately

In particular:
glob-parent <5.1.2
Severity: high
glob-parent before 5.1.2 vulnerable to Regular Expression Denial of Service in enclosure regex - GHSA-ww39-953v-wcq6
fix available via npm audit fix --force
Will install [email protected], which is a breaking change
node_modules/glob-stream/node_modules/glob-parent
node_modules/glob-watcher/node_modules/glob-parent
chokidar 1.0.0-rc1 - 2.1.8
Depends on vulnerable versions of glob-parent
node_modules/glob-watcher/node_modules/chokidar
glob-watcher 3.0.0 - 5.0.5
Depends on vulnerable versions of chokidar
node_modules/glob-watcher
glob-stream 5.3.0 - 6.1.0
Depends on vulnerable versions of glob-parent
node_modules/glob-stream
vinyl-fs 2.4.2 - 3.0.3
Depends on vulnerable versions of glob-stream
node_modules/vinyl-fs
gulp >=4.0.0
Depends on vulnerable versions of glob-watcher
Depends on vulnerable versions of vinyl-fs
node_modules/gulp

Use of content width

In functions.php there is definition of $content_width, but I can't find where it is used.

How can I import jQuery and other js files to main.js?

I'm trying to organize my js files on main.js. As of now, this is how my main.js looks like:

// Webpack Imports
import * as bootstrap from 'bootstrap';

import Search from  "./Search";
import MyNotes from "./MyNotes";
import Default from "./Default";

const search = new Search();
const mynotes = new MyNotes();
const default = new Default();

In MyNotes.js is where I import jquery and it looks like this

import $ from 'jquery';

class MyNotes{
	constructor(){
		alert("delete");
		this.events();
	}

	events(){
		$(".delete-note").on("click", this.deleteNote);
	}

	// Methods will go here
	deleteNote(){
		alert("delete");
	}
}

export default MyNotes;

But every time I run npm, I'm having this problem:

(node:10120) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument needs to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(node:10120) UnhandledPromiseRejectionWarning
(node:10120) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:10120) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

If I put my other js files inside main.js (for example the Search.js and Defaul.js which is the default js files from the install), it works properly but I'm still having trouble importing jquery inside main.js. I tried import $ from 'jQuery' also but also doesn't work. I can see that jquery is installed under node_modules folder but after failed attempts in importing it, I ran npm install jquery but was still the same error.

What am I doing wrong?

WordPress 6.01 Breaks Menu

Busy using the bootstrap theme to build a website for a client. I have noticed that menu items are not active and they are all added as custom link menu types. Any class changes to them are also not saved. I suspect WordPress changed something in the version 6 update that is breaking the Nav_Walker class.

I used this link to generate a new base theme today: https://them.es/starter-bootstrap/

Please see image below:

Dart SASS: Using / for division is deprecated

A couple instances of $grid-gutter-width/2; will eventually need replacing by math.div($grid-gutter-width, 2). Will also need @use "sass:math"; before any imports.
(PR provided if you're ready for this.)

The implementation option must be passed to the Sass task

When I run grunt watch and when I did change in main.scss I got error:

File "main.scss" changed.
Running "sass:dist" (sass) task
Fatal error: The implementation option must be passed to the Sass task

the_content(); does not work anywhere in template

I noticed the the_content() does not work, I have put it inside the loop and it doesn not pull the content. I am pulling my hair as I am not sure why..can you please assist?

JQuery don´t work on latest Wordpress Version

Hi,
It´s possible to fix this issue ? Wordpress version (5.5) (https://wptavern.com/major-jquery-changes-on-the-way-for-wordpress-5-5-and-beyond) removes jquery migrate.

Error: PostCSS plugin - after npm run watch and changing something from main.scss

Hi

I have installed npm and run npm run watch. After I changed the main.scss, it gives this error

[01:24:49] Starting 'watch'...
[01:25:02] Starting 'build_css'...
[01:25:03] 'build_css' errored after 1.05 s
[01:25:03] Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (C:\xampp\htdocs\user\wp-content\themes\themename\node_modules\postcss\lib\processor.js:167:15)
    at new Processor (C:\xampp\htdocs\user\wp-content\themes\themename\node_modules\postcss\lib\processor.js:56:25)
    at postcss (C:\xampp\htdocs\user\wp-content\themes\themename\node_modules\postcss\lib\postcss.js:55:10)
    at cssnanoPlugin (C:\xampp\htdocs\user\wp-content\themes\themename\node_modules\cssnano\dist\index.js:145:31)
    at build_css (C:\xampp\htdocs\user\wp-content\themes\themename\gulpfile.js:66:3)
    at bound (domain.js:416:15)
    at runBound (domain.js:427:12)
    at asyncRunner (C:\xampp\htdocs\user\wp-content\themes\themename\node_modules\async-done\index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:77:11)

What could be the fix for this?

Problem with the webpack config

When i start with the npm run watch command. It's opening the listing directory on my browser.

I've got no "error" or something visual display.

The npm install is ok.

I tried to add a publicPath for the output but nothing change.

Any idea ?

Critical Error Caused by Footer

I am new to this so apologies if something I have done incorrectly has caused this but I don't believe so.

After installing the theme every page on the site shows this error:

Parse error: syntax error, unexpected ')' in /home/xxx/public_html/xxx/wp-content/themes/xxx/footer.php on line 39
There has been a critical error on this website.

I removed the comma on line 38 of footer.php and that fixes the issue.

https://github.com/them-es/themes-starter-bootstrap/blob/a326af152d3272ee5ffbca9b67fde2f0c779fb8a/footer.php#L24-L40

"npm install" warnings and errors

I'm getting a couple of warnings and errors from $ npm install (node.js v14.17.1):

After $ npm audit fix the console outputs:

fixed 0 of 7 vulnerabilities in 1327 scanned packages
4 vulnerabilities required manual review and could not be updated
3 package updates for 3 vulnerabilities involved breaking changes

Here's the full $ npm install installation protocoll
(sorry, but github formats parts of the code, because of the quotation marks)
↓-----------------------------------------------------------------------↓

[email protected] install /fakepath/node_modules/glob-watcher/node_modules/fsevents
node install.js

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/Users/fakepath/.nvm/versions/node/v12.10.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack at ChildProcess.emit (events.js:209:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 18.7.0
gyp ERR! command "/Users/fakepath/.nvm/versions/node/v12.10.0/bin/node" "/Users/fakepath/.nvm/versions/node/v12.10.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /fakepath/node_modules/glob-watcher/node_modules/fsevents
gyp ERR! node -v v12.10.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok

[email protected] install /fakepath/node_modules/watchpack-chokidar2/node_modules/fsevents
node install.js

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/Users/fakepath/.nvm/versions/node/v12.10.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack at ChildProcess.emit (events.js:209:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 18.7.0
gyp ERR! command "/Users/fakepath/.nvm/versions/node/v12.10.0/bin/node" "/Users/fakepath/.nvm/versions/node/v12.10.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /fakepath/node_modules/watchpack-chokidar2/node_modules/fsevents
gyp ERR! node -v v12.10.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok

[email protected] install /fakepath/node_modules/node-sass
node scripts/install.js

Cached binary found at /Users/fakepath/.npm/node-sass/4.14.1/darwin-x64-72_binding.node

[email protected] postinstall /fakepath/node_modules/node-sass
node scripts/build.js

Binary found at /fakepath/node_modules/node-sass/vendor/darwin-x64-72/binding.node
Testing binary
Binary is fine
added 1326 packages from 822 contributors and audited 1327 packages in 15.546s

49 packages are looking for funding
run npm fund for details

found 7 vulnerabilities (1 low, 4 moderate, 2 high)
run npm audit fix to fix them, or npm audit for details

index.php is defined as a custom page template.. Why?

The default file index.php is defined as custom page template as seen it's top comments.

Why was this done?

It adds confusion to the WordPress template hierarchy. I don't feel it should be done this way. The index.php should be the final fall back if all other template files are not found.

Was the intention is use the index.php file as a selectable template for the Page Post types? If that is the case, it doesn't work correctly. When choosing it as a template for Page Post types in Dashboard, the blog index won't appear. Only the pages content appears , not the main index posts.

I think the better solution would to remove the comments on the top of index.php and create a new custom template file for blog post layout if needed. Some codes changes would have to be done to the loop.

Any one experienced this issue before?

Here are some links that could be helpful to get a better understanding:

https://wordpress.stackexchange.com/questions/251205/creating-custom-blog-page-template-the-right-way
https://developer.wordpress.org/themes/basics/template-hierarchy/

Css

Where to add custom css

Increase menu levels with WP Bootstrap Navwalker (customized)

Hi,

When having more than one sub-level menu items, it's not being output. I would like to have the following:

Parent level

Child level 1
- Child level 2 ←

However, now it seems as if I'm only allowed to have one sub-level (Child level 1).

Is there an easy fix for this? I've noticed for instance in the header.php, in the wp_nav_menu array, there isn't any 'depth' => 2, key/value pairs.

Today there's only this:

// Loading WordPress Custom Menu (theme_location).
        wp_nav_menu(
          array(
            'theme_location' => 'main-menu',
            'container'      => '',
            'menu_class'     => 'navbar-nav ms-auto',
            'fallback_cb'    => 'WP_Bootstrap_Navwalker::fallback',
            'walker'         => new WP_Bootstrap_Navwalker(),
          )
        );

Thanks!

Error in plugin "webpack-stream"

Hello, 👋

All of a sudden I got this error:
[13:01:03] Starting 'build_js'... [13:01:08] 'build_js' errored after 4.34 s [13:01:08] Error in plugin "webpack-stream"

with message: Message: Module not found: Error: Can't resolve 'os' in 'C:\laragon\www\ALLboards\wp-content\themes\ALLboards\node_modules\append-buffer'

After that I have zillion lines of suggestions what should be done: