{"id":168234,"date":"2017-10-16T13:00:28","date_gmt":"2017-10-16T13:00:28","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=168234"},"modified":"2017-10-17T09:21:17","modified_gmt":"2017-10-17T09:21:17","slug":"customizing-error-page-deactivated-archived-sites","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/customizing-error-page-deactivated-archived-sites\/","title":{"rendered":"Customizing the Error Page for Deactivated or Archived WordPress Sites"},"content":{"rendered":"<p>If you run a WordPress Multisite network, the chances are that you&#8217;ve had to archive, suspend or delete one or two sites along the way.<\/p>\n<p>If the network is for your own use, you may have created a site and then realised you don&#8217;t need it after all, you might have moved it to a standalone WordPress installation, or you could have accidentally created a duplicate of a site you&#8217;ve already created. I&#8217;ve done all of these &#8211; not too clever!<\/p>\n<p>If the network is open for users to create their own sites, then you&#8217;ll have had to take down some spammy blogs over time, or maybe remove a site that someone set up under a free trial but didn&#8217;t continue with.<\/p>\n<p>And if you&#8217;re using your network to host client sites, then you may have had a site that&#8217;s migrated to its own WordPress installation or that you&#8217;ve removed when the client has gone out of business or moved on to another web developer or host.<\/p>\n<p>By default, if someone visits a site that you&#8217;ve deactivated, they&#8217;ll see a pretty dull default screen telling than that the site has been suspended.<\/p>\n<p>But what if you want to customize this screen, or add some custom content such as a link encouraging people to visit your main site or create their own blog?<\/p>\n<p>In this post, I&#8217;m going to show you exactly how to do just that. I&#8217;ll show you how to create a file in your <em>wp-content<\/em> directory that overrides the default file for that screen, and how to style it.<\/p>\n<p>But before I do that, let&#8217;s look at the different options you have for suspending a site, and what users will see when you do each of these.<\/p>\n<h2>Suspending Sites in Your Network &#8211; the Options<\/h2>\n<p>I have to admit that I find the terminology around deleting and suspending sites in a network very confusing. It&#8217;s not entirely clear what each one means and sometimes when you do one, the system will tell you that you&#8217;ve done another.<\/p>\n<p>So let&#8217;s have a recap on the options for removing sites from your network.<\/p>\n<p>Here&#8217;s a detail of the Multisite Sites screen, which you access by going to <strong>My Sites &gt; Network Admin &gt; Sites<\/strong>:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/10\/network-admin-site-settings.png\" alt=\"Multisite network admin - sites screen\" width=\"600\" height=\"194\" \/> <\/div>\n<p>There are four options for removing the site:<\/p>\n<ul>\n<li><strong>Deactivate<\/strong> reverses the activation step users go through when they signup for a site. It doesn&#8217;t permanently delete the site which can be reactivated at any time. Neither the front end nor the site admin screens are accessible.<\/li>\n<li><strong>Archive<\/strong> marks a site as being archived so it\u2019s not accessible by users. The admin screens can be accessed but not the front end. Again, you can easily archive a site at any time and it hasn&#8217;t been removed.<\/li>\n<li><strong>Spam<\/strong> doesn&#8217;t delete the site, but marks it as spam. It&#8217;ll be unavailable (front end and admin) until you decide to unmark it as spam or delete it.<\/li>\n<li><strong>Delete<\/strong> deletes the site. Use this option with extreme caution!<\/li>\n<\/ul>\n<h2>The Default Screen for Suspended Sites<\/h2>\n<p>WordPress has a default screen that it displays when a site is removed.<\/p>\n<p>Here&#8217;s what you see in each scenario.<\/p>\n<h3>Deactivated Sites<\/h3>\n<p>If a site is deactivated and someone other than the (logged in) network admin visits it, they&#8217;ll see a default screen:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/10\/deactivated-site-default.png\" alt=\"deactivated WordPress site - default screen\" width=\"600\" height=\"206\" \/> <\/div>\n<h3>Archived Sites and Sites Marked as Spam<\/h3>\n<p>If you mark a site as spam or archive it, you&#8217;ll get a different screen:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/10\/archived-site-default.png\" alt=\"WordPress default archived site screen\" width=\"600\" height=\"165\" \/> <\/div>\n<p>These screens are very basic. They don&#8217;t really give the visitor much information or explain what&#8217;s meant by &#8216;no longer available&#8217; or &#8216;archived or suspended&#8217;.<\/p>\n<p>So let&#8217;s create our own.<\/p>\n<p><em>Note that if the site has been deleted you won&#8217;t see one of these screens &#8211; instead you&#8217;ll be taken to a 404 page in the main site.<\/em><\/p>\n<h2>Creating a Page for Deactivated Sites<\/h2>\n<p>Creating a new page for displaying when someone visits a deactivated site is quite straightforward. You simply create a new file called <em>blog-deleted.php<\/em> and put it in your network&#8217;s <em>wp-content<\/em> folder. This file will then be used to display a custom page instead of the default page.<\/p>\n<p>Note that this is in the network&#8217;s <em>wp-content.php<\/em> folder and so the same file will be used for any sites in your network that are deactivated. This means that you need to create something generic, rather than something specific to one site in your network.<\/p>\n<p><em>Note: the title of this file is very confusing. It doesn&#8217;t apply to deleted sites, just to deactivated ones!<\/em><\/p>\n<p>The page you create will need to stand alone &#8211; it won&#8217;t be using the site&#8217;s theme or calling any plugins or additional files. So you&#8217;ll need to either include any styling in that file or call an external stylesheet, which you would put in a styles folder in your <em>wp-content<\/em> folder.<\/p>\n<p>You&#8217;ll also need to include the <code>&lt;head&gt;<\/code> section and the opening and closing <code>&lt;body&gt;<\/code> tags as these won&#8217;t be coming in via your theme&#8217;s header or footer files.<\/p>\n<p>For the sake of simplicity I&#8217;m going to create a very simple file with all the styling included in it.<\/p>\n<p>You can start with a completely blank file if you&#8217;d like or you can copy some of the content from your theme files. For one, I&#8217;ve copied in the contents of my theme&#8217;s <em>header.php<\/em> file and edited those down significantly, then manually added the rest of the markup.<\/p>\n<p>Here&#8217;s the contents of my <code>&lt;head&gt;<\/code> section:<\/p>\n<div class=\"gist\" data-gist=\"01dd53bffb612f354db2276d6794e1b4\" data-gist-file=\"blog-deleted-head.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/01dd53bffb612f354db2276d6794e1b4.js?file=blog-deleted-head.php\">Loading gist 01dd53bffb612f354db2276d6794e1b4<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>That gives me the required content plus some metadata and styling.<\/p>\n<p>Now for the <code>&lt;body&gt;<\/code>:<\/p>\n<div class=\"gist\" data-gist=\"7ce1538633c119d2fb6afed709cc026e\" data-gist-file=\"blog-deleted-body.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/7ce1538633c119d2fb6afed709cc026e.js?file=blog-deleted-body.php\">Loading gist 7ce1538633c119d2fb6afed709cc026e<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>There isn&#8217;t much to the body &#8211; just an element for the content, with a paragraph inside it and some text, which is translatable. This includes a link to the main site, which you might want to include if your network allows user sign-ups. Alternatively you might link to a different site on your network if this site has been replaced, or to a page on your main site explaining your policy for deleting sites, or wherever you wanted.<\/p>\n<p>Let&#8217;s take a look at the screen we get now if a site is deactivated:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/10\/deactivated-site-new.png\" alt=\"WordPress deactivated site custom page\" width=\"600\" height=\"459\" \/> <\/div>\n<p>It isn&#8217;t very pretty right now &#8211; you might want to add some different styling, colours and maybe a headline. But it shows you that it&#8217;s possible to replace the default page for deleted sites and add anything you want to it.<\/p>\n<h2>Creating a Page for Archived Sites<\/h2>\n<p>If you want to also create a custom page for sites which have been archived or marked as spam (and why wouldn&#8217;t you?), you&#8217;ll need to create another file, also in your <em>wp-content<\/em> folder. This is called <em>blog-suspended.php<\/em>.<\/p>\n<p>I&#8217;ve created another file which is identical to my <em>blog-deleted.php<\/em> file but with slightly different text. Here&#8217;s the code:<\/p>\n<div class=\"gist\" data-gist=\"3ff366a4c5992bb7d5104da60195f270\" data-gist-file=\"blog-suspended.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/3ff366a4c5992bb7d5104da60195f270.js?file=blog-suspended.php\">Loading gist 3ff366a4c5992bb7d5104da60195f270<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Here&#8217;s the page you get when you visit an archived site:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/10\/archived-site-new.png\" alt=\"WordPress archived site custom screen\" width=\"600\" height=\"459\" \/> <\/div>\n<p>So again, our visitor has some more information and a link to the main site. You can replace this with whatever you want.<\/p>\n<h2>More Advanced Options<\/h2>\n<p>You can take this technique further.<\/p>\n<p>The first thing you can do to improve your code is to separate out the styles and add them to a stylesheet in your <em>wp-content<\/em> folder. You&#8217;d then call that stylesheet from each of the two files for suspended and deactivated sites, meaning you only need to code the styling once. If you want different styling for each of the two pages, you can add an extra class to the <code>body<\/code> tag for each file and target that.<\/p>\n<p>To call your new stylesheet, add this line of code to the <code>&lt;head&gt;<\/code> section of your file:<\/p>\n<div class=\"gist\" data-gist=\"54a6a8f205748e51392ffce7cdea4e31\" data-gist-file=\"stylesheet.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/54a6a8f205748e51392ffce7cdea4e31.js?file=stylesheet.php\">Loading gist 54a6a8f205748e51392ffce7cdea4e31<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Alternatively you could import the stylesheet from the theme which has been activated for the suspended site. Be wary of doing this &#8211; if the site is spammy, there may be a problem with the code, or you may have removed the theme altogether after deactivating the site. But if you want to do this, you can include the theme stylesheet with this line in the <code>&lt;head&gt;<\/code>:<\/p>\n<div class=\"gist\" data-gist=\"267eb7363094c40398b74f4acd6537cb\" data-gist-file=\"theme-stylesheet.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/267eb7363094c40398b74f4acd6537cb.js?file=theme-stylesheet.php\">Loading gist 267eb7363094c40398b74f4acd6537cb<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>You could take this even further by using the <code>include<\/code> function to call specific files from the theme such as the header or footer. But again, be wary, as the theme may be deleted or corrupted. If you do this, it gives you the option of giving each blog a suspended page that looks unique.<\/p>\n<p>Another option is to use the stylesheet from your main site, meaning you can brand all of your suspended\/deactivated screens with your own branding. To call the stylesheet from the main theme, you&#8217;d need to add this code in the <code>&lt;head&gt;<\/code>:<\/p>\n<div class=\"gist\" data-gist=\"d206d9169cbb320cea671b028b01e10c\" data-gist-file=\"network-stylesheet.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/d206d9169cbb320cea671b028b01e10c.js?file=network-stylesheet.php\">Loading gist d206d9169cbb320cea671b028b01e10c<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>You&#8217;d then use the appropriate elements for the markup in your page so that it works with your main blog&#8217;s theme &#8211; or you could call files from that theme using the <code>include<\/code> tag.<\/p>\n<p>Finally, you could use conditional tags to check on the blog ID, the status of the blog, or anything else you&#8217;d like to check for, and then serve up content accordingly.<\/p>\n<p>But if you don&#8217;t want to go this far, a simple page like the one we&#8217;ve created above will provide visitors with more information than the default, and lets you direct people elsewhere in your network.<\/p>\n<h2>It&#8217;s Easy to Replace the Default Pages for Deactivated Sites<\/h2>\n<p>If you follow the steps above, you can quickly and easy replace the default pages for archived, suspended or deleted sites in your network.<\/p>\n<p>This way you can give visitors more information than that provided by the default screens, and give them a link to your main site so they don&#8217;t just leave your network entirely.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you run a WordPress Multisite network, the chances are that you&#8217;ve had to archive, suspend or delete one or two sites along the way. If the network is for your own use, you may have created a site and then realised you don&#8217;t need it after all, you might have moved it to a [&hellip;]<\/p>\n","protected":false},"author":347011,"featured_media":168736,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[1117,263],"tags":[],"tutorials_categories":[],"class_list":["post-168234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-multisite","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/168234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/347011"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=168234"}],"version-history":[{"count":9,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/168234\/revisions"}],"predecessor-version":[{"id":168779,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/168234\/revisions\/168779"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/168736"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=168234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=168234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=168234"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=168234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}