Bootscore Child

Note: Bootscore Child is not a standalone theme and requires Bootscore (the parent theme) to be installed.

Installation

1. Download the zip file here.
2. In your admin panel, go to Appearance > Themes and click the Add New button.
3. Click Upload Theme and Choose File, then select the bootscore-child.zip file. Click Install Now.
4. Click Activate to use your new theme right away.

How to Use

File structure

ToDo: Explain what the files do

bootscore-child/
├── assets/
│   └── img
│   │   ├── logo                       // Replace both svg logos with your ones
│   │   │   ├── logo.svg
│   │   └── └── logo-theme-dark.svg  
│   └── js
│   │   └── bootscore-custom.js        // Add custom JavaScript here
│   └── scss/
│   │   ├── _bootscore-custom.scss     // Add custom CSS/SCSS here
│   │   ├── _bootscore-utilities.scss  // Create utilities using the Utilities API
│   │   ├── _bootscore-variables.scss  // Add Bootstrap variables here 
│   └── └── bootscore.scss             // Imports Bootstrap source and theme/custom styles. Delete/Comment out everything what is not needed to reduce CSS filesize.
├── functions.php.                     // Imports all files from folder inc/
├── inc/
│   ├── enqueue.php                    // Enqueues bootscore.min.css and bootscore-custom.js
│   ├── icons.php                      // Change icons
│   └── logo.php                       // Change logo width and height
└── style.css                          // Theme meta. Can be also used for CSS overrides, but not recommended. Use _bootscore-custom.scss.

Logo

Replace the logo(s) in folder /assets/img/logo/ and adjust size in inc/logo.php:

/**
 * Logo size
 */
add_filter('bootscore/logo/width', function () {
  return '120';
});

add_filter('bootscore/logo/height', function () {
  return '40';
});

Templates

While template files can be overridden by copying them to the child theme, this should generally be your last resort. Whenever possible, use filters and actions to modify functionality — this approach is safer and easier to maintain during updates.

If you do need to override templates:

• Maintain the same folder structure as the parent theme.
• Example: Copy header.php to the child theme and modify bg-body-tertiary to bg-danger to make the navbar red. Repeat with footer.php as needed.
• For page templates, create a folder named page-templates in your child theme and copy the parent template file you want to edit.

Functions

Most parent theme functions are pluggable, meaning they can be safely overridden in the child theme’s functions.php file.

Filters & Actions

Bootscore provides numerous filters and actions that allow you to modify almost every aspect of the theme without copying files. This is the preferred method for customization, as it keeps your child theme lightweight and compatible with future updates.

SCSS

• Add custom CSS or SCSS code to /assets/scss/_bootscore-custom.scss.
• To modify Bootstrap variables, edit /assets/scss/_bootscore-variables.scss.

The SCSS compiler will fetch source files from the parent theme and compile them into your child theme’s /assets/css/bootscore.min.css automatically whenever changes are made.

WooCommerce

• WooCommerce scripts are disabled by default and only enabled if WooCommerce is installed.
• SCSS files are always included, but if WooCommerce is not used, it’s recommended to disable WooCommerce-specific styles for performance:
  1. Open /assets/scss/bootscore.scss in the child theme.
  2. Locate line: @import "bootscore-woocommerce";
  3. Comment out or delete this line.

JavaScript

ToDo: Remove jQuery and add docs how to enable it.

Add custom JS to js/custom.js.
If using jQuery, wrap your code in:

jQuery(function ($) {
  // Your code here
});

This ensures your code runs after jQuery has loaded.