It seems that I have not explained myself very well...

I am simply trying to add an image to the page attributes area of the admin area depending on what template is selected, here is a simple mockup of what I wish to achieve: Dropbox Image Link.


I am looking to add the ability for my clients to see an outline or wireframe (an image) of the currently selected template while editing a page within the Wordpress admin area.

A massive bonus would be for the clients to be able to actually select the template by viewing and subsequently clicking on images of available template/content layouts.

However I could be over-complicating the situation of course. Because I am using Wordpress more as a content management system with some fairly unique and/or complex content layouts (such as grid heavy layouts with multiple columns and content areas) I simply want to give the user as much indication of what field is for what without writing long/complex names for each content block, column or grid position.

If it matters, I am using the add-on's Advanced custom fields (with all purchasable extras such as repeater field) and Multiple content blocks.

The areas defined within the template are not necessarily always for the same content so simply naming each field/block "area for meet the team profile", "put intro paragraph here" soon becomes irrelevant and more confusing.

I hope that I have provided enough information.

  • Are you talking about selecting a page template within the pages post type? Aug 16, 2012 at 22:49
  • @BrianFegter - Thank you for the reply. I mean adding an image, depending on the template selected, in the page attributes area, here is a quick mockup of my intention/desire link (Public DropBox Link). Aug 17, 2012 at 8:19
  • Interesting concept. Just posted an answer. Aug 17, 2012 at 10:05

1 Answer 1


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')

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

                #Get the thumb on page load

                //Sniff template changes
                    //Get template file name
                    var _file = $(this).val();

            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

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

    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')

    $js = "
        <script type='text/javascript'>

                //Sniff template changes

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

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

                            //remove previous thumb

                            //Insert thumb before select drop-down
    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

        #Return an image tag
        echo "<img class='template-thumb' src='$img_file.jpg' alt='Template Layout'>";

  • Wow, thank you for taking the time to put that together. I will have some time later to play with this and I will post my findings. I cannot up-vote your answer because I have too little reputation. I will do so when I can. Thank you for your time so far. Aug 17, 2012 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.