Documentation Theme

Templates

| 33 Comments on Templates

Explore versatile templates: page/post templates, header, footer, archive and more, tailored for seamless theme customization.

Contents
Theme templates
Overriding templates in child
bs Loop templates

Theme templates

Page/post templates can be selected in the edit screen. Below is a list of all included template files and their functions:

  • bootscore
    • 404.php
      Page not found. File includes a widget position to add additional content.
    • archive.php
      Lists category, archive, and author posts. Additional loop templates are available for category-*.php, archive-*.php, and author-*.php.
    • comments.php
      Comments section.
    • footer.php
      The footer includes six widget positions, an additional menu, and a copyright with the current year and site title.
    • header.php
      • Includes links to the logo(s).svg file(s), which can be replaced in the (child) theme’s /img/logo/ folder.
      • Includes links to the favicons, which can be replaced in the (child) theme’s /img/favicon/ folder. Generate favicons with realfavicongenerator.net.
      • Includes theme colors and color for safari-pinned-tab.svg in lines 28 – 30.
      • Contains the main menu, three widget positions, and the nav-toggler. The breakpoint for the navbar is set to lg.
    • page.php
      Default page template. If sidebar widgets are active, sidebar is shown on the right.
    • search.php
      Wrapper for search results.
    • searchform.php
      Classic searchform widget.
    • sidebar.php
      Shows the sidebar if widgets in the sidebar are active. The sidebar is displayed as an offcanvas below <=md breakpoint with a toggler button.
    • single.php
      Default single template. If sidebar widgets are active, sidebar is shown on the right.
    • woocommerce.php
      Displays shop pages such as archives, single products, and shop search results.
    • page-templates
      • page-blank.php
        Content lacks h1 tag, container and spacings. This template is well-suited for creating landing pages using plain HTML.
      • page-blank-with-container.php
        Similar to page-blank.php, but content is wrapped in a container. Suitable for use with additional Width & Height classes.
      • page-full-width-image.php
        The template displays the featured image as a background image. If no image is available, the background appears dark. If the sidebar is active, it’s displayed on the right.
      • page-sidebar-left.php
        Similar to page.php, but If sidebar widgets are active, sidebar is shown on the left.
      • page-sidebar-none.php
        Similar to page.php, but has no sidebar.
    • single-templates
      • single-full-width-image.php
        The template displays the featured image as a background image. If no image is available, the background appears dark. If the sidebar is active, it’s displayed on the right.
      • single-sidebar-left.php
        Similar to single.php, but If sidebar widgets are active, sidebar is shown on the left.
      • single-sidebar-none.php
        Similar to single.php, but has no sidebar.
    • template-parts
      • header
        • actions.php
          Header buttons
        • actions-woocommerce.php
          Header buttons if WooCommerce is installed
        • collapse-search.php
          Search form collapse
        • collapse-search-woocommerce.php
          Search form collapse if WooCommerce is installed
        • offcanvas-woocommerce.php
          Cart and account offcanvas if WooCommerce is installed
      • content-none.php
        If search term does not exists.
      • content-search.php
        List the search results.

Overriding templates in child

Templates can be overridden in child themes following the main theme’s folder structure or used to create new ones. The WordPress Template Hierarchy clarifies template determination.

bs Loop templates

There are 5 templates for each category, archive, and author. These templates are the same for all of them; they only differ in what is in the header:

  • The category templates remove the usual ‘Category:’ prefix before the category name in the heading.
  • The author templates display the Gravatar profile picture.
  • The archive templates show the typical archive format with headings such as ‘Month: March 2020’.”

HTML can be used in the category description and the author’s bio.

  • *.php
    These are the default templates. The posts are displayed in horizontal cards that flip to vertical cards on screens with a width of <=md. If a sidebar is active, it will be shown on the right. If no sidebar is active, the posts are displayed across the entire width of the container.
  • *-sidebar-left.php
    Similar to default, but the sidebar is on the left.
  • *-equal-height-sidebar-right.php
    The posts are displayed in vertical cards arranged in a grid, with the sidebar positioned on the right. If no sidebar is active, the posts expand to fill the entire width of the container. All cards maintain consistent height, regardless of whether there is a featured image or the length of the excerpt or heading. The ‘Read more’ button is aligned at the bottom of each card. The height of all cards is determined by the one with the most content.
  • *-equal-height.php
    Similar to *-equal-height-sidebar-right.php, but without sidebar. The cards are displayed in a 3 (xl), 2 (lg), 1 (md) grid.
  • *-masonry.php
    This displays the posts in a Pinterest-style layout, where each card adjusts its height based on the content it contains. No sidebar is shown.

*-masonry.php requires the bs Masonry plugin which is included in the bs-loop-templates-UnzipFirst.zip file. It replaces the card-columns from Bootstrap 4, which are no longer included in Bootstrap 5.

33 Comments on “Templates”

  • varun sharma

    says:

    Please tell me how to customize shop page and product page template in your theme and also tell me if i want to change any page template how to do?

    • Basti

      says:

      Hi Varun,

      this are 2 different things.

      As described in the article above, page and post templates can be selected in backend in Quick edit https://prnt.sc/10x3ck1 or post/page edit screen https://prnt.sc/10x3d6k. To create a custom store frontpage, create a page and choose “Blank with container” or “Blank without container”, so you have a blank site. Fill site with content and use WooCommerce shortcodes https://docs.woocommerce.com/document/woocommerce-shortcodes/ to display products or use Gutenberg blocks https://docs.woocommerce.com/document/woocommerce-blocks/. You can also use https://bootscore.me/plugins/bs-swiper/ and/or https://bootscore.me/plugins/bs-isotope/ to display products. Then go in Backend Settings > Reading > choose A static page > Homepage: select your page. https://prnt.sc/10x3jkp Now your page is the frontpage.

      Customizing the product page is different. Please read here https://docs.woocommerce.com/document/template-structure/ how that works exactly. If you want to edit product page template, go in your WordPress installation open the folder wp-content/plugins/woocommerce/templates/single-product/. There are all files which are needed for the single product page. For example you want to edit price.php. Copy that file and create in your child-theme folder woocommerce/single-product/ and paste file there. Now edit this file in your child-theme.

      Hope that helps

      • varun sharma

        says:

        But I may not change the template from the quick edit. And I do not want a sidebar in any page in your bootcommerce theme , just want a left in the shop page, so how do I do this?

        • Basti

          says:

          WooCommerce uses the default page.php for shop pages.

          1. Copy page-sidebar-left.php and paste it in child-theme
          2. Rename it to page.php

          Now all pages should have the sidebar on the left by default, also the shop page.

          3. Go in Backend > Pages and select for all pages where you do not want to show a sidebar the page template “No Sidebar” in Quick Edit screen https://prnt.sc/10z62oi

          You can also use a plugin to hide or show sidebar widgets on specific pages https://wordpress.org/plugins/widget-context/

  • varun sharma

    says:

    how to add template for blog and single blog in bootcommerce theme

  • varun sharma

    says:

    also iam not able to overridden the mini cart file of cart please help

    • Basti

      says:

      Path to mini-cart.php in child must be exactly the same like in parent theme your-theme/woocommerce/cart/mini-cart.php

      • varun sharma

        says:

        please help im unable to make any change in mini-cart.php file please tell me what i do now and please tell me how to add increment decrement quantity button in mini cart

        • Basti

          says:

          Hello Varun,

          yes, I will help. But it is not possible to help without having a link to your project. It’s very confusing because you need help with 10 things at one time. Please post a link to your project and I will help step-by-step.

  • varun sharma

    says:

    Hii Iam not able to change my page template with no sidebar and my shop template to left sidebar please help me how to do in bootcommerce theme and also i want blog templates single blog and blog both how i add these templates in my bootcommerce theme please help me

    • Basti

      says:

      This are all different things. To avoid confusion let’s break it down to one and solve that, the page and shop template. Please share a site link to your shop page where you want to have the sidebar on the left and a link to a page where you want to have no sidebar.

  • David

    says:

    This may be a simple question, but how does one make use of the bootstrap components on pages and posts in a clean way that doesn’t conflict with the built-in wordpress editors and the block editor. For example, how did you design the Bootscore homepage? Does it use the block editor at all? Is it a “Custom HTML block”? Do you ever use the block editor for anything? There seems to be a lot of redundancy between Bootstrap and WordPress blocks, for example the column layouts.

    Sorry, I’m very familiar with HTML,CSS, JS, as well as Bootstrap, but my WordPress knowledge is where I lack expertise. The relationship between the theme’s Bootstrap components and WordPress’s Block components have me confused (ie buttons, columns, etc).

    • Basti

      says:

      Hello David,

      Gutenberg Blocks are not using Bootstrap classes. Adding Bootstrap there will open Pandora’s box, because WordPress develop this blocks very fast. There are plugins available for that, for example this https://wordpress.org/plugins/wp-bootstrap-blocks/ . Maybe in future I will add it to blocks too.

      However, I always and only use the Custom HTML block with this https://bootscore.me/theme/page-blank-without-container/ page template and simple use Bootstrap classes in HTML to create landing pages.

      Here on the frontpage, each section has an own HTML block. The height class https://bootscore.me/documentation/width-height-classes/ and plugin bootscore.me/plugins/bs-animate-on-scroll is used to design and animate content. Plugin post slider is insert via shortcode in HTML.

      If I want to use another block, for example a gallery, then I wrap the block in HTML blocks. For example:

      HTML Block (open div)
      Gallery Block
      HTML Block (close div)

      So, using HTML instead of predefined blocks give you the completey freedom to design whatever you want.

      Hope that helps.

      • David

        says:

        Ok, that makes a lot of sense! Thank you for clarifying. You’ve created a really impressive theme here – thank you for your efforts!

        For what it’s worth, I do think extending Bootscore to bring bootstrap components to Gutenberg blocks would add a lot of value and eliminate duplicated features and css in the two frameworks. I think it would empower content writers, who may not feel comfortable jumping into the HTML blocks, to design and edit pages when working with themes built on top of Bootscore. I agree, it does seem like a big undertaking though. In a way, you’ve already started with the Responsive Video and Gallery Lightbox plugins you created! 🙂

        • Basti

          says:

          Thank you.
          You’re right, Gutenberg should be supported. But this is definitely a bigger thing and has to be well thought out for it to be good. I will keep it in mind. Maybe it’s better to make a plugin out of it instead of integrating it into the theme. We will see.

  • Arie Olivier

    says:

    Hi Basti. I’m enjoying your theme. Great work! I have duplicated the page-full-width-image.php in my child theme and made some changes, but my template does not override the parent template. I know I can simply rename my template, but I don’t more templates. How can I make the child template override the parent one? Thanks

    • Basti

      says:

      Hello Arie,

      thank you very much. What do you want to do?

      Using your modified as default template in child? Just rename it to page.php.

      If you have stored as page-full-width-image.php in child you can select template in backend, it should override parent template.

      Does that help?

      If not, you can send me admin details through the contact form in the footer.

      Basti

      • Arie Olivier

        says:

        I have stored my page-full-width-image.php in my child theme and selected the template in backend, it doesn’t override the parent template. I don’t have an online version yet, only local. Does it perhaps have something to do with how the parent theme includes the template files?

        • Basti

          says:

          Hmm, usually that works fine. Please rename it in page.php, just for testing. But of course I cannot say or fix something on your local computer.

          You can try to rename the template name in files header. If this new name is not visible in the backend then the path to file is wrong. Is your page-full-width-image.php stored in child themes root folder?

  • Arie Olivier

    says:

    Basti sorry. I was working on a post (not a page), and assumed page-full-width-image.php was used for posts and pages… Editing single-full-width-image.php in my child theme worked. Sorry to waste your time.

    • Basti

      says:

      😉👍

  • marshall reyher

    says:

    Hi Basti, I have set the reading WP settings to make my blog the page to display posts, and published a test post. I am using the default template in the bootcommerce child theme. No matter what I do, I can’t get the post excerpt to show up on the blog page. Do you have any ideas what could be happening?

    Thanks,
    Marshall

    • Basti

      says:

      Hi Marshall,

      I need a link to your site to check that.

      Basti

  • Arun Kumar

    says:

    How Show Two-column Grid posts and sidebar with a page builder like Divi and elementor?

    please help

    • Basti

      says:

      Hi Arun,

      bootScore is a code project. You can show two column grid by changing col-* classes in .php files. I don’t know if that is possible with a page-builder, please ask manufacturer for that. Theme does not support editing categories by Divi or Elementor.

  • ramis can

    says:

    Hello. Thank you for bootscore. Page or post templates are not visible. (Page Attributes > Template or Post Attributes > Template.) I deleted and reinstalled, same result. The template is not visible. I am using the latest version 5.8wp. note: clean install. Regards.

    • Basti

      says:

      Hello ramis,

      please send admin details here bootscore.me/contact/ to check.

      • ramis can

        says:

        Hello. I downloaded the file from github. I downloaded from this site, the problem was fixed, thank you.

        • Basti

          says:

          👍 BTW, GitHub file and here on the site here is exactly the same. So, I cannot explain what’s happen on your site.

  • Abigail Shedden

    says:

    Hi Basti
    Great theme and plugins, thank you for sharing!

    Quick question, I’m new to WordPress so apologies if this is an obvious question, I’m used to working with other another CMS. I’ve installed the theme with child theme and got this working no problem. I’ve created a page and added some content. If I wanted to have a few rows on the page with different columns say row 1 – single col, row 2 – 3 cols and row 3 -2 cols how would I do that? I know I can add cols using Gutemberg but that doesn’t apply bootstraps grid css which I’m wanting. Any hints appreciated and thanks again.

    • Basti

      says:

      Hi Abigail,

      theme does not support Bootstrap to Gutenberg, that would go beyond the scope of the project. There are plugins for that (not tested):

      https://wordpress.org/plugins/wp-bootstrap-blocks/
      https://wordpress.org/plugins/wp-editor-bootstrap-blocks/
      https://livecanvas.com/

      But my recommendation is to use Gutenberg HTML block instead of plugins.

      <div class="row">
    <div class="col-md-6">
        content
    </div>
    <div class="col-md-6">
        content
    </div>
</div>

      If you want to use a block inside the columns do it like this:

      <!-- open row and cols -->
<div class="row">
    <div class="col-md-6">

      Gutenberg Block

          </div>
    <!-- close col -->
    <!-- open col -->
    <div class="col-md-6">

      Gutenberg Block

          </div>
</div>
<!-- close row and col -->

      This is the cleanest way and gives you the full control of everything.

      Does that help?

      • Abi S

        says:

        Hi Basti,
        Perfect!

        I did have a play about with one of the bootstrap plugins which did work but your suggestions do provide cleaner code which is what I was looking for.

        Thank you.

Comments are closed.

To top