Visualizing the Default WordPress Theme
After so very many descriptions of how to create WordPress themes–and after having creating a bunch of them–I decided to try to really try to understand how WordPress templates actually work. The greatest frustration for me, was that when designing a new theme, and formatting it with CSS codes, I realized that it was extremely difficult to determine which elements, classes, and id’s were responsible for which formatting.
References to the articles read are below. There were two key points that I had heretofore, through “messing around,” not been aware of:
- You can make an entire theme just by including a style.css file, and optionally, an images subdirectory. You need to tell WordPress which theme you want your theme to piggyback off of, by refering to the directory name of that theme. The syntax (within the CSS comment at the top of the style.css file) is: Template: theme-directory-name.
- It is highly recommended that one become familiar with the logic and structure of the default theme (Kubrik), as it has been thoroughly code-tested, and should conform to the best of the WordPress standards.
On the first note, I decided to create a style.css file piggybacking off of the default theme. At first, it just looked like this:
/*
Theme Name: CSS-Only Base Theme
Template: default
*/
It was interesting to go into the Presentation tab, and load that theme up. It was just a plain, raw HTML page, with almost no formatting at all. Then, I proceeded to style it based on my expectations. I was able to make a very attractive, simple theme. But what I also found was, I was having a very hard time understanding which elements, div’s, and id’s were wrapping which areas. Therefore, I created a file specifically to indicate this, based on all of the div’s and id’s in the default template. The file also indicates where the included modules (footer.php, header.php, and sidebar.php) begin and end. Here is the file:
I discovered that, using this visual guide, I was much more able to see what I was doing, and construct a clean and useful theme. And I also discovered, happily, that the structure of the default template is really quite simple. Using this visual guide, as well as basing my theme designs as much as possible off of the default template, I will be able to minimize the changes I need to make in the code. Where necessary, it will be better to comment out a piece of the template (or often, just to turn off its display using CSS). This approach allows me to make almost all the changes I need to in the CSS, rather than mess with the PHP files.
References (from the WordPress Codex site):
