Adding Recent Posts to the Sidebar of a Django Blog Post Detail Page

Django Updated on April 24, 2025

Table of Contents

  1. Introduction
  2. Prerequisites
  3. Step 1: Query Recent Posts in the View
  4. Step 2: Update the Post Detail Template
  5. Step 3: Style the Sidebar
  6. Step 4: Test the Implementation
  7. Conclusion

Introduction

A blog’s post detail page is a great place to engage readers with additional content. Adding a sidebar with recent posts encourages users to explore more of your site. In this post, we’ll implement a recent posts section in the sidebar of a Django blog’s post detail page, keeping the solution simple and reusable.

Prerequisites

  • A Django blog app with a Post model.
  • Basic knowledge of Django templates, views, and models.
  • Bootstrap or custom CSS for styling (optional).

Ensure your blog has a post detail view and template set up. We’ll assume a Post model with fields like title, slug, created_at, and a URL pattern for post details.

Step 1: Query Recent Posts in the View

To display recent posts, modify the post detail view to fetch the latest posts. Here’s an example using a function-based view:

from django.shortcuts import render, get_object_or_404
from .models import Post

def post_detail(request, slug):
    post = get_object_or_404(Post, slug=slug)
    recent_posts = Post.objects.exclude(slug=slug).order_by('-created_at')[:5]
    context = {
        'post': post,
        'recent_posts': recent_posts,
    }
    return render(request, 'blog/post_detail.html', context)
  • get_object_or_404: Retrieves the post by slug or returns a 404 if not found.
  • recent_posts: Queries the five most recent posts, excluding the current post, ordered by created_at.
  • context: Passes both the current post and recent posts to the template.

For a class-based view (e.g., DetailView), override get_context_data:

from django.views.generic import DetailView
from .models import Post

class PostDetailView(DetailView):
    model = Post
    template_name = 'blog/post_detail.html'
    context_object_name = 'post'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['recent_posts'] = Post.objects.exclude(slug=self.object.slug).order_by('-created_at')[:5]
        return context

Step 2: Update the Post Detail Template

Modify the post_detail.html template to include a sidebar with recent posts. Use Bootstrap for a responsive layout:

{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <!-- Main Content -->
        <div class="col-md-8">
            <h1>{{ post.title }}</h1>
            <p>{{ post.content|safe }}</p>
            <small>Posted on {{ post.created_at|date:"F d, Y" }}</small>
        </div>
        <!-- Sidebar -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5>Recent Posts</h5>
                </div>
                <ul class="list-group list-group-flush">
                    {% for recent_post in recent_posts %}
                        <li class="list-group-item">
                            <a href="{% url 'post_detail' recent_post.slug %}">{{ recent_post.title }}</a>
                            <small class="text-muted">{{ recent_post.created_at|date:"F d, Y" }}</small>
                        </li>
                    {% empty %}
                        <li class="list-group-item">No recent posts available.</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}
  • The row and col-md-* classes create a two-column layout.
  • The sidebar uses a Bootstrap card to list recent posts with links to their detail pages.
  • The {% empty %} block handles cases where no recent posts exist.

Step 3: Style the Sidebar

If you’re not using Bootstrap, add custom CSS to style the sidebar. Create a static/css/style.css file:

.sidebar {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
}

.sidebar h5 {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin-bottom: 10px;
}

.sidebar a {
    text-decoration: none;
    color: #007bff;
}

.sidebar a:hover {
    text-decoration: underline;
}

.sidebar .text-muted {
    font-size: 0.85rem;
}

Update the template to include the CSS and apply the sidebar class:

<div class="col-md-4">
    <div class="sidebar">
        <h5>Recent Posts</h5>
        <ul>
            {% for recent_post in recent_posts %}
                <li>
                    <a href="{% url 'post_detail' recent_post.slug %}">{{ recent_post.title }}</a>
                    <small class="text-muted">{{ recent_post.created_at|date:"F d, Y" }}</small>
                </li>
            {% empty %}
                <li>No recent posts available.</li>
            {% endfor %}
        </ul>
    </div>
</div>

Load the static file in base.html:

{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">

Step 4: Test the Implementation

  1. Run the development server (python manage.py runserver).
  2. Navigate to a post detail page (e.g., /post/my-post-slug/).
  3. Verify that:
    • The sidebar displays up to five recent posts.
    • The current post is excluded from the list.
    • Links to recent posts work correctly.
    • The sidebar is styled and responsive.

If no posts appear, check your database for posts and ensure the query in the view is correct.

Conclusion

Adding a recent posts sidebar to your Django blog’s post detail page is a straightforward way to improve navigation and engagement. By querying recent posts in the view, updating the template, and applying styles, you create a professional and user-friendly feature. This approach is flexible and can be extended with additional sidebar content, such as categories or tags, to further enhance your blog.