Loading...

Category / Archive / Author 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 all templates in the category description or the authors bio.

Templates

category.php, archive.php and author.php

Live preview

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.

(each)-sidebar-left.php

Live preview

The same as default, but the sidebar is on the left.

(each)-equal-height-sidebar-right.php

Live preview

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.

(each)-equal-height.php

Live preview

The same as -equal-height-sidebar-right.php, but without sidebar. The cards are displayed in a 3 (desktop), 2 (tablet), 1 (mobile) grid.

(each)-masonry.php

Live preview

This layout requires the bS5 Masonry plugin. It replaces the card-columns from Bootstrap 4, which are no longer included in Bootstrap 5. Documentation

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.

Usage

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

WordPress first searches for a category-(your-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. The archive.php is the last and most important instance.

Simple

You don’t need it that complicated, one is enough for all of them. Keep only archive.php and delete all other archive-, category, and author.php.

Renaming 1

As an example you want all posts to be displayed in category-masonry style. Then all you have to do is rename category-masonry.php into category.php. Archives and author too, of course.

If you want to display the author as masonry, the category as equal height and the archive with sidebar left, you only have to rename the respective file into category.php, author.php and archiv.php.

Renaming 2

For example, you use 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.

10 Comments on “Category / Archive / Author 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?

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

Leave a Comment

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