Now uses wp_footer hook.

Dev Template Name 2

HTML ------

	NONE
	
HTML ------



PHP functions.php ------

    function dev_template_name() {

        global $template;
        $template_array = explode('/',$template);

        echo '<span class="dev-template-name">

                Local or Live<br />';
                echo 'Template: '.end($template_array).'<br />';
                echo 'User ID: '.get_the_ID().'<br />'.
                'DN: '.DB_NAME.'<br />'.
                'DH: '.DB_HOST.'<br />
                Width: <span class="dev-page-width"></span>px<br />
                Height: <span class="dev-page-height"></span>px<br />';

                if ( is_user_logged_in() ) {
                    
                    echo 'User: logged IN - ';
                    global $current_user;
                    $user = wp_get_current_user();
                    echo $user->display_name."<br />";
                    
                    echo 'User: Member - ';
                    $user_meta = get_userdata( $user->ID );
                    echo implode(', ', $user_meta->roles);
                
                } else {
                    echo 'User: logged OUT';
                }
                    
        echo '</span>';

    }
    add_action( 'wp_footer', 'dev_template_name', 100 );

PHP functions.php ------



CSS ------

.dev-template-name {position:fixed;bottom:10px;left:10px;background: rgba(255,0,0,0.6);color:#fff;padding:2px 4px;font-size:0.8em;z-index: 100;/*display: none;*/}

CSS ------





jQuery ------

    // Scripts
    var width   = viewportSize.getWidth();
    var height  = viewportSize.getHeight();
    displayWidth();


    $( window ).resize(function() {
        width = viewportSize.getWidth();
        height = viewportSize.getHeight();
        displayWidth();
    });


    function displayWidth() {
        $('.dev-page-width').text(width);
        $('.dev-page-height').text(height);
    }
		// Scripts
		
		// Plugin
    /*
    Finds the viewport width
    http://matanich.com/test/viewport-width/
    */
    (function(n){n.viewportSize={},n.viewportSize.getHeight=function(){return t("Height")},n.viewportSize.getWidth=function(){return t("Width")};var t=function(t){var f,o=t.toLowerCase(),e=n.document,i=e.documentElement,r,u;return n["inner"+t]===undefined?f=i["client"+t]:n["inner"+t]!=i["client"+t]?(r=e.createElement("body"),r.id="vpw-test-b",r.style.cssText="overflow:scroll",u=e.createElement("div"),u.id="vpw-test-d",u.style.cssText="position:absolute;top:-1000px",u.innerHTML="<style>@media("+o+":"+i["client"+t]+"px){body#vpw-test-b div#vpw-test-d{"+o+":7px!important}}<\/style>",r.appendChild(u),i.insertBefore(r,e.head),f=u["offset"+t]==7?i["client"+t]:n["inner"+t],i.removeChild(r)):f=n["inner"+t],f}})(this);
		// Plugin
		
jQuery ------