Wordpress Toast Component To Display Current Template

The Wordpress Template Hierarchy is one of the Wordpress things about Wordpress, and allows for dynamically displaying content based on the permalink used — among many other offerings.

I remember the daunting feeling of staring at it years ago — fighting to understand what I was looking at.

My grasp on how it works is much better now, but for rapid development of Wordpress themes, I still find the need to quickly know which template has been used for the page I’ve currently viewing.

So today I’m sharing a quick snippet I whipped up a year or so ago that created a clean little toast that appears for a few seconds in the bottom right corner of the screen that displays the currently loaded template.

In your functions.php:

function wp_display_template_toast_89451115()
{

    if (is_super_admin()) {
        global $template;
        $markup = '
        <div id="wp-template-toast">
        %s
        </div>
        <script>
        setTimeout(function() {
            document.getElementById("wp-template-toast").remove()
        }, 3000)
         </script>
         <style>
         #wp-template-toast {
         font-family: sans-serif;
         font-weight: bold;
         position: fixed;
         right: 10px;
         bottom: 10px;
         padding: 10px 14px;
         background: rgba(255,0,0,.5);
         color: white;
         display: flex;
         justify-content: center;
         font-size: 12px;
         border-radius: 5px;
         }
         </style>';
        echo sprintf($markup, basename($template));
    }

}

add_action('wp_footer', 'wp_display_template_toast_89451115');

1. Add this to the bottom of your functions.php file (or wherever you see fit).
2. Adjust styling of the toast within the <style> tag in the snippet to suit your liking.
3. Adjust how long you want the toast to display by changing the amount of milliseconds used in the setTimeout function within the <script tag in the snippet (default is 3000).
4. Log in as an administrator on the site.
5. Refresh any page and you should see the toast.

This snippet leverages the wp_footer Wordpress hook and echoes markup (including style and a tiny script) just before the footer is rendered on the page.

Hope this helps you bang out quality Wordpress themes faster!

Code on web assassins!