Archives Element
The Archives Element lists the posts of the current archive or search results page. You place it once in a Layout Builder section for archives or search, and it automatically shows the posts of whichever category, tag, author, date or search the visitor is looking at.
It uses the same layouts as the Blog Element, from large and medium lists to grid, masonry and timeline, with the thumbnail, an excerpt or the full content, meta information and a Read More link. Pagination, a Load More button or infinite scroll take the visitor through longer archives.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Archives Element
Under Tirenoa > Layouts, create or edit a layout for archives or search results and add the Archives Element to its content section. Set Posts Per Page (-1 shows all, 0 uses the number from Settings > Reading), choose the Content Display and, for excerpts, the Excerpt Length and whether to Strip HTML From Post Content. Use Show Meta Info and the separate options for author, categories, comment count, date, tags and the Read More link to decide what appears under each post. Pick a Pagination Type and enter a Nothing Found Message for archives and searches without results.
On the Design tab choose the Layout. Grid and masonry use Number of Columns and Column Spacing; masonry adds Masonry Image Aspect Ratio and Masonry 2×2 Width to decide which images become landscape, portrait or large. Show Thumbnail, Content Alignment, the grid box and element colors, the Grid Separator Style and Grid Text Padding finish the look.
The element only shows posts on archive and search pages. In the Builder it uses the Dynamic Content preview of the layout section, so set that preview to an archive or search to see real posts while you design. The element is only available while the Blog Element is enabled, because it uses the Blog Element to build the list.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Posts Per Page | Select number of posts per page. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading. |
| Content Display | Controls if the content displays as an excerpt or full content or is completely disabled. |
| Excerpt Length | Controls the number of words in the excerpts. |
| Strip HTML From Post Content | Choose to strip HTML from the post content. |
| Show Meta Info | Choose to show all meta data. |
| Show Author Name | Choose to show the author. |
| Show Categories | Choose to show the categories. |
| Show Comment Count | Choose to show the comments. |
| Show Date | Choose to show the date. |
| Show Read More Link | Choose to show the Read More link. |
| Show Tags | Choose to show the tags. |
| Pagination Type | Choose the type of pagination. |
| Nothing Found Message | Replacement text when no results are found. |
| Margin | In pixels or percentage, for example 10px or 10%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Layout | Select the layout for the element. |
| Masonry Image Aspect Ratio | Set the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). IMPORTANT: The value of “1.0” represents a special case, which will use the auto calculated ratios like in versions prior to Tirenoa 5.5. |
| Masonry 2×2 Width | This option decides when a square 1×1 image should become 2×2. This will not apply to images that highly favor landscape or portrait layouts. IMPORTANT: There is a “Masonry Image Layout” setting for every image in the WP media library that allows you to manually set how an image will appear (1×1, landscape, portrait or 2×2), regardless of the original ratio. In pixels. |
| Number of Columns | Controls the number of columns for grid layouts. |
| Column Spacing | Controls the column spacing. |
| Equal Heights | Set to yes to display grid boxes with equal heights per row. |
| Show Thumbnail | Displays featured image. |
| Content Alignment | Controls the alignment of contents. |
| Grid Box Color | Controls the background color for the grid boxes. |
| Grid Element Color | Controls the color of borders/date box/timeline dots and arrows for the grid boxes. |
| Grid Separator Style | Controls the line style of grid separators. NOTE: Separators will display, when excerpt/content or meta data below the separators is displayed. |
| Grid Separator Color | Controls the line style color of grid separators. |
| Grid Text Padding | Controls the padding for text when using grid / masonry or timeline layout. Enter values including any valid CSS unit, for example 30px, 25px, 0px, 25px. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Use an excerpt rather than the full content on archive pages. The archive loads faster, and the full article stays on its own page.
- Equal Heights keeps grid boxes in one row the same height when excerpts have different lengths.
- Grid separators only appear when there is excerpt text or meta data below them, as the option description notes.
- Infinite scroll can make the footer hard to reach. Use normal pagination or the Load More button when the footer holds important links.
- Write a helpful Nothing Found Message, for example with a hint to try another search term, instead of leaving visitors on an empty page.