Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

Trying to customize Twenty Elevent theme it would be super useful for me as a beginner to see which templates rendered which pages / parts of the pages. Is there a plugin or manual way to achieve that? The easiest thing that comes to mind would be to add HTML comments to each and every template file but maybe some plugin / procedure automates this task already?

share|improve this question
As in to tell the difference between what was done by header.php and index.php? – m0r7if3r Feb 19 '12 at 1:12
Yes, like from which file came the header (most probably header.php), where did sidebar come from etc. If I'm correct the "template" in Wordpress usually means only the single resulting file like page.php, single.php or 404.php but those files are usually composed from many more *.php files, e.g. Twenty Eleven has about 20 of them like content-page.php, tag.php and I'd like to visualize how those work together to build the resulting page. – Borek Feb 20 '12 at 10:44

4 Answers

up vote 2 down vote

Here is something i use when developing themes:

add_filter( 'template_include', 'store_template_file', 999 );
function store_template_file( $template ){
    $GLOBALS['current_theme_file'] = basename($template);
    return $template;
}

add_action('wp_footer','print_theme_file');
function print_theme_file(){
    if( !isset( $GLOBALS['current_theme_file'] ) || is_admin() )
        return;
    echo '<!-- Current theme file: ' .  $GLOBALS['current_theme_file'] . '-->';
}

Once you paste that in your theme's functions.php file it will print out an HTML comment at the footer with the theme file's name.

share|improve this answer
Usefull as well but am I correct that this will print out only the "target" template file and not how the page was constructed, i.e. where sidebar came from, where navigation came from etc.? – Borek Feb 19 '12 at 1:11
up vote 1 down vote

You can enable debugging and install the debug bar, it won't tell you which specific areas of a template are used , but there is a lot of useful data including which actual template page is being called.

In wp-config.php

define('WP_DEBUG', true);
define('SCRIPT_DEBUG', true); //scripts
define('SAVEQUERIES', true);  //SQL

http://wordpress.org/extend/plugins/debug-bar/

enter image description here

share|improve this answer
This is useful but if there's any way to display more in-depth information about how the page is composed from templates like header, footer, sidebar etc. it would great. – Borek Feb 19 '12 at 0:41
What you're asking for does not really relate to WordPress, you would need to install something like Xdebug and a proper IDE that can step through PHP code. – Wyck Feb 19 '12 at 4:21
I don't necessarily need to step through PHP code, it's just that when I look at e.g. index.php which the debug bar suggests is the template used for the current page, there are many more files involved, e.g. header.php, footer.php, maybe things like content-page.php? I don't know how to tell which files are cooperating on rendering the resulting page. I hope there is an easier way than using xdebug. – Borek Feb 20 '12 at 10:50
Looking at the Twenty Eleven files a bit more, it seems that some files are "templates", like they can appear in the "Query template" field of the Debug Bar like in the screenshot you posted (those are files like index.php, 404.php, archive.php etc.) and then some files are "template parts" - they provide pieces of HTML to the real templates. Examples of these files would be header.php, footer.php, comments.php etc. This distinctions is something I have observed, not read about, is it about right? Is this documented somewhere? – Borek Feb 20 '12 at 10:56
yes, there nothing that will tell you the specifics besides proper debugging or actual know-how, I suggest the latter by reading the codex, for example codex.wordpress.org/Function_Reference/get_template_part and codex.wordpress.org/Template_Hierarchy and codex.wordpress.org/Theme_Development , but every theme is different – Wyck Feb 20 '12 at 16:23
up vote 1 down vote

Have you tried using firebug?

Maybe also checkout: http://yoast.com/wordpress-theme-anatomy/

share|improve this answer
How will Firebug help me find out which server-side file rendered a part of a page? But the link seems useful, thanks. – Borek Feb 25 '12 at 12:03
up vote 0 down vote

This doesn't specifically answer your question... but... If you're jumping into theme / plugin development I'd highly recommend Digging Into WordPress by Chris Coyier & Jeff Starr. There's a really great chapter named "Understanding Theme Files" that breaks down and explains what these files are used for, and how to get the most out of best practices.

I don't have any affiliation with them, except that their book really jumpstarted my ability to build themes and plugins. It's one of those rare books that is super easy to follow as a beginner but also remains very useful as an experienced developer.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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