Combine Archive and Category Page in Bricks Builder via Dynamic Visibility

Find out how you can combine an Archive and Category Page in Bricks Builder. Via dynamic visibility, you can just show the according information and save yourself an extra page. In this 56 Minute Walkthrough, Nicholas Arce will show you how to archive this by using the Bricks Builder and WP Code Box. As the tutorial is quite extensive, we summarized the outline for you.

1. Creating a Template

1. In Bricks Builder, navigate to the templates section.
2. Click on the “Add New” button to create a new template.
3. Give your template a name and select the appropriate type.

2. Setting Template Conditions

1. In the template settings, navigate to the “Conditions” tab.
2. Set the conditions based on where you want the template to be used.

3. The Magic of this Process: Dynamic Content

1. In the Bricks Builder editor, add a new element.
2. Select the “Dynamic” option from the dropdown menu.
3. Set the dynamic tag based on the content you want to display.

4. Adding Blog Cards

1. In the Bricks Builder editor, add a new element.
2. Select the “Card” option from the dropdown menu.
3. Customize the card with your content.
4. Below you will find the Code Snippet for the Categories of the Blog Card:

   <?php
   function my_cat_grabber() {
   $categories = get_the_category();
   if ($categories) {
       $html = '<ul class="post-cat__wrapper list--none" aria-label="categories">';
       
       foreach ($categories as $category) {
           $category_link = get_category_link($category->term_id);
           $category_name = $category->name;
           
           $html .= '<li><a href="' . esc_url($category_link) . '">' . esc_html($category_name) . '</a></li>';
       }
       
       $html .= '</ul>';
       return $html;
   }
   }
   ?>

   Source: Snippet Codes

5. Proper Card HTML Structure

1. Each card should be contained within a <div> element.
2. The card content should be organized using semantic HTML elements like <header>, <main>, and <footer>.
3. Use <h2> for the card title and <p> for the card description.

6. Styling the Naming Classes

1. Select the element you want to style.
2. In the “Class” field, enter a descriptive name.
3. Repeat this process for each element you want to style.

7. Styling the Top Content

1. Select the top content element.
2. In the “Style” tab, adjust the settings to achieve your desired look.
3. Repeat this process for each top content element.

8. Styling the Button CSS

1. Select the button element.
2. In the “Style” tab, adjust the settings to achieve your desired look.
3. Don’t forget to style the hover state of your button for a more interactive experience.

9. Styling the Cards

1. Select the card element.
2. In the “Style” tab, adjust the settings to achieve your desired look.
3. Don’t forget to add a border and border radius for a more defined look.

10. Card Accessibility

1. Use alt text for all images.
2. Use clear, descriptive text for all links.
3. Ensure there’s sufficient contrast between text and background colors.

11. Styling Hover Focus

1. In your CSS, target the :focus pseudo-class.
2. Adjust the outline property to make the focus tip more visually appealing.

12. Correction Accessibility CSS Mistake

1. In your CSS, make sure you’re not using outline: none; without providing an alternative focus style.
2. If you must remove the outline, use a box shadow or border to provide a focus style.

Conclusion of Combining Archive and Category Page in Bricks Builder

And that’s it! We’ve successfully combined archive and category pages in Bricks Builder using Dynamic Visibility. It’s like we’ve just finished putting together a