bootScore 5.2.0.0

This is a major update that we have been waiting for a long time. Bootstrap 5.2.0 stable arrived on Tuesday 19, 2022 and here we go! Release contains a lot of improvements in theme structure, some pretty cool new features and updated libraries.

Thanks to 11 contributors who made this release possible. But, before jumping straight to your dashboard and download it, there are some things you should know:

• Bad news: We changed a lot.
• Good news: Changes to prepare your child for this update are done in 3 minutes.

Read here what’s new, what’s dropped and prepare your child step-by-step. Check the changelog for detailed information.

What’s new

Bootstrap

CSS Variables

Most components are using now CSS variables. Why this is amazing and what you can do with this is explained in the Bootstrap blog.

Scrollspy

Breaking

This component is completely refactored using Intersection Observer. It’s much more easier to activate, full URL’s can be used and you do not have to deal with Conditional Menu plugin anymore if you want to create an one-page site with multiple sub pages.

If you are using Scrollspy on your page, you can remove the activating snippet in your functions.php. Paste instead following snippet to your child’s custom.js:

jQuery(function ($) {

  // Activate Scrollspy
  $('.entry-content').scrollspy({
    target: '#bootscore-navbar'
  })

});

Internet Explorer Alert

We found a bug that bootscore_ie_alert() gets cached and shown in every browser if first visitor on a fresh installation browsed the site by Internet Explorer. We removed the hook in header.php, empty the function and replaced PHP alert version by JavaScript. In next update we will remove the empty function. To be prepared for the next update, open your header.php and scroll down to the bottom. There you will find this:

<?php bootscore_ie_alert(); ?>

Delete snippet.

SCSS

Breaking

main.css

We’ve routed the compiled output from bootstrap.min.css to main.css. This is a logical step because all static CSS is now SCSS and helps to separate them in folders.

• Open in your child folder css and copy folder scss to your child’s root folder
• Open this folder and rename bootstrap.min.scss to main.scss
• If you have local installed Google fonts, change paths from ../../ to ../
• Change file enqueue snippet in your child’s functions.php as described below

Newer child-themes (after September 29 2021)

Child functions.php lines 10-12

// Compiled Bootstrap
$modified_bootscoreChildCss = date('YmdHi', filemtime(get_stylesheet_directory() . '/css/lib/bootstrap.min.css'));
wp_enqueue_style('bootstrap', get_stylesheet_directory_uri() . '/css/lib/bootstrap.min.css', array('parent-style'), $modified_bootscoreChildCss);

Replace snippet with this:

// Compiled main.css
$modified_bootscoreChildCss = date('YmdHi', filemtime(get_stylesheet_directory() . '/css/main.css'));
wp_enqueue_style('main', get_stylesheet_directory_uri() . '/css/main.css', array('parent-style'), $modified_bootscoreChildCss);

Older child-themes (before September 29 2021)

Find:

// Overide bootstrap.min.css in child-theme
function bootscore_replace_bootstrap() {

    // Dequeue parent-theme bootstrap.min.css
    wp_dequeue_style( 'bootstrap' );
    wp_deregister_style( 'bootstrap' );

    // Enqueue new bootstrap.min.css in child-theme
    wp_enqueue_style( 'child-theme-bootstrap', get_stylesheet_directory_uri() .'/css/lib/bootstrap.min.css' , array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'bootscore_replace_bootstrap', 20 );

Replace:

// Overide main.css in child-theme
function bootscore_replace_bootstrap() {

    // Dequeue main.css
    wp_dequeue_style( 'main' );
    wp_deregister_style( 'main' );

    // Enqueue new bootstrap.min.css in child-theme
    wp_enqueue_style( 'main', get_stylesheet_directory_uri() .'/css/main.css' , array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'bootscore_replace_bootstrap', 20 );

Force recompile and source-map

Theme has now a developer mode. To activate it, add following snippet to wp-config.php:

/* Dev mode to force recompile scss and add source map */
define('WP_ENVIRONMENT_TYPE', 'development');

• scssphp will now recompile on every page load, no matter if you changed something in scss files or not.
• Creates a scss source-map. Needless to say that this is awesome helpful.

However, dev mode will slow down page load, delete snippet when development is finished.

WooCommerce

Quantity Buttons

The quantity input has now -/+ input-group buttons in product and cart page. This has a nice side effect to the add-to-cart-button which now uses the entire remaining width. The button is more present and invites more to click on it. Go in the shop to a free product and press + button to how many pieces of the product you want to buy. You can update amount of products added to your cart in cart page by this buttons as well.

Bootstrap Product Tabs

The default WC tabs on the product page have been replaced with Bootstrap tabs and are editable via variables.

Font Awesome 6 free

Font Awesome Free has been updated to version 6. All icons in files have been changed, but you don’t need to change the icons in your child or content, because FA6 has fallback to FA5 icons.

Page/Post templates

Breaking

Templates for posts and pages (except page.php and single.php) moved to subfolders page-templates and single-templates. When updating your site, all pages and posts will fallback to these both template files. Two ways to fix this:

• Set templates in backend manually. Fine for small sites or
• Simply copy all page-*.php and single-*php templates to your child’s root folder. Better for larger projects.

Responsive Offcanvas Sidebar

The sidebar now uses the Bootstrap 5.2.0 Responsive Offcanvas component. Resize your browser to mobile view and scroll to top on this page. Click on the button “Open side menu” and the sidebar opens in offcanvas.

Removed unused loop templates

The templates for category-*php, author-*php and archive-*.php are now moved from the theme folder into an own repo. You get them now in the download section. Usage is the same like before, just copy files to your child’s root folder and rename them.

Removed smooth scroll script

bootScore had a jQuery script for smooth scrolling since first release. But since Mac Safari 14.5 and iOS 14.5 (March 2022) all major browsers supports now scroll-behaviour: smooth; and this script is history now. You can simply set the offset by adding scroll-padding-top: 100px; to the html element.

Removed dropdown slide effect

We removed the slide effect for dropdowns, because this has issues with dropdown positions and rtl sites. If you want to use slide effect in your project, simply add following snippet to your child’s custom.js:

jQuery(function ($) {

  // Dropdown menu animation
  // Add slideDown animation to Bootstrap dropdown when expanding.
  $('.dropdown').on('show.bs.dropdown', function () {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // Add slideUp animation to Bootstrap dropdown when collapsing.
  $('.dropdown').on('hide.bs.dropdown', function () {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

});

Composer

You can now install bootScore and manage dependencies with Composer. If you’re interested, check the installation docs.

New translations

• Português, thanks to Gustavo Silva
• 繁體中文, thanks to TershiXia
• ελληνική, thanks to Alexandros Kourmoulakis

How to update at a glance

1. Backup your site
2. Remove Internet Explorer warning snippet in header.php
3. Open folder css in your child and copy folder scss to your child’s root
4. Open folder scss and rename bootstrap.min.scss to main.scss
5. Change enqueue snippet in child’s functions.php like described above
6. Check if you have ../../ paths for Google fonts in yous scss and change them to ../
7. Upload new bootscore-main.zip
8. Reload page
9. Select page/post templates in your backend manually or simply copy all page-*.php and single-*.php templates to your child’s root folder

What else?

Did you know that the bS Grid plugin can now show items in an Accordion?

Have a great day!

Basti