When you create a blog post in Magento you add the post content, tags, categories and fill out the display setting, etc. However, how blog posts look on the frontend is defined by the post view settings. Since Magento 2 Blog extension comes with quite a few, today we'll cover each in detail. 

To configure the blog post page elements navigate to Stores > Configuration > Magefan Extensions > Post Page (Post View). 

magento 2 blog posts view


Choose between System Settings and Modern Template

Magento 2 Blog Post Page Design

Posts From The Same Category

Choose whether to Display Posts From the Same Category on the blog post page and set the Number of Posts to display.

Posts From the Same Category on Blog Post Page

And this is how the post from the same category is displayed on the storefront:

Magento 2 Blog Latest From Category

  • Enable the Display Related Posts option.
  • Select the related posts Template. You can Use System Setting, Modern or Slider template.
  • Set the Number of Posts you want to be displayed.
  • Enable Auto Related Posts if you want related posts to be generated automatically. 

Note: auto-related blog posts, modern and slider templates are available in Blog Plus or Extra only.

Magento 2 Blog Related Blog Posts

If you've enabled the automatic generation of related posts there is one more option you need to fill out.

This is how Related Posts look on the storefront in the modern template:

Related Blog Posts in Magento 2

Latest Posts by Author

In this section, you choose whether to Display Latest Posts By Author and set the Number of Posts if you enable this option. You can also choose the Template for this section: System Settings or Modern.

Latest Posts by Author Option

The Latest Posts by Author are displayed just below the author's block which you need to configure separately.

Latest Post from Author in Magento Blog

  • Choose whether to Display Related Products or not.

Note: once you add related products to the blog post, the blog post will appear in the Related Posts section on the product page.

  • Set the Number of Products you want to be displayed.
  • Enable Auto Related Products.

Magento 2 Blog Related Products

Same as with related posts, if you choose to enable auto-related blog products there will appear a new option. 

This is the Related Products section on the storefront:

Blog Related Products in Magento 2

Note: in the blog sidebar settings you can also choose to display related products in the sidebar.


In Magento 2 Blog extension there are 3 kinds of comments available: Magefan, Facebook and Disqus Blog Comments.

Each type of comment has different options and is displayed differently on the storefront.

Magento 2 blog comments

Previous and Next Post Links

Here you choose whether to Display Previous&Next Post Links on your blog post page. You also select the Template either Default (Next/Prev links) or Modern (Next/Prev Post Title links).

You can disable this option but it is a great way to increase user engagement with internal links. 

Previous and Next Posts in Magento Blog

This is how Modern Previous and Next post links are displayed on the storefront:

Blog Previous and Next Posts

Views Count

Choose to Calculate&Display Views Count to see which blog posts are the most popular. It is used for generating blog popular posts.

  Blog Post View Count

This is the View Count on the storefront if you choose Modern Template for post page:

View Count on Blog Posts

Reading Time

Enable the average Reading Time option to show your customers how long it takes to reach a blog post.

magento blog posts reading time

And that's how it is displayed on the frontend, near the authors, 

average reading time blog

It's important to note that Views Count and Reading Time are calculated by the extension automatically. However, if you want to set your own values for these two options you can do so in the blog post Display Settings.

blog post display settings

Reading Progress Bar

Finally, enable the Reading Progress Bar. Then you can also tweak the following settings for it.

  • Position — Top(Horizontal), Bottom(Horizontal), Left(Vertical), Right(Vertical)
  • Width/Height
  • Color
  • Opacity

reading progress bar magento blog

That's how a Left(Vertical) reading progress bar will be displayed on the frontend:

magento 2 blog reading progress bar

Once you finish, don't forget to Save the settings go to the storefront and check your blog post page view.  But, that's not it.