WordPress Template Files and Style Sheets – Give Them a Name

I love the modular template files in WordPress. The ability to mix and match the building blocks to create custom web pages is great. The problem comes when working on the style sheet for the different looks. I often have to track down which style belongs to which template file.

Solution? Give them a name?

Naming WordPress Template Files

That’s right. Label your WordPress template files.

Trying to track down which CSS div and HTML tag started and ended in which template file can be a nightmare, especially if you are using 2 different headers and 3 different sidebars and so on. So name them.

Open each template file in a text editor. At the very top, labeled it with a comment that identifies it.

<!--header begins-->

At the end of the template file, put a comment to mark the ending of the code within that template file.

<!--header ends-->

Like did, you may create custom template files for the different categories, sidebars and headers. Again, name those template files. You can call them by their function (show header 2 when viewing category 13) or keep it even more simple by labeling them by number.

<!-- single 1 -->
<!-- header 2 -->
<!-- header 3 -->

When the page view is generated, you can look at the source code and track which template is being used. If you header2 to be used when viewing category 13, and when you look at the source code it says header1, something isn’t working in the query. Labeling the template files makes it easy to track down what is and isn’t working.

Label Your CSS and HTML Containers

Did you know that many HTML tags and CSS containers start in the header but don’t close until the reach the footer template tag? The obvious tags like <body> and <html> typically start in the header and end in the footer, but in some WordPress Themes, the various page styling containers start in one place and end in another and it’s tough to keep track of which one is which, and where they start and end, and then figure out which one is not closed or has gone missing totally.

So label your CSS divisions to help track where they begin and where they end. It will make the testing process much easier.

<div id="page"><!-- page begins -->
...
<div id="content"><!-- content begins -->
....
</div><!-- content ends -->
</div><!-- page ends -->

The simple act of labeling your template files and containers, the easier troubleshooting your WordPress Theme will be. Take a few minutes to do this now, and it will help you as you tweak your Theme to your needs.

7 Comments

Vitor M. Costa

Posted August 25, 2005 at 10:28 am | Permalink

Hi Lorelle! really nice to read your articles.

I have a question, if you can help, i really appreciate it, i’ve searched for this info but nothing…

will the version 1.6 have a new administration panel design?

i have read of Shuttle Project a few times, from brokenkode.com will this design be implemented in this release?

Thanks, Cheers

Lorelle VanFossen

Posted August 25, 2005 at 2:54 pm | Permalink

I’m not one of the developers, just one of the testers. Yes, WordPress 1.6 has a new interface, as discussed in another post, I’m not sure if the admin design you are talking about is the same. Here is a view of it as of June, which looks fancier as a screencast. 😉

jidanni

Posted February 11, 2009 at 6:08 pm | Permalink

I just stick the one size fits all
(!-- The following output was made by template (?php echo basename(__FILE__); ?> -->
in all my templates. The point is PHP will automatically convert __FILE__, so I don’t have to type it in.

Now in my browser clicking ‘view HTML source’ I will see
(!-- The following output was made by template happy.php -->
(!-- The following output was made by template groovy.php -->
etc. (Change “(” to angle bracket.)
I hope this also explains my 2005/09/18/wordpress-tips-and-tricks-for-template-files comments.

jidanni

Posted February 11, 2009 at 6:28 pm | Permalink

(It is so hard to type any code into these comment boxes without it
all going into a black hole. The minute any angle bracket is detected,
all the comment goes into the dumpster. I feel just like you in your
article where you hit backspace and all was lost. OK, trying again…
What I’m trying to say here, and in
2005/09/18/wordpress-tips-and-tricks-for-template-files comments is:)

At the top of this article, note the word “header” of “header begins”
and “header ends”,

If you replace that word with

(?php echo basename(__FILE__); ?)

PHP will insert the name of the file (“header” in this case) for you,
without one needing to type it in.

That way one can just paste the same HTML comment line at the top and
bottom of each file, and have PHP do the work of telling you what file
it was in!

It might look a little longer than the original, but it saves some
work!

I hope my tip helps somebody. Note the outer parentheses need to be
changed to angle brackets.

- Lorelle VanFossen
  
  Posted February 12, 2009 at 12:20 am | Permalink
  
  So you are not asking a question but trying to give an answer to something that isn’t being asked in this article, and still struggling to understand how to post code in comments. Thanks for the hard work to make your point, though I’m still not sure why.
  
  To include files within a WordPress Theme, you simply use the PHP include. If you want to comment within a template file so the words do not appear for the reader to see but leave a comment to explain instructions or guides, then you use the PHP comment function, which allows you to leave notes like “this is the header file – it goes here.” While the feature you mention allows people to put the name of the file in a comment, that only serves one purpose, which can be done manually, with less work. If there are dozens of files within a Theme, this is a handy bit of code, but few WordPress Themes have more than a dozen files.
  
  Thanks for the tip, though, and the hard work.
  
jidanni

Posted February 11, 2009 at 6:29 pm | Permalink

(Oh, I see, it wasn’t that hard to get the comment in. I just didn’t refresh my WWWOFFLE + emacs-w3m browser.)

jidanni

Posted February 12, 2009 at 7:46 pm | Permalink

OK, thanks.

By the way, regarding using “the PHP comment function” you mentioned,
all I was able to find was e.g.,

$dom = new DOMDocument();
$comment = $dom->appendChild(new DOMComment(
‘This is the ‘. basename(__FILE__). ‘ file – it goes here.’));
echo $dom->saveHTML();

which will make

(!–This is the bla.php file – it goes here.–>