Loading...

Bootscore Child

| 92 Comments on Bootscore Child

The Bootscore Child Theme serves as a foundation for customizing Bootscore without modifying the parent theme. By using a child theme, you can safely update Bootscore without losing your customizations.

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

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/main.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/main.scss in the child theme.
    2. Locate line: @import "bootscore-woocommerce";
    3. Comment out or delete this line.

JavaScript

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.