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.
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
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.With the class its possible to style the product cards different from others. For example:
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:👍