Documentation Theme

Loop templates

| 15 Comments on Loop templates

bootScore uses archive.php to show posts in the loop. You can use different templates for categories and authors by copying the template files to your child and rename them.

Contents
Usage
Renaming 1
Renaming 2
Templates

Usage

  • Download templates
  • Unzip
  • Copy template files to (child-)theme’s root folder and rename them.

There are several ways to use these templates, take a look at the WordPress Template Hierarchy.

WordPress first searches for a category-(category-slug).php. If that file doesn’t exist, it takes category.php. And if that file doesn’t exist too, then it takes archive.php.

Renaming 1

For example, all posts should be displayed in equal-height style. Copy archive-equal-heigt.php to (child-)theme’s root folder and rename it to archive.php. If you want to use separate files for category and author, do the same with category-*php and author-*.php.

Renaming 2

For example, you are using the same template everywhere, but want to display one category differently from the others.

You have a category “cats” and want to use it in masonry style, while the category “dogs” uses the default layout. This case, just rename category-masonry.php into category-cats.php.

For author the same. Simple rename the respective author-*.php into author-name.php. For example, Author name “John Doe”, rename archive-equal-height.php into author-john-doe.php and his author page will shown different than the other authors.

Templates

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

  • The category templates remove the usual “Category:” before the category name in the heading
  • The author templates show the profile picture of Gravatar
  • The archive templates show the usual archive with the heading “Month: March 2020”

HTML can be used in in the category description or the authors bio.

  • *.php
    These are the default templates. The posts are displayed in horizontal cards which flip to vertical cards on smaller screens. 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
    The same as default, but the sidebar is on the left.
  • *-equal-height-sidebar-right.php
    Shows the posts in vertical cards in a grid and the sidebar on the right. If no sidebar is active, there will be white space. All cards are the same height, no matter whether there is a featured image or not, long or short excerpt, long or short heading. The Read more is always at the bottom of the card. The height of all cards determines this one with the most content. So if the cards sometimes have very little and sometimes a lot of content, there is a lot of white space. This can look very tidy if all posts have approximately the same length of excerpts and all have a picture or none.
  • *-equal-height.php
    The same as *-equal-height-sidebar-right.php, but without sidebar. The cards are displayed in a 3 (desktop), 2 (tablet), 1 (mobile) grid.
  • *-masonry.php
    This represents the posts in a Pinterest-style layout. Each card only has the height of how much content it contains. No sidebar is displayed.

*-masonry.php requires the bS Masonry plugin. It replaces the card-columns from Bootstrap 4, which are no longer included in Bootstrap 5. Documentation

15 Comments on “Loop templates”

  • cemali

    says:

    How can we do it for woocommerce?

    • Basti

      says:

      Unfortunately, I don’t think that’s possible because WooCommerce doesn’t have any templates for categories.

      But you can use the WooCommerce shortcodes to display products of a category in a page. The following adds the class your-class to the shortcode.

      [products category="your-category" class="your-class"]

      With the class its possible to style the product cards different from others. For example:

      .your-class .card {
    background: red;
}

.your-class .card h2 {
    font-size: 10px;
    color: green;
}

      May not be exactly what you’re looking for, but a quick workaround. Here is a list of Shortcodes included in WooCommerce https://docs.woocommerce.com/document/woocommerce-shortcodes/

  • Andrew Vadivelu

    says:

    How to use equal height style?
    with the help of bs5-masonry

    • Basti

      says:

      Hi Andrew,

      I do not understand what you mean. equal-height and masonry are two different templates. Can you please describe in more detail what do you want to do?

  • Alfredo Torres

    says:

    woocommerce gutenberg blocks does not inherit the design of the theme, does this have a solution or am I missing something?

    • Basti

      says:

      Hello Alfredo,

      theme supports the WooCommerce core files, but not the Gutenberg blocks. So, you must style them by yourself.

      But if you want to show products in a page or post, you can use default WooCommerce shortcodes https://docs.woocommerce.com/document/woocommerce-shortcodes/ instead of blocks. Shortcodes are supported.

  • Ara Voskan

    says:

    This is the date of publication bootscore_date();.
    How to display the editing date?

    • Basti

      says:

      Simply update the post. Then you will see this:

      6. May 2021 / 30. May 2021.

      2nd part is edited date. It‘s inside bootscore_date(); function.

      • Ara Voskan

        says:

        Thanks for the quick response))

        • Basti

          says:

          You‘re welcome. You will find this function in folder inc/template-tags.php from line 49 to 77. It‘s a pluggable function, just in case you want to edit it.

  • Trishah Woolley

    says:

    I am using the archive-masonary.php template which is working fine. But I want to have the posts in ASC order instead of DESC order. I’ve tried the normal WordPress template ways of doing this but nothing is working. How do I can change the order direction?

    • Basti

      says:

      There is no way to change default ordering in archive. WordPress always order newest to oldest. You can change date in post or use an ordering plugin like https://wordpress.org/plugins/intuitive-custom-post-order/. This plugin is used here on this site to order documentation posts.

  • RICHARD BULL

    says:

    Typo in index.php… bootstore-…?

    `

    `

    • RICHARD BULL

      says:

      Sorry

      <!– Header –>
      <div class=”bootstore-header py-3 py-md-5 text-center”>
      <h1 class=”display-1″><?php bloginfo(‘name’); ?></h1>
      <p class=”lead”><?php bloginfo(‘description’); ?></p>
      </div>

      • Basti

        says:

        👍

Comments are closed.

To top