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.
- Download templates
- 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
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
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
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.
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.
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.
The same as default, but the sidebar is on the left.
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.
The same as *-equal-height-sidebar-right.php, but without sidebar. The cards are displayed in a 3 (desktop), 2 (tablet), 1 (mobile) grid.
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”
How can we do it for woocommerce?
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-classto 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/
How to use equal height style?
with the help of bs5-masonry
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?
woocommerce gutenberg blocks does not inherit the design of the theme, does this have a solution or am I missing something?
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.
This is the date of publication bootscore_date();.
How to display the editing date?
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.
Thanks for the quick response))
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.
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?
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.
Typo in index.php… bootstore-…?
<!– 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>
Comments are closed.