How can I effectively loop through all articles in all blogs?

[Ryan_Kelly]

I would like to display article elements (title, image) on a page based on how the article is tagged.

As there is no object for all articles, it's my understanding that I would need to loop through all blogs, and then all articles in those blogs, and then read the article tags and handle accordingly.

There was a confirmed solution in this post:

{% for blog in blogs %}
  {% for article in blog.articles %}
    {{ article.title }}
  {% endfor %} 
{% endfor %}

which is not working for me. Though that post was from March 2019, so I don't know if there was some undocumented change (I have not found anything in the Shopify changelog related to this).

I tried to simplify things even further - just displaying the blog.handle in my template:

{% for blog in blogs %}
  {{blog.handle}}
{% endfor %}

And even this isn't working.

Documentation here is sort of confusing - as it doesn't show looping through all blogs, just accessing the global blog object for a specific blog. This makes me think that maybe looping through all blogs isn't possible, and you have to explicitly define the blog before looping through articles?

Does anyone have any ideas here?

[BrianAtWork]

Hi @Ryan_Kelly,

I understand that you want to access the Blog object from your custom page. The reason you're having trouble is that the Blog object is not accessible from page templates.

The workaround for this is to create a special linked-list for your blogs – and then target that linked-list to pull the Blog objects into your code:

Step 1: Create the special "Blogs" linked-list:

1. From your Shopify admin, go to Online Store > Navigation.
2. Click the Add menu button.
3. Enter Blogs as the Title.
4. Repeat the following for each blog category that you want listed:
   1. Click Add menu item.
   2. Click in the Link box and select Blogs from the pop-up menu.
   3. Select the Blog that you want displayed.
5. Click Save menu.

Step 2: Edit your custom page template

1. Add the following code to your custom page template:
   

   {% for link in linklists.blogs.links %}
     {% assign blog = link.object %}
     {% for article in blog.articles %}
       <h2><a href="{{ article.url }}">{{ article.title }}</a></h2>
     {% endfor %} 
   {% endfor %}

2. Click Save.

Let me know if this solves your problem or if you need further help!

[Ryan_Kelly]

Hi @BrianAtWork -

I actually got around this by explicitly defining blog handles (as on my store I only have two blogs) to loop through in my page template, and creating a list of article handles like so:

  {% assign blog_handles = "culture,features" | split: "," %}
  {% for handle in blog_handles %}
    {% for article in blogs[handle].articles %}
      {% if article.tags contains blog_tag %}
        {% assign article_handles = article_handles | append: article.handle | append: "," %}
      {%endif%}
    {% endfor %}
  {% endfor %}

Then I loop through the defined article handles to access them.

[Robbyswift]

Hi there,

Is it possible to then filter this by tags? We have the same tag "Learn" across several different blogs and I would like to pull only blog articles tagged with "Learn" onto this page.
Any  help would be much appreciated

[Ryan_Kelly]

Yes, that's what I'm doing above (though I didn't define the variable blog_tag) with this block:

      {% if article.tags contains blog_tag %}
        {% assign article_handles = article_handles | append: article.handle | append: "," %}
      {%endif%}

But note that you need to explicitly define the blog handles as Shopify isn't able to loop through all blog posts (needs to loop through blogs, and then posts within that blog).

Another thing I discovered is that, with enough posts, you can hit pagination limit. So a more complete block would be:

{% assign blog_handles = "blog-handle-1,blog-handle-2,blog-handle-etc" | split: "," %}
{% assign blog_tag = "your-blog-tag" %}
  
{% for handle in blog_handles %}
  {% paginate blogs[handle].articles by 100 %}
      {% for article in blogs[handle].articles %}
        {% if article.tags contains blog_tag %}
          {% assign article_handles = article_handles | append: article.handle | append: "," %}
        {%endif%}
      {% endfor %}
   {% endpaginate %}
{% endfor %}

Which will give you the article handles you need, and you can access/display those with something like:

{% for handle in article_handles limit: home_page_articles %}
   {% assign article = articles[handle] %}
   <h2>{{ article.title }}</h2>
{% endfor %}

(Yeah, it's weird you can't loop through all articles, but you can refer to the complete articles object)

I'm setting the blog_tag variable through the theme customizer or settings_data.json file.

[YellowStars1]

Genius 😁 Thank you!!

[PipeCG]

Thanks, Just what I was looking for 😄

[augmentshop]

This works, but only shows one article per blog_handle. Does anyone know how to show all articles in all blogs with the specified tag? 

[YellowStars1]

Yes, I do it’s quite tricky to explain it on text,Here’s my LinkedIn, drop me a message:
https://www.linkedin.com/in/sergio-guinaudeau-26211b204 

[rkmishra89]

How should I add pagination with this ?

[herbovedam]

I want to list out my blog posts in the sidebar of every blog post page

I tried multiple times but nothing worked
here in website URL https://herbovedam.com/

[herbovedam]

@BrianAtWork 

In Refresh Theme : I Want To Add Sidebar On My Blog Posts, That Sidebar Should Show list of Recent Blogs

website - https://herbovedam.com/

sharing --- the code--

 {%- when 'content' -%}
      <div class="blog-with-sidebar">
        <div
          class="article-template__content page-width page-width--narrow rte"
          itemprop="articleBody"
          {{ block.shopify_attributes }}
        >
          {{ article.content }}
        </div>
           <div class="sidebar-right">
              <h3>Recent Blogs</h3>
<!--              -----------------sidebar content start---------------- -->
        
              <ul>
                 {% for blog in blogs %}
                 <li><a href="{{ blog.url }}">{{ blog.title }}</a></li>
                 {% endfor %}
              </ul>


            


<!--              -----------------sidebar content end--------------------------- -->

[herbovedam]

@BrianAtWork 

Refresh Theme : I Want To Add Sidebar On My Blog Posts, That Sidebar Should Show Recent Blogs

website url-- https://herbovedam.com/

      {%- when 'content' -%}
      <div class="blog-with-sidebar">
        <div
          class="article-template__content page-width page-width--narrow rte"
          itemprop="articleBody"
          {{ block.shopify_attributes }}
        >
          {{ article.content }}
        </div>
           <div class="sidebar-right">
              <h3>Recent Blogs</h3>
<!--              -----------------sidebar start---------------- -->
        
<ul>
    {% for blog in blogposts.blogpage.blog %}
      <li><a href="{{ blog.url }}">{{ blog.title }}</a></li>
    {% endfor %}
  </ul>
            


<!--              -----------------sidebar end--------------------------- -->

[alvaram]

This helped me out to do exactly this, hope it finds others useful:

{% assign blog_handles = 'blog-1,blog-2' | split:',' %}

{% for handle in blog_handles %}
  {% for article in blogs[handle].articles %}
    {% assign article_handles = article_handles | concat:blogs[handle].articles %}
  {% endfor %}
{% endfor %}

{% for article in article_handles limit: 3 %}
  <h2>{{ article.title }}</h2>
{% endfor %}

Cheers!

[Bloggle_team]

Hi,

Achieving what you want with several Shopify blog categories (blogs) is not the easiest way as you will face some issues to order your blog posts by date and to paginate which will be bad for performance if you have a lot of blogs.

Another method exists to create blog categories using a built-in Shopify functionality, the tags. Here is how to use it for your store.

The method:

Let's say we have three blog categories defined in Shopify: Interviews, Recipes, and Tutorials.

We will define tags for each category, tag our blog posts with these tags and move all our articles into a new single category, for instance, “journal” which will be our "All posts" category.

We will then add navigation in our blog template to filter articles based on tags.

Advantages of this method:

• You will have an all-posts category that can be paginated and that is ordered based on the blog publication date
• You can still filter your posts based on categories
• A blog post can be in several categories

Step-by-step tutorial:
⚠️Be careful. This method can require some coding skills, particularly for applying custom styles to the HTML navigation

1. Define a list of tags for each category:

   First, define tags that represent each of your categories. For instance, you could use 'Interviews', 'Recipes', and 'Tutorials' as your tags. Be careful, as tags are case-sensitive, and you need to use the same tag for all posts in a category
   
   

2. Tag the blog posts in Shopify
   Next, you'll need to go through your existing blog posts and assign each post to one or more of the tags you've defined.
   Navigate to the blog post → In the “Tags” section, type the appropriate tag according to the blog’s category → Save
   
   

3. Create a new blog category (or use an existing one)
   In Shopify, what we often refer to as 'categories' are different blogs.
   For this method, you will need to create a new blog (which acts as a category) or select an existing one to house all your posts.
   If you want to create a new blog, go to Blog posts → Click “Manage blogs” → Click “Add blog” button → Give a name to your blog, let’s say “Journal”
   
   

4. Move all the blog posts into the category
   Once you've created your new blog or chosen an existing one, you'll need to move all of your blog posts into this 'category'. To move a post, navigate to the blog post and change its blog assignment (right column) -> Save
   
   

5. Create an HTML navigation filtered by tags
   Now, all your blog posts are tagged and assigned in one unique category.
   Next, you'll need to edit your theme's liquid files to create a navigation bar that filters your blog posts based on tags.
   In your blog.liquid file (in template) or main-blog.liquid (for online store 2.0 themes), create links that use the URL structure /blogs/journal/tagged/tag-name, replacing 'journal' with the handle of your blog and 'tag-name' with each of your tags.
   
   Here's a simple example of what the code might look like:
   

<nav>
  <ul>
    <li><a href="/blogs/journal/">All posts</a></li>
    <li><a href="/blogs/journal/tagged/interviews">Interviews</a></li>
    <li><a href="/blogs/journal/tagged/recipes">Recipes</a></li>
    <li><a href="/blogs/journal/tagged/tutorials">Tutorials</a></li>
  </ul>
</nav>

You can then customize the CSS of this code to apply theme's style to the navigation.

Create tag-based navigation using an app:

If you don't want to code and are open to using an app to achieve create your navigation, you can also use our Bloggle app.

The Bloggle app comes with a built-in blog landing customization feature that will enable you to easily use the same method without coding skills (Take a look at this article in our documentation -> https://bloggle.helpdocs.io/article/s5ev272t7t-create-a-filtered-navigation)

Here's an image illustrating my answer:

While Bloggle can resolve your current issue, it offers much more:

• Design stunning layouts for your blog posts and landing pages, ensuring a captivating user experience.
• Create responsive blogs with a variety of sections: images, videos, newsletter forms, and more.
• Seamlessly embed your products into your posts - single product, product gallery, or product grid. This integration converts your readers into potential customers.
• Boost your SEO with our real-time scoring tool, making your content easier to find.
• Craft engaging content using our built-in templates or create your own for a personalized touch.
• Integrate your theme's buttons and headings for a cohesive design.
• Utilize the power of AI to swiftly and efficiently generate exceptional content.

*Moderator Edit*

Best,

Bloggle Team