When running a blog, navigation is one of the most important things you need to keep in mind. It's essential that your readers can browse through your publications easily and find information fast.
The offers you an advanced instrument for that — a sidebar. Here you can configure various elements, such as the search form, category tree, related products, tags cloud and more.
You only need to press a few buttons to manage the Magento 2 blog sidebar. And today you'll learn how to do that.
To manage the Magento 2 blog sidebar, navigate to Stores > Configuration > Magefan Extensions > Blog and unfold the Sidebar section, Here you'll find all the available widgets. Let's have a look at each of them in particular.
Note: you need to set the Sort Order to determine the position of each widget. The larger the number, the lower the widget is displayed in the sidebar.
Search Form
Here you just need to Enable the search form and specify its Sort Order. Once done, the search will be displayed in the sidebar allowing your customers to find specific articles promptly.
In the Blog Extra edition, it's also possible to integrate the blog search into the catalogue search. This way, your shoppers will get more extensive search results.
Once you save the configuration, go and check the search form widget on the storefront.
Post Contents
To display the blog post contents, enable this widget and set its Sort Order. Just in two steps, you'll make the structure of your publications clearer and much easier to follow.
Here is how the post contents widget is displayed in the sidebar:
Categories
Displaying the category tree in the sidebar makes it simpler for readers to navigate your blog. They are just one click away from jumping to the preferred category.
Thus, enable the widget and specify if you want to Display the Number of Posts next to the category names. Fill out the Maximum Depth field to determine the number of categories and subcategories to be displayed in the category tree. Don't forget to enter the Sort Order, too.
Now you're good to check the category tree widget in the sidebar:
Recent Posts
To promote your new blog posts and encourage people to read more add the recent blog posts widget to the sidebar.
To begin with, enable the widget. Then, choose the Template and specify if you want to Display Post Image. Enter the Number of Posts to be shown and set up the Sort Order.
Note: only the blog posts with the "Include in Recent Post" option enabled will be displayed in the sidebar.
Here is the storefront view of the recent blog posts widget in the sidebar:
Featured Posts
If there are some specific posts you want your readers to pay attention to, there is an option for you, too. You can add the featured posts widget to the sidebar to highlight some articles.
So, enable the widget, choose its template and decide if you'd like to Display Post Image. Enter Post IDs to be displayed in this section. Remember also to set up the Sort Order.
After saving your settings, check out the featured posts widget on the frontend.
Popular Posts
Similarly to the recent posts, the popular posts widget showcases the trendiest publications in your blog. The posts are added to this widget based on the view count and not on your settings.
To enable this widget, you have to set up all the same fields as for the recent blog posts widget. Nothing complicated here.
Just like that, the popular posts widget will be displayed as follows:
Archive
The archive widget is a filter that also helps to display the chronology of your blog posting. After you enable this widget, you need to specify how to Group the Archive (Month and Year or just Year), set the Date Format and enter the Sort Order.
Here is how the archive widget will be shown in the sidebar:
Additionally, you can scroll down to the Archive section and configure Title, Description, Metadata and Meta Robots for the archive pages.
Tag Cloud
The tag widget can also enhance the reading experience by making it more interactive.
So first, enable the widget and specify if you want to Enable 3D Animation. If you opt for the animation, specify its Color and the Cloud Height. Finally, enter the Sort Order and the Number of Tags to be displayed.
The engaging tag cloud will appear in the sidebar once you save the configuration.
If you need to display tag count in the tag cloud, you need to extend the tags sidebar template:
1. Copy the template file from the Blog extension folder
view/frontend/templates/sidebar/tag_claud.phtml
to your theme folder
app/design/frontend/ThemeVendor/themename/Magefan_Blog/templates/sidebar/tag_claud.phtml
2. Add the following code
<?= $tag->getCount() ?>
inside the loop
<?php foreach ($tags as $tag) { ?>
Post Related Products
Adding relevant related products to the post's sidebar can also do the trick and prompt your customers to explore the items you sell. So why not add this widget, too?
Just enable it, specify the Number of Products to be shown and the widget's Sort Order.
Note: you need to specify related products when creating a blog post to display them in the sidebar.
You'll get the following result:
Custom HTML
Using the Custom HTML blocks you can add any other additional content to the sidebar. Here you can set up two such blocks (Custom HTML 1 and Custom HTML 2). Both have the same configuration steps.
You only need to enable the widget, set its Sort Order and add the corresponding HTML.
Don't forget to check your Custom HTML widget on the storefront:
RSS Feed
To share the content of your store, you can refer to the RSS Feed widget. To display it in the sidebar, you just need to enable it, set its Sort Order and Title, and enter the Feed Description if any.
The RSS Feed widget will be shown as follows:
Having configured all the widgets, Save your settings and check out the results on the storefront.
The Magento 2 blog sidebar certainly makes the blog navigation easier. Depending on what aspects you'd like to highlight, you can play around with the sidebar widgets and display the ones you find more effective.
However, don't forget about the general look of your blog and also make sure to set up the blog post listings and homepage.
