How to open the 404 page in the Theme Customizer preview?

Cool use case.

Without any code, in order to load the 404 template, all you have to do is navigate to a non-existent URL on your site. Then, while being logged-in, click the Customize link in the admin bar. The page you were on, which is the 404 template, will then appear in the Customizer preview.

To go beyond this and add a control which loads a not-found URL into the preview, you can do this via a custom setting-less control. This can further be augmented to only show the control if the 404 template is not currently being displayed. Here’s how you can do it:

$wp_customize->add_control( 'not_found_link', array(
    'section'  => 'not_found_template',
    'settings' => array(),
    'type' => 'button',
    'priority' => 1,
    'input_attrs'  => array(
        'value' => __( 'Load Not Found Template' ),
        'class' => 'button button-secondary',
        'onclick' => 'wp.customize.previewer.previewUrl.set( "/not-found-" + String( Math.random() ) + "https://wordpress.stackexchange.com/" );',
    ),
    'active_callback' => function() {
        return ! is_404();
    },
) );

Naturally the section argument should match the ID for whatever section you are using.

Related Posts:

  1. WordPress Migration: Getting 404 Errors: Only Home Page works
  2. External page integrated into WordPress returns a 404 error
  3. WordPress Theme’s 404.php not found, server defaults to Apache’s own 404 page
  4. 404 when fetching image from wp-content/uploads/
  5. REST API: No route was found matching the URL and request method
  6. WordPress REST API 404
  7. Changing Site Address (URL) causes 404
  8. Detect 404 before headers are sent
  9. In wordpress I am manipulation 404 response. I want to give the response before 404 error is given to google
  10. 404 error on homepage when using Nginx proxying to Apache
  11. Non “WordPress” pages/code getting 404 error
  12. page not found in Chrome, but found in Firefox
  13. Moved to new server, all pages work EXCEPT home page (page not found)
  14. High CPU usage on 404 errors
  15. How to fix “failed to set referrer policy: The value ‘ ‘ is not one of…”?
  16. 404 to 301 – Fixing old links
  17. $error = 404 after caught add_rewrite_rule
  18. How do I go about fixing this apparently messed up upgrade?
  19. WordPress Stats keeps showing non-existent post as a top post?
  20. Form in WordPress : 404
  21. Non-existent page returns code 200
  22. WP is redirecting instead of going to 404
  23. Conditional for 404 page not work
  24. Nginx with WordPress not showing template 404 for certain file types
  25. post parameter ‘name’ 404 error
  26. Intermittently missing pages and posts in WordPress
  27. oEmbed 404 errors when trying to use embed block
  28. 404 after moving localhost wp to server
  29. WordPress Post – On Post – 404 Page Not Found
  30. How to find out which function is causing a 404
  31. Prevent WordPress from interpreting a subfolder?
  32. Getting 404s on New Pages
  33. All pages after level 1 showing 404 after WordPress migration plugin – how to fix?
  34. index2.php in root causing 404 error
  35. Custom 404 page for dashboard
  36. WordPress.org support topics returning 404 [closed]
  37. How can I prevent non-existing wordpress pages from getting redirected to home page
  38. Incorrect url for sharing blog on linkedin [closed]
  39. Catch 404 errors in nested installations
  40. Getting 404 error on my wp rewrite error
  41. redirect deleted / drafted pages
  42. 404 error on dynamic stylesheet creation
  43. WordPress refuses to read the .htaccess file and gives a 404 for sub-pages
  44. How to recover WordPress Adress(URL)
  45. URL Change – Check if Post Exists Before 404
  46. WPML – 404 Error when I try to pass GET parameters in my “different languages in directories” installation
  47. How to use wp_footer() on a 404 page?
  48. Sub Domain’s Pages return 404
  49. Is the 404 page the same as “well this is embarrasing” page?
  50. Google 404 Errors
  51. WordPress Installation in Subfolder only works half
  52. Page not found if mod_cache_disk is active
  53. Why aren’t links clickable on my 404 error page? [closed]
  54. Blank TinyMCE and 404 errors on assets
  55. How do I redirect a permalink for a Draft post to a custom 404 page?
  56. New install of wordpress, my url goes to index of/
  57. Page not found when trying to link to files in child theme directory
  58. Can’t view post, goes to 404 page. Please help
  59. Custom Post Types cause 404 for pages? [closed]
  60. How to fix 404 page error on theme
  61. How can stop redirects 404 in wordpress
  62. why I get a lot of 404 not found links via Google search console and how to fix them?
  63. 404 error on new pages but only for non logged in users?
  64. Unable to change 404
  65. Redirect search.php to 404.php
  66. WordPress Admin page Error 404
  67. Problem with a wordpress admin system. and website
  68. WordPress Inner pages giving 404 Error after shifted to new server
  69. 404s after changing site url in settings
  70. Page 404 Error on Localhost
  71. Why my post showing not found in admin side when i click on count of category?
  72. “Headers already sent” error triggered in “parse_query” action
  73. Manage 404 page over wordpress backend?
  74. 404 Page not found error after adding ‘s’ in ‘http’ in Settings
  75. 404 Errors on Every Page (Including Homepage) After Migrating From IIS to Apache
  76. All files being pulled from wp-content returning 404 error
  77. Homepage URL showing a 404 error
  78. What could be the reason that i can’t access to the other pages of my localhost wordpress website except the homepage?
  79. Random 404 on any page
  80. Exclude from wp_list_pages by template
  81. Intermittent Rewrite Problems
  82. How to get redirection to not redirect to 404 page?
  83. Getting 404 pages when upgrading from 3.5.2 to 4.1.1
  84. Local copy of site returns 404 for all content outside of core .php templates
  85. My website not showing 404 error!
  86. Install wordpress as a development site in a subdirectory on live server
  87. 404 errors in log showing urls with ‘GET’, plus and numerical code
  88. WordPress not showing custom 404 page for not found images, zip files
  89. Override private status – Enable users to read private posts
  90. Posting to most pages throws 404
  91. $_POST[‘message’] gives a 404 [duplicate]
  92. 404 Not Found nginx on wp-admin
  93. Author page not found
  94. except home page , all the links throwing an error “404 Pages Cannot be found” [closed]
  95. Can you redirect a 404 to a WordPress page and still show response code 404?
  96. Getting 404 error while file exists
  97. WordPress Site transfered to another Server. 404 all pages
  98. Unidentified 404 error [closed]
  99. Can’t link to pages from Home Front Page now. Get 404
  100. How to navigate to a non-wordpress page in a wordpress install without getting a 404 error?

Leave a Comment