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.
At the end of the template file, put a comment to mark the ending of the code within that template file.
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
<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.