Series Connections<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\nThe Idea Behind Inheritance (Django Template Inheritance Explained)<\/h2>\n\n\n\n One template holds the shared structure \u2014 the <head><\/code>, the navbar, the footer. Every other page template extends that one, filling in only the part that’s actually different for that page. Change the navbar once, in one file, and every page using it updates automatically.<\/p>\n\n\n\nTwo tags make this work: {% extends %}<\/code> and {% block %}<\/code>.<\/p>\n\n\n\nStep 1: Create a Project-Level Templates Folder<\/h2>\n\n\n\n Up to now, templates have lived inside pages\/templates\/<\/code>, scoped to one app. A base template is meant to be shared across every app in the project, so it doesn’t really belong inside any single app’s folder. The standard place for it is a templates<\/code> folder at the project root, sitting next to manage.py<\/code>:<\/p>\n\n\n\nmyfirstproject\/\n manage.py\n templates\/\n base.html\n pages\/\n templates\/\n pages\/\n home.html\n myfirstproject\/\n settings.py<\/code><\/pre>\n\n\n\nDjango doesn’t search this root-level folder automatically \u2014 you have to point it there yourself. Open settings.py<\/code>, find the TEMPLATES<\/code> setting, and update the DIRS<\/code> list:<\/p>\n\n\n\npython<\/p>\n\n\n\n
TEMPLATES = [\n {\n 'BACKEND': 'django.template.backends.django.DjangoTemplates',\n 'DIRS': [BASE_DIR \/ 'templates'],\n 'APP_DIRS': True,\n ...\n },\n]<\/code><\/pre>\n\n\n\nBASE_DIR<\/code> is already defined near the top of settings.py<\/code> by default \u2014 it just points to your project’s root folder, the same place manage.py<\/code> lives. Adding BASE_DIR \/ 'templates'<\/code> to DIRS<\/code> tells Django to also look inside that root templates<\/code> folder, in addition to each app’s own templates<\/code> folder through APP_DIRS<\/code>.<\/p>\n\n\n\nNow create base.html<\/code> inside that root folder, not inside pages\/templates\/<\/code>. Put everything that should appear on every page:<\/p>\n\n\n\nAlso Add App In To Installed Apps<\/p>\n\n\n\nhtml<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>{% block title %}My Django Site{% endblock %}<\/title>\n<\/head>\n<body>\n <nav>\n <a href=\"\/\">Home<\/a>\n <a href=\"\/about\/\">About<\/a>\n <\/nav>\n\n <main>\n {% block content %}{% endblock %}\n <\/main>\n\n <footer>\n <p>© 2026 My Django Site<\/p>\n <\/footer>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nThose {% block %}<\/code> tags aren’t logic \u2014 they’re not {% if %}<\/code>, they’re not checking anything. They’re just named placeholders, marking the spots where a child template is allowed to insert its own content.<\/p>\n\n\n\nStep 2: Rewrite home.html to Extend It<\/h2>\n\n\n\n Instead of a full HTML document, home.html<\/code> now only needs to declare what it extends and fill in the blocks:<\/p>\n\n\n\nhtml<\/p>\n\n\n\n
{% extends \"base.html\" %}\n\n{% block title %}Home{% endblock %}\n\n{% block content %}\n <h1>Welcome to {{ site_name }}<\/h1>\n <p>{{ tagline }}<\/p>\n{% endblock %}<\/code><\/pre>\n\n\n\n{% extends \"base.html\" %}<\/code> has to be the very first line in the file \u2014 Django requires that. Everything below it fills in the named blocks from the base template. The view from Part 1 doesn’t need to change at all; it still passes site_name<\/code> and tagline<\/code> through render()<\/code> exactly as before.<\/p>\n\n\n\nReload the homepage. Visually, nothing looks different. Structurally, the entire page is now built from two files working together instead of one file repeating everything.<\/p>\n\n\n\nStep 3: Give the About Page the Same Treatment<\/h2>\n\n\n\n Assuming you have an about.html<\/code> template already, or are creating one now, the pattern is identical:<\/p>\n\n\n\nhtml<\/p>\n\n\n\n
{% extends \"base.html\" %}\n\n{% block title %}About{% endblock %}\n\n{% block content %}\n <h1>About This Site<\/h1>\n <p>This page shares the same navbar and footer as the homepage, without repeating any of that HTML here.<\/p>\n{% endblock %}<\/code><\/pre>\n\n\n\nVisit \/about\/<\/code>, and the navbar, the <head><\/code>, the footer \u2014 all identical to the homepage, without a single line of that markup existing in this file.<\/p>\n\n\n\n[Screenshot spot: home and about pages open in two tabs, both showing the identical navbar, proving they’re sharing one base file.]<\/p>\n\n\n\n
Proving the Point: Change the Navbar Once<\/h2>\n\n\n\n This is the part worth actually testing, not just reading about. Open base.html<\/code> and add a third link:<\/p>\n\n\n\nhtml<\/p>\n\n\n\n
<nav>\n <a href=\"\/\">Home<\/a>\n <a href=\"\/about\/\">About<\/a>\n <a href=\"\/contact\/\">Contact<\/a>\n<\/nav><\/code><\/pre>\n\n\n\nReload both the homepage and the About page. The new link appears on both, instantly, without touching home.html<\/code> or about.html<\/code> at all. That single edit updating every page at once is the entire reason inheritance exists.<\/p>\n\n\n\nWhat’s Deliberately Left Out Here<\/h2>\n\n\n\n Consistent with where this course actually is, this post doesn’t touch {% if %}<\/code> or {% for %}<\/code> \u2014 those get their own dedicated lesson separately. There’s no CSS or static file loading yet either. {% extends %}<\/code> and {% block %}<\/code> are the only two new pieces of syntax in this post, kept isolated so the mechanics of inheritance don’t get tangled up with anything else.<\/p>\n\n\n\nMistakes Worth Flagging<\/h2>\n\n\n\n Two things trip people up at this stage. First, forgetting {% extends \"base.html\" %}<\/code> as the literal first line of a child template \u2014 even a comment or blank line above it causes an error. Second, and specific to this setup, forgetting to add BASE_DIR \/ 'templates'<\/code> to DIRS<\/code> in settings.py<\/code>. Without that line, Django has no idea the root-level templates<\/code> folder exists, and you’ll get a “TemplateDoesNotExist” error even though the file is sitting right there. If base.html<\/code> won’t resolve after moving it, that setting is the first thing worth checking.<\/p>\n\n\n\nSeries Connections<\/h2>\n\n\n\n This continues directly from Part 1 of this series, where render()<\/code> and {{ variable }}<\/code> display were introduced \u2014 worth revisiting if the context dictionary or render()<\/code> call here feels unfamiliar. For a deeper look at overriding blocks selectively, including calling a parent block’s original content with {{ block.super }}<\/code>, the official Django documentation on template inheritance<\/a> covers patterns beyond what’s needed here.<\/p>\n\n\n\nConvert one more page of your own to extend base.html<\/code> before the next lesson, then make one small edit to the base file and watch it apply everywhere at once. That’s the moment inheritance stops being a concept and starts being obviously useful.<\/p>\n\n\n\nFull Course<\/a><\/p>\n\n\n\n