Last modified: Jan 10, 2023 By Alexander Williams

How to Create Django Custom 500 and 404 Error Pages

In this tutorial, we'll learn how to create Django custom 404 and 505 Error pages.

1. Django Project structure


├── core
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── __pycache__
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── manage.py
├── media
├── pypro
│   ├── __init__.py
│   ├── __pycache__
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── static
└── TEMPLATES

2. Views.py

In our views project, we need to add these two functions.

defhandler404(request, exception):
    return render(request, 'err/404.html', status=404)

defhandler500(request):
    return render(request, 'err/500.html', status=500)

handler404 function: return 404 not found page.

handler500 function: return 500 Internal Server Error page.

3. urls.py

In our base project URLs, we need to import & defined our page function.

#pypro/urls.pyfromcoreimport views

handler404 = views.handler404
handler500 = views.handler500

4. settings.py

In our settings.py, we must set debug = False.

#pypro/settings.py

DEBUG =False

5. Create custom 500 & 404 page Template

Now, we'll create the template for our page, so in the TEMPLATES folder, we need to create an err folder, and inside of this folder, we'll create 404.html & 500.html.

404.html

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>404 HTML Template by Colorlib</title><!-- Google font --><linkhref="https://fonts.googleapis.com/css?family=Fredoka+One"rel="stylesheet"><linkhref="https://fonts.googleapis.com/css?family=Raleway:400,700"rel="stylesheet"><!-- Custom stlylesheet --><style type="text/css">* {
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
}

body {
  padding:0;
  margin:0;
}

#notfound {
  position:relative;
  height:100vh;
}

#notfound.notfound {
  position:absolute;
  left:50%;
  top:50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

.notfound {
  max-width:710px;
  width:100%;
  text-align:center;
  padding:0px15px;
  line-height:1.4;
}

.notfound.notfound-404 {
  height:200px;
  line-height:200px;
}

.notfound.notfound-404h1 {
  font-family:'Fredoka One',cursive;
  font-size:168px;
  margin:0px;
  color:#1e50dc;
  text-transform:uppercase;
}

.notfoundh2 {
  font-family:'Raleway',sans-serif;
  font-size:22px;
  font-weight:400;
  text-transform:uppercase;
  color:#222;
  margin:0;
}

.notfound-search {
  position:relative;
  padding-right:123px;
  max-width:420px;
  width:100%;
  margin:30pxauto22px;
}

.notfound-searchinput {
  font-family:'Raleway',sans-serif;
  width:100%;
  height:40px;
  padding:3px15px;
  color:#222;
  font-size:18px;
  background:#f8fafb;
  border:1pxsolid rgba(34,34,34,0.2);
  border-radius:3px;
}

.notfound-searchbutton {
  font-family:'Raleway',sans-serif;
  position:absolute;
  right:0px;
  top:0px;
  width:120px;
  height:40px;
  text-align:center;
  border:none;
  background:#1e50dc;
  cursor:pointer;
  padding:0;
  color:#fff;
  font-weight:700;
  font-size:18px;
  border-radius:3px;
}

.notfounda {
  font-family:'Raleway',sans-serif;
  display:inline-block;
  font-weight:700;
  border-radius:15px;
  text-decoration:none;
  color:#39b1cb;
}

.notfounda>.arrow {
  position:relative;
  top:-2px;
  border:solid#39b1cb;
  border-width:03px3px0;
  display:inline-block;
  padding:3px;
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}

@mediaonlyscreenand(max-width:767px) {
  .notfound.notfound-404 {
    height:122px;
    line-height:122px;
  }
  .notfound.notfound-404h1 {
    font-size:122px;
  }
}


    </style><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>        <![endif]--></head><body><divid="notfound"><divclass="notfound"><divclass="notfound-404"><h1>404</h1></div><h2>Oops, The Page you are looking for can't be found!</h2><ahref="/"><spanclass="arrow"></span>Return To Homepage</a></div></div></body><!-- This templates was made by Colorlib (https://colorlib.com) --></html>

500.html

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>404 HTML Template by Colorlib</title><!-- Google font --><linkhref="https://fonts.googleapis.com/css?family=Fredoka+One"rel="stylesheet"><linkhref="https://fonts.googleapis.com/css?family=Raleway:400,700"rel="stylesheet"><!-- Custom stlylesheet --><style type="text/css">* {
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
}

body {
  padding:0;
  margin:0;
}

#notfound {
  position:relative;
  height:100vh;
}

#notfound.notfound {
  position:absolute;
  left:50%;
  top:50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

.notfound {
  max-width:710px;
  width:100%;
  text-align:center;
  padding:0px15px;
  line-height:1.4;
}

.notfound.notfound-404 {
  height:200px;
  line-height:200px;
}

.notfound.notfound-404h1 {
  font-family:'Fredoka One',cursive;
  font-size:168px;
  margin:0px;
  color:#1e50dc;
  text-transform:uppercase;
}

.notfoundh2 {
  font-family:'Raleway',sans-serif;
  font-size:22px;
  font-weight:400;
  text-transform:uppercase;
  color:#222;
  margin:0;
}

.notfound-search {
  position:relative;
  padding-right:123px;
  max-width:420px;
  width:100%;
  margin:30pxauto22px;
}

.notfound-searchinput {
  font-family:'Raleway',sans-serif;
  width:100%;
  height:40px;
  padding:3px15px;
  color:#222;
  font-size:18px;
  background:#f8fafb;
  border:1pxsolid rgba(34,34,34,0.2);
  border-radius:3px;
}

.notfound-searchbutton {
  font-family:'Raleway',sans-serif;
  position:absolute;
  right:0px;
  top:0px;
  width:120px;
  height:40px;
  text-align:center;
  border:none;
  background:#1e50dc;
  cursor:pointer;
  padding:0;
  color:#fff;
  font-weight:700;
  font-size:18px;
  border-radius:3px;
}

.notfounda {
  font-family:'Raleway',sans-serif;
  display:inline-block;
  font-weight:700;
  border-radius:15px;
  text-decoration:none;
  color:#39b1cb;
}

.notfounda>.arrow {
  position:relative;
  top:-2px;
  border:solid#39b1cb;
  border-width:03px3px0;
  display:inline-block;
  padding:3px;
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}

@mediaonlyscreenand(max-width:767px) {
  .notfound.notfound-404 {
    height:122px;
    line-height:122px;
  }
  .notfound.notfound-404h1 {
    font-size:122px;
  }
}


    </style><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>        <![endif]--></head><body><divid="notfound"><divclass="notfound"><divclass="notfound-404"><h1>404</h1></div><h2>Oops, The Page you are looking for can't be found!</h2><ahref="/"><spanclass="arrow"></span>Return To Homepage</a></div></div></body><!-- This templates was made by Colorlib (https://colorlib.com) --></html>

Done!

Now, it's time to test our 404 & 500 error pages.

6. Result

before:

How to Create Django Custom 500 and 404 Pages