Display an image of selected template in admin to aid user when using complex templates

Preliminary Tasks

  1. Create a directory within your theme to contain your layout thumbs.
  2. Add layout thumbs to reflect the file names of your template. The following script uses the format tpl-homepage.php. The image would be named homepage.jpg.

Please note, the following is a proof-of-concept.

Approach 1: Only JavaScript

Load the following only for post.php and post-new.php

add_action('admin_head-post.php', 'template_thumbs');
add_action('admin_head-post-new.php', 'template_thumbs');

function template_thumbs(){
    global $post;
    if($post->post_type != 'page')
        return;

    $js = "
        <script type="text/javascript">
            jQuery(document).ready(function($){
                //Define the page template select drop-down
                var _template = $('#page-template');

                #Get the thumb on page load
                if(_template.val())
                    get_template_thumb(_template.val());


                //Sniff template changes
                _template.change(function(){
                    //Get template file name
                    var _file = $(this).val();
                    if(_file)
                        get_template_thumb(_file);
                });
            });

            function get_template_thumb(file){

                //Define the path to your thumbs directory
                var _thumb_path="/wp-content/themes/your-theme/img/layouts/";

                //Format thumb filename
                file.replace('tpl-', '');
                file.replace('.php', '');
                file = _thumb_path + file + '.jpg';

                //Remove previous thumbnail
                $('.template-thumb').remove();

                //Insert thumbnail before the select box
                $(this).before('<img class=\'template-thumb\' src=\' + file + '\' alt=\'Layout\'>');

            }
        </script>
    ";
    echo $js;
}

Approach 2: AJAX + PHP

If this approach doesn’t work for you, I would fire off a XHR and retrieve a thumbnail.

add_action('admin_head-post.php', 'template_thumbs_script');
add_action('admin_head-post-new.php', 'template_thumbs_script');

function template_thumbs_script(){
    global $post;
    if($post->post_type != 'page')
        return;

    $js = "
        <script type="text/javascript">
            jQuery(document).ready(function($){

                //Sniff template changes
                $('#page-template').change(function(){

                    //Set $_POST data
                    var data = {
                        action: 'get_template_thumb',
                        template: $(this).val()
                    };

                    //Send XHR
                    $.post(ajaxurl, data, function(response) {
                        if(response){

                            //remove previous thumb
                            $('.template-thumb').remove();

                            //Insert thumb before select drop-down
                            $('#page-template').before(response);
                        }
                    });
                });
            });
        </script>
    ";
    echo $js;
}


add_action('wp_ajax_get_template_thumb', 'get_template_thumb');
function get_template_thumb(){
    #Verify Nonce

    #Get template name
    $template = esc_attr($_POST['template']);

    #Format image name
    $img_file = str_replace('tpl-', '', $template);
    $img_file = str_replace('.php', '', $template);

    #Assuming this is in functions.php theme root. If not, make absolute path
    $thumb_path="img/layouts/";

    #Check if file exists first
    if(file_exists($thumb_path.$img_file.'.jpg'))

        #Return an image tag
        echo "<img class="template-thumb" src="https://wordpress.stackexchange.com/questions/62011/$img_file.jpg" alt="Template Layout">";

    exit;
}