How to debug a WordPress theme

March 22, 2017 - Categories: WordPress tutorials

Written by: MagicPress

In WordPress theme development, or when editing an existing theme, it is often handy to know which template is used to display the current page. It is very easy to display the template within the page, by adding a small piece of code in your theme’s functions.php file. In this example, we will edit the functions.php file of a site using the Hellomouse theme.

The current template is stored in the $template variable. Let’s create a function which loads and displays that variable.

function show_template() {
    global $template;
    print_r($template);
}

The vast majority of WordPress themes include the wp_head action hook, so in most cases we can safely call our function there. Let’s add the following right after our function:

add_action('wp_head', 'show_template');

There!

You may want to style this so it is legible and doesn’t break the document flow. Let’s include it in a properly styled fixed div.

function show_template() {
    global $template;
    echo '<div style="position: fixed; bottom: 10px; left: 10px; background-color: rgba(0,0,0,0.5); padding: 10px; z-index: 99999999; color: #fff;">';
    print_r($template);
    echo '</div>';
}
add_action('wp_head', 'show_template');

Much better. The problem is that everyone visiting the website will be able to see the current template path, so let’s limit its visibility.
Often, it is the administrator of the site that will make changes to the theme template files, so let’s call the function conditionally.

if( current_user_can( 'administrator' ) ) {
    function show_template() {
        global $template;
        echo '<div style="position: fixed; bottom: 10px; left: 10px; background-color: rgba(0,0,0,0.5); padding: 10px; z-index: 99999999; color: #fff;">';
        print_r($template);
        echo '</div>';
    }
    add_action('wp_head', 'show_template');
}

Indeed, non-logged in users will view the site properly:

but the logged in administrator will be able to see the following:

We can take this one step further and also display all the files included by this template, using the following piece of code:

if( current_user_can( 'administrator' ) ) {
    function show_template() {
        global $template;
        echo '<div style="position: fixed; bottom: 10px; left: 10px; background-color: rgba(0,0,0,0.5); padding: 10px; z-index: 99999999; color: #fff;">';
        print_r($template);
        echo '</div>';
        echo '<pre><ol>';
        $files = get_included_files();
        foreach ($files as $key => $path) {
            if(strstr($path, ABSPATH.'wp-content/themes/')){
                echo '<li>'.str_replace(ABSPATH.'wp-content/themes/','', $path).'</pre>';
            }
        }
        echo '</ol></pre>';
        echo '</div>';
    }
    add_action('wp_head', 'show_template');
}

Managed WordPress Hosting

Never depend on a single server again. Trust a cloud of servers specifically configured to serve WordPress. Minimum response time, top level security and 100% uptime for your website guaranteed.

LEARN MORE

Build your WordPress site in no time

You do not need any coding skills. In 3 easy steps your website is up and running. All that's missing is your content.

LEARN MORE