How to add blog posts on homepage in nopCommerce

Recently, I received an email from one of the nopCommerce user in regard to the question about adding blog posts on homepage. Adding blog posts on homepage is not a very difficult task but at the same time it is not very straight forward also for developers who are new to nopCommerce or ASP.NET MVC.

So,  today I am going to demonstrate all the necessary steps required to accomplish this task (i.e. adding blog posts on homepage).

Step 1) You need "Source code" to perform these steps (NOT web version)

Step 2) We need to create a view

Go to: Nop.Web / View / Blog

Add a new view and name it: "HomePageBlog.cshtml"

add nopcommerce blog to homepage

Step 3) Add this code in your HomePageBlog.chtml view page:

@using Nop.Web.Models.Blogs;
@using Nop.Web;
@using Nop.Web.Extensions;
<hr />
    <h2>Recent Blog Posts</h2>
<hr />
    @foreach (var item in Model.BlogPosts)
        <a href="@Url.RouteUrl("BlogPost", new { blogPostId = item.Id, SeName = item.SeName })">
        </a><br /><br />

Step 4) Now, go to: Nop.Web / Controllers / BlogController.cs

Open the file "BlogController.cs"

adding nopcommerce blog to homepage

Step 5) We need to add a method "HomePageBlog"

public ActionResult HomePageBlog(BlogPagingFilteringModel command)
            var model = new BlogPostListModel();
            model.WorkingLanguageId = _workContext.WorkingLanguage.Id;
            if (command.PageSize <= 0) command.PageSize = _blogSettings.PostsPageSize;
            if (command.PageNumber <= 0) command.PageNumber = 1;
            DateTime? dateFrom = command.GetFromMonth();
            DateTime? dateTo = command.GetToMonth();
            IPagedList<BlogPost> blogPosts;
            blogPosts = _blogService.GetAllBlogPosts(_storeContext.CurrentStore.Id,
                    dateFrom, dateTo, command.PageNumber - 1, 3);
            model.BlogPosts = blogPosts
                .Select(x =>
                    var blogPostModel = new BlogPostModel();
                    PrepareBlogPostModel(blogPostModel, x, false);
                    return blogPostModel;
            return PartialView(model);

Step 6) The number of blog posts you would like on your homepage can be controlled by this line above:

dateFrom, dateTo, command.PageNumber - 1, 3);

In this example, I am displaying "3" blog posts

Step 7) Now, go to: Nop.Web / View / Home / Index.cshtml

Open the "Index.cshtml"

Add this to your homepage (where you would like to display the blog posts): 
 @Html.Action("HomePageBlog", "Blog")

Like this:

    Layout = "~/Views/Shared/_ColumnsThree.cshtml";
<div class="page home-page">
    <div class="page-body">
        @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
        @Html.Action("HomepageCategories", "Catalog")
        @Html.Action("HomepageProducts", "Product")
        @Html.Action("HomepageBestSellers", "Product")
        @Html.Action("HomePageNews", "News")
        @Html.Action("HomePagePolls", "Poll")
        @Html.Action("HomePageBlog", "Blog")

Step 8) That's all! Build your project and you should see the blog posts on your homepage
(You can add the blog post to any page like this and add your custom design to it)

adding nopcommerce blog on homepage

Version Information: I am using nopCommerce 3.5 version for this example.

Hope it helps!

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment
3/31/2015 8:58 PM
Awesome, thanks for the help! Appreciated.
4/2/2015 12:20 AM
Thank you Roland for your comments. I am glad it helped...
8/15/2015 3:46 AM
Saved my day! Thanks!
11/7/2015 6:26 AM
nopCommerce was the reason I switched to MVC from WebForms.  I've been desperately trying to figure out how to make this happen, and I finally learned enough about MVC to do so - of course after that I stumbled upon this post.

My way was a bit different.  I created a HomePageBlog model with a BlogPostModel list.  From the controller I grabbed the latest 3 posts using _blogService, and looped through them passing the relevant parameters to my new model (Title, SeName, Date, BodyOverview &lt;- which I believe is new to nop 3.6).

In my view I basically laid it out like the HomePageNewsItems are.

Thought I'd share - wish I found this before I went through all that work, but I also must say it was rewarding figuring it out!
11/7/2015 9:14 AM
Dan, thank you for your comments. If you would like to share your approach, please feel free to use the discussion board here and post your solution. I am sure users will appreciate learning 2 different approaches for a solution.
10/23/2018 2:43 AM
It is good to see this type of information which generally developer searching for adding blogs into their pages.
I really like this information and i usually want to make new website with this blog functionality.