[Share] How to add simple Filters category on Summary Block

You can follow these to add filter category to top of Summary Block, when users click on each category, it will filter corresponding item under without opening new page.

If code doesn't work, you can send link to page where you use Summary + exact code you added, I will check again.

#1. First, find ID of Summary Block

In my example, it is: #block-yui_3_17_2_1_1731577451920_10887

#2. Next, edit Summary Block > Enable Primary Metadata: Category

#3. Click on each category to get Category URL

In my example, we will have

Brand + Design: Branding+%2B+Design

Business How To: Business+How+To

Copywriting: Copywriting

Marketing: Marketing

Photography: Photography

SEO

Websites: Websites

#4. Add a Code Block above Summary Block 
and use this code into Code Block

<h5 class="blog-custom-filter">
  <span style="line-height:2em;">
    <a href="#all" class="active">ALL</a> <br>
    <a href="#Branding-Design" target="_self">Branding + Design</a> <br>
    <a href="#Business-How-To" target="_self">Business How To</a> <br>
    <a href="#Copywriting" target="_self">Copywriting</a> <br>
    <a href="#Marketing" target="_self">Marketing</a> <br>
    <a href="#Photography" target="_self">Photography</a> <br>
    <a href="#SEO" target="_self">SEO</a> <br>
    <a href="#Websites" target="_self">Websites</a>
  </span>
</h5>

#5. Use this code to Code Injection > Footer (or Page Header Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    // Map categories in filter to their corresponding summary-item URLs
    const categoryMap = {
        '#Branding-Design': ['Branding+%2B+Design'],
        '#Business-How-To': ['Business+How+To'],
        '#Copywriting': ['Copywriting'],
        '#Marketing': ['Marketing'],
        '#Photography': ['Photography'],
        '#SEO': ['SEO'],
        '#Websites': ['Websites']
    };
    // Handle click events on links in .blog-custom-filter
    $('.blog-custom-filter a').on('click', function (e) {
        e.preventDefault(); // Prevent default behavior of the link
        // Remove the 'active' class from all links and add it to the clicked link
        $('.blog-custom-filter a').removeClass('active');
        $(this).addClass('active');
        // Get the category from the href of the clicked link
        let category = $(this).attr('href');
        if (category === '#all') {
            // Show all summary-item elements if 'ALL' is clicked
            $('.summary-item').show();
        } else if (categoryMap[category]) {
            // Hide all summary-item elements
            $('.summary-item').hide();
            // Show only summary-item elements containing the matching category link
            $('.summary-item').filter(function () {
                // Check for both URL formats
                return categoryMap[category].some(cat => {
                    return $(this).find(`a[href="/blog?category=${cat}"], a[href="/blog/?category=${cat}"]`).length > 0;
                });
            }).show();
        }
    });
});
</script>

Note this

#6. Use this code to Custom CSS box

/* Summary Block Filter */
.active {
  border-bottom: 1px solid #000;
  }
  span.summary-metadata-item a.active {
    border: none !important;
}
  @media screen and (min-width:768px) {
    #block-yui_3_17_2_1_1731577451920_10887 { .sqs-gallery {
    display: grid !important;
    grid-template-columns: repeat(4,1fr) !important;
    grid-gap: 30px 30px !important;
}
 .summary-item {
    margin: unset !important;
    width: 100% !important;
      }  }}

These code will

• set Summary Block to 4 columns - you can edit at repeat(4,1fr)
• set space between Summary items to 30px - you can edit at grid-gap: 30px 30px
• make link in Code Block underline on click - you can edit border-bottom: 1px solid #000

Result (here I used some code to split Filter to 2 columns)