Loading...

Using the child themes

The child themes are the base to customize bootScore without touching the code of the parent theme. You can edit these themes and update bootScore without losing your work.

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.

  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 theme’s .zip file. Click Install Now.
  4. 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, all header settings with cart and a basic store frontpage. This child needs WooCommerce to run.

  1. !important install WooCommerse first.
  2. Download the zip file here.
  3. In your admin panel, go to Appearance > Themes and click the Add New button.
  4. Click Upload Theme and Choose File, then select the theme’s .zip file. Click Install Now.
  5. Click Activate to use your new theme right away.

PHP

You can overwrite 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.

67 Comments on “Using the child themes”

  • 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.

  • 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.

        • 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’ );

      • 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.

        • 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:

      • 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.

  • 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.

      “However, I have some stlyes on the child style.css that are not being loded…
      Any idea what might be wrong?”

      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

      • Bruno Sas

        says:

        It was my fault. style.css was outside the theme folder.
        Thank you so much!

  • Joe Lambert

    says:

    Hi Basti,

    Loving the theme so far, however I am looking to do some customisations to bootstrap and I understand that bootstrap.build is not yet ready for Bootstrap 5. I am comfortable customising the SASS using this guide https://getbootstrap.com/docs/5.0/customize/sass/. However, given that the theme only uses the bootstrap.min file, how am I supposed to import bootstrap files if they don’t exist in the theme?

    Maybe I am being dumb and it’s just as simple as downloading those files and adding them to the child theme?

    Thanks you

    Thanks,
    Joe

    • Basti

      says:

      Hi Joe,

      the source code is not included in the theme, it use only the compiled bootstrap.min.css. Maybe that’s not clear enough in the article, I will improve it.

      So, you must download https://getbootstrap.com/docs/5.0/getting-started/download/ the source code and customise/compile by yourself. Replace the compiled bootstrap.min.css in theme or use it in child as described above.

      However, this project uses currently Bootstrap 5 Beta2, but Bootstrap has released Beta3 a few days ago. Beta3 has a new offcanvas component https://getbootstrap.com/docs/5.0/components/offcanvas/, which uses almost the same classes as the self coded but different JavaScript. If you want to use Beta3, the Header crashed, because the offcanvas uses same classes.

      I am working on the next update right now which replaces self coded offcanvas by the Bootstrap component, but there are still some bugs in theme and Beta3. Will try to release this week. What I mean with that is, that you need to load the source code from Beta2 if you want to edit current version. But my recommendation is: Wait a couple of days until next bootScore version is released, otherwise you will do your work twice.

      Best regards

      Basti

      • Joe Lambert

        says:

        Hi Basti,

        Thanks for the reply, perfect this makes sense. Definitely no rush on my end, so I’ll wait until you’ve got the update out for bootScore.

        Keep up the great work!

  • Ara Voskan

    says:

    Good day
    How to add a registration form for new visitors?
    Now registration takes place only when purchasing a product.

    • Basti

      says:

      Hello Ara

      go in Backend to WooCommerce > Settings > Accounts and check Enable customer registration on the “My account” page.

  • Ara Voskan

    says:

    Everything is perfectly done!
    The only thing that I lack in a theme without a store is the registration and login form.

    • Basti

      says:

      There is no reason why a user should register or login on your page without having a shop or something other that needs user management. That‘s why WordPress has no login or registration form by default. You must use plugin for that https://wordpress.org/plugins/custom-wp-login/

  • Ara Voskan

    says:

    Please tell me how you can make sure that the login button in the bootScore 5 Child Theme does not disappear?
    So that when you click open the login form.

    • Basti

      says:

      Do not understand what you mean? bootScore child has no login button.

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information