No products in the cart.
Using the child themes
The child themes are the base to customise bootScore without touching the code of the parent theme. You can edit these themes and update bootScore without losing your work.
Contents
Child-themes are not stand-alone themes, bootScore must be installed.
bootScore Child
This child-theme is the best choice if you want to create a blog, portfolio or whatever you want.
- Download the zip file here.
- In your admin panel, go to Appearance > Themes and click the Add New button.
- Click Upload Theme and Choose File, then select the theme’s .zip file. Click Install Now.
- Click Activate to use your new theme right away.
bootCommerce Child
This child-theme is what you see here with cart and user in the navbar. It has already all settings to create a shop. This child needs WooCommerce to run.
!importantinstall WooCommerse first.- Download the zip file here.
- In your admin panel, go to Appearance > Themes and click the Add New button.
- Click Upload Theme and Choose File, then select the theme’s .zip file. Click Install Now.
- Click Activate to use your new theme right away.
PHP
You can override the php files by storing a copy of, for example, page-sidebar-none.php in the folder of your child theme. If you rename it into page.php, this is now the default template for all your pages. You have to use the same folder structure as in the parent theme. For example, if you want to overwrite the mini-cart.php, you have to create the copy in the folder woocommerce/cart/mini-cart.php of your child theme.
Place a copy of header.php (bootCommerce Child has already) in child-theme, change bg-light class to bg-danger and the navbar will be red, footer.php exactly the same.
Read also Colors, Page / Post Templates and Category / Archive / Author Templates for customizing.
Daniel Munoz Rey
says:As I don’t know how to build my Bootstrap 5 in the builder (this one is only for version 4: https://bootstrap.build/app) for now I am going to use the parent CSS and not my child by commenting these 3 lines in my enqueues:
//wp_dequeue_style(‘bootstrap’);
//wp_deregister_style(‘bootstrap’);
//wp_enqueue_style(‘child-theme-bootstrap’, get_stylesheet_directory_uri() .’/css/bootstrap.min.css’);
Basti
says:Hello Daniel,
correct. There is no bootstrap.min.css generator for Bootstrap 5 out there yet. Think first one will come in next two months.
So, you can customize your own with Sass https://getbootstrap.com/docs/5.0/customize/sass/, or place a copy of the bootstrap.min.css in your child theme, unminify it and customize it via CSS.
I know this is very unwieldy, but Bootstrap 5 is new, new, new.
Daniel Munoz Rey
says:Thank you Basti.
I do not like SASS or CSS pre-processors, so meanwhile I did this in my local CSS for my link colours:
/* BOOTSTRAP BUILD */
:root {–bs-primary:#f300ff;}
/* LINK COLOURS */
a {color:var(–bs-primary);}
a:hover {color:#fff;}
a:hover img {opacity:0.6; filter:alpha(opacity=60);}
.btn-primary {background-color:var(–bs-primary); border-color:var(–bs-primary);}
.btn-primary:hover {background-color:var(–bs-primary); border-color:var(–bs-primary); opacity:0.6; filter:alpha(opacity=60);}
Daniel.
Daniel Munoz Rey
says:For now I would like to change only the link colour so, can I add this to my local CSS:
:root {–bs-primary: #f300ff;}
Basti
says:That will not work, because primary-color is written as HEX in bootstrap.min.css
a { color: #0d6efd; }You can edit your Bootstrap by replacing all #0d6efd with #f300ff. Then primary color is set to pink.
Daniel Munoz Rey
says:It worked for me with this:
:root {–bs-primary:#f300ff;}
a {color:var(–bs-primary);}
Daniel.
Basti
says:Good, learned something again.
Daniel Munoz Rey
says:I would like to remove offcanvas, I tried yesterday and it worked is only the align that didn’t work (menu on the right when not in mobile) and also the hamburger didn’t have the lovely effect of converting into an X, if you could help that would be great.
Basti
says:Offcanvas is default now. In my opinion a top-open navigation is outdated. But of course it is still there. Load bootScore 4 and look to header.php, theme_header.css and theme.js. Now copy step by step.
I created an rough example with Bootstrap default navbar component, without the widgets and inline CSS / JS. View and download at Github. Replace your child header.php (but keep copy).
Daniel Munoz Rey
says:I do not like offcanvas, I think is too invasive and for an average website it takes too much space depending on the device. I used Bootstrap 5 examples page and it works but I cannot align it to the right when not collapsed (desktop). I will see at your code in Github, thank you.
Basti
says:Add class
justify-content-endto nav-walker in header.php https://getbootstrap.com/docs/5.0/utilities/flex/#justify-content. Bootstrap changes also classes for left and right to start and end.Daniel Munoz Rey
says:Thank you for the GitHub code, I used it but I changed the hamburger menu with this:
And only used this CSS for the animation (no script):
/* AREA: Hamburger button */ .icon-bar {width:22px; height:2px; background-color:#999; display:block; transition:all 0.2s; margin-top:4px;} .navbar-toggler {border:none; background:transparent !important; padding-top:0; padding-right:0;} .navbar-toggler:focus {outline:none;} /* AREA: Hamburger button animation */ .navbar-toggler .top-bar {transform: rotate(45deg); transform-origin: 10% 10%;} .navbar-toggler .middle-bar {opacity: 0;} .navbar-toggler .bottom-bar {transform: rotate(-45deg); transform-origin: 10% 90%;} .navbar-toggler.collapsed .top-bar {transform: rotate(0);} .navbar-toggler.collapsed .middle-bar {opacity: 1;} .navbar-toggler.collapsed .bottom-bar {transform: rotate(0);}Still needs a bit of polish but it works!
Daniel.
Daniel Munoz Rey
says:Could not put HTML code here with (pre) (/pre) so here it goes with no tags:
button class=”navbar-toggler collapsed” type=”button” data-bs-toggle=”collapse” data-bs-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”
span class=”icon-bar top-bar” /span
span class=”icon-bar middle-bar” /span
span class=”icon-bar bottom-bar” /span
/button
Daniel Munoz Rey
says:As we are not using favicon in customiser I removed in the child like this, maybe you could add this to parent:
function dmr_customize_register( $wp_customize ) {
$wp_customize->remove_control(‘site_icon’);
}
add_action( ‘customize_register’, ‘dmr_customize_register’ );
Basti
says:It does not work?
Daniel Munoz Rey
says:Yes, it works in my child, but I was proposing you to add it in the parent if you want.
Daniel Munoz Rey
says:I understand that Bootstrap 5 does not require Jquery, should I dequeue it if I am not using it in my child or do you need it in the parent?… Or maybe is used for plugins, like Contact form 7
Basti
says:jQuery is used in theme and plugins. If you dequeue jQuery, nothing will work anymore. Even other plugins like Contact Form 7 or libraries uses jQuery, not only my plugins.
Daniel Munoz Rey
says:Ok, I understand, thank you Basti.
I am obsessed with web performance… so what about Jquery migrate, can we remove it? like this:
// WordPress’s onboard jQuery to footer (no Migrate):
wp_deregister_script(‘jquery’);
wp_enqueue_script(‘jquery’, includes_url(‘/js/jquery/jquery.min.js’), false, null, true);
Daniel.
Basti
says:bootScore and all plugins do not need jQuery migrate, think you can remove it.
Daniel Munoz Rey
says:Removed, thank you.
Daniel Munoz Rey
says:I just realised that I can remove jQuery migrate but I shouldn’t move jQuery to footer as if any other script needs jQuery then it is loaded late, ie, Dark mode plugin does not work if I do this.
Daniel Munoz Rey
says:Can you dequeue this CSS in th parent as it has no contents?
/wp-content/themes/bootscore-5/style.css
Basti
says:No. style.css is a core of a WP theme and needed for meta data. If you dequeue it, theme will not work.
Daniel Munoz Rey
says:I have just remove this line in the enqueues in my child to remove that empty file (one less request) and it seems to work:
//wp_enqueue_style(‘bootscore-parent-style’, get_template_directory_uri() . ‘/style.css’);
Daniel.
Basti
says:Check: https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/
Daniel Munoz Rey
says:As I mentioned I am obsessed with web performance, I think is the most important issue after SEO, so for me remove one empty file to get one less request is worthy… I did it and it works, so I am going to leave it like this in my child, but thank you for the info!
Daniel Munoz Rey
says:Could you add a hook just after id primary?… I need it to add breadcrumbs to all my pages:
Basti
says:I will add it in the next updates
Daniel Munoz Rey
says:Thank you!
Basti
says:Can I ask what you exactly want to do with this hook?
Daniel Munoz Rey
says:At the moment in the parent theme only single-*.php has got breadcrumbs, I think all pages except home page should have breadcrumbs, or not (child can plug nothing into your pluggable breadcrumb function) so I think all pages should have to have one of these options:
1. Add this to all page templates, not just in single-*.php:
(the_breadcrumb() is defined in functions.php as pluggable)
OR
2. All pages should have a hook:
(so child themes can add or not breadcrumbs or anything else, this solution is better I think)
Thank you.
Daniel.
Daniel Munoz Rey
says:The code has been removed in my previous post, can you erase that post I cannot do it myself
Daniel Munoz Rey
says:At the moment in the parent theme only single-*.php has got breadcrumbs, I think all pages except home page should have breadcrumbs, or not (child can plug nothing into your pluggable breadcrumb function) so I think all pages should have to have one of these options:
1. Add this to all page templates, not just in single-*.php:
After div id=”primary” >>> Add php: the_breadcrumb()
(the_breadcrumb() is defined in functions.php as pluggable)
OR
2. All pages should have a hook:
After div id=”primary” >>> Add php: do_action( ‘bs_after_primary’ )
(so child themes can add or not breadcrumbs or anything else, this solution is better I think)
Thank you.
Daniel.
Basti
says:Ok. At first, WordPress does not support breadcrumbs for pages, only for posts. Thats why only the single-*.php files has a breadcrumb. So, we must do something to WP to support breadcrumb in pages and edit templates.
1. Add code to functions.php
2. Add breadcrumb in your page.php
3. Adjust top margin in page.php
It is not possible to display PHP code here in comments, so I created a page with breadcrumb and pasted the code there. https://bootscore.me/page-with-breadcrumb/
Hope that helps
Daniel Munoz Rey
says:In single.php you call a function: the_breadcrumb() which is defined in functions.php
In this function, in the same way that you define the breadcrumbs only for category and single, you could define it for all the pages.
But if you want to stick to breacrumbs for only posts I would appreciate if you put a hook after the div id=”primary”, this way we can add in our child theme anything we want including breadcrumbs, otherwise we will have to replicate all your files in the parent which will be risky for future updated of the parent theme.
Thank you!
Daniel.
Daniel Munoz Rey
says:And regarding your link… thank you!
That is exactly why we need a hook after div #primary, to add the call to nav_breadcrumb function in that hook, without having to replicate all your pages.
Daniel.
Basti
says:Page and post templates wont get any important updates, they are good as they are. It is the function of a child theme that you edit the templates in a copy from parent theme. That is what a child theme does. You can also create your own templates by renaming for example page-breadcrumb.php in child and select them in the backend.
This is the proper way to add breadcrumb to pages, I did it this way in client pages as well.
However, I will provide a hook there. But later in 2nd version after release. It must be tested and I am struggling with some other things at the moment.
Basti
says:Hook is there, download the new file in your dashboard.
Daniel Munoz Rey
says:Briefly what is the function of each of these file?… Can they be merged?:
/themes/bootscore-5/js/theme.js
/themes/bootscore-5/js/theme-header.js
Thank you.
Basti
says:Yes, they can. But in theme-header.js there is script for offcanvas which is temporary. It will be deleted when official Bootstrap offcanvas component is ready. It’s just for me to keep track of things.
Daniel Munoz Rey
says:I understand, thank you.
Daniel Munoz Rey
says:Do you recommend to remove wp-embed.min.js?… it embeds WordPress posts from other people websites, it’d do it like this:
wp_deregister_script(‘wp-embed’);
Thank you.
Basti
says:I have no idea
Daniel Munoz Rey
says:I removed, one request less… 🙂
Daniel Munoz Rey
says:A request could be saved if you add the contents of this small file to another CSS file:
/themes/bootscore-5/css/theme-preloader.css’
Thank you.
Basti
says:Yes. But it has an own registered CSS in case if you use an optimizing plugin like jch-optimize or Autoptimize. They place all CSS in the footer and you will see an ugly flicker on page load. Because this tiny file is registered, you can deselect it from pushing it to footer by plugin. So CSS of the preloader is still in header and loaded first.
Daniel Munoz Rey
says:In case somebody is interested this removes the breakpoints, is still responsive but only fluid not adaptive… I just think that why leave white spaces left and right in some intermedia device scenarios making the need to more scroll…
/* REMOVE BREAKOINTS */
.container {width:100%; max-width:1320px;}
Daniel.
Daniel Munoz Rey
says:In the Offcanvas panel, shouldn’t the top left icon “<" be ">” as this would be the action of the panel when you click on it?
And/or the “Close Menu” be an “X” maybe?…
And also maybe the hamburger 3 lines is better if they are “>>>”
I know it is early days but the icons in this page need a rethink… I think… 🙂
Thank you.
Basti
says:The entire Offcanvas header is clickable, not only the icons. It is therefore very easy to close the Offcanvas on mobile phone with the thumb of your left or right hand.
You can easily swap the icons in your header.php, or insert your own svg icons or CSS animation.
The theme is as neutral as possible, only Bootstrap and Font Awesome.
It is your job to create a amazing design of it 😉
Daniel Munoz Rey
says:Good point!… 😉
piko cillo
says:hi i am using bootcommerce-5 child. I created a home-page.php to customize the home page of the web site. I’m trying to insert a bootstrap carousel (by code) but the slide show doesn’t work. I have not entered any path to call bundle.min.js in the function.php of the bootcommerce-5 theme as it should call it from the function.php file of the bootscore-5 theme which of course I have installed. Also I notice that on the same home page the scroll up button doesn’t work either so I guess it can’t load the functions from the bundle.min.js. What can it depend on? Any advice? Thank you
Basti
says:Hey,
at first glance it seems that there is a conflict with smooth-scroll using an
a href="#.."in slideshow. But thats very hard to say without having a link to check the error. So, please share a link to your site. If you do not want to share public, you can sent me the link via the contact form.Bruno Sas
says:Hi!
Why didn’t you enqueue the child style.css file on the child theme?
Like this :
add_action( ‘wp_enqueue_scripts’, ‘bootscore_5_child_enqueue_styles’ );
function bootscore_5_child_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’, get_stylesheet_uri() ); ———————–> I have added this
}
For some reason the child style.css that gets loaded on the browser is empty, it only has these descrption:
/*
Theme Name: bootScore 5 Child
Description: bootScore 5 Child Theme
Author: craftwerk – Bastian Kreiter
Author URI: https://crftwrk.de
Template: bootscore-5
Version: 5.0.0.2
Text Domain: bootscore
*/
However, I have some stlyes on the child style.css that are not being loded…
Any idea what might be wrong?
Basti
says:Hi Bruno,
there was something like yours before, but there was an issue that child style.css was loaded twice. See here https://github.com/craftwerkberlin/bootscore-5-child/issues/2
I tested it by adding some css to style.css in child and it works fine. However, both child-themes get an update in near future, I have it on the list and will improve it.
It is hard to say without having a link to your project. Please share a link to your site that I can see what is wrong. If you do not want to share public, you can send me the link via the contact form https://bootscore.me/contact/
Thank you for reporting