My First WordPress Theme – Part 2

Click on image for larger view (1024 x 768)

Above is the outcome of going through a WordPress tutorial at the WPDesigner blog by Small Potato.

Here are the final files that were created and are standard to a WordPress theme. These files provide a standard basis for all WordPress themes. You don’t have to organize your files this way, but it is a standard that makes it easy to follow when creating and studying the code that goes into a WordPress theme.

First a quick list of files and then a bit of a break down on each.

1. style.css – A Cascading Style Sheet controls the way your blog looks consistently through out the various sections of a blog. For example, if you want all the names of each section in the right sidebar to look the same, you would do that in the style.css file. Cascading Style Sheets have been around for a while now and they help you control many aspects of a website or blog in one area – the style.css file. You can read all about cascading style sheets here and go through a tutorial here. Check out Smashing Magazine’s CSS section here for tons of articles, ideas and design.
2. index.php – contains all the posts in your blog including the title of your post and a section called the postmetadata, which is below the main post.
3. header.php – is just what it says, the title of your blog and the description and any customizations can go in the header.php file.
4. sidebar.php – contains the standard search box, archives list, categories of post, calendar, etc.
5. footer.php – contains any information you add to the footer – copyright notice, blog author, etc.
6. single.php – displays a single blog post.
7. comments.php – the comments template where the comments are listed and readers enter comments.
8. page.php – in blogs you can have pages that are typically static information like an About page.
9. archives.php – this allow you to provide a way for your blog readers to look at archives of your blog.
   
10. searchform.php – a search form is the box and search button that provides blog readers to search through your blog.
11. search.php – displays the blog post results of a search, from the searchform.
    
12. functions.php – like its name, this file can contain functions to perform what you need to, like display widgets in a widgetized blog or special print instructions.

Here are some notes and pointers learned from the tutorial:

1. What is the difference between id and class? For every invisible box or DIV, use id to name it. Id is unique and class isn’t. For example, you only have one id=”header” and there’s only one id=”container”, but there are multiple class=”entry”.
2. Can header and container be classes instead of ids? Sure. Keep this in mind – you cannot repeat any id. For example, you can’t have two id=”header” on the same page. When you want to reuse something over and over again like the post entries, use class.
3. The names for classes and IDs can be anything you want them to be. You can name them after… your favorite foods, but post and entry are short, simple, and easier to remember. And standard.
4. Why add another DIV to wrap the post title and post entry? You added the div class=”entry” to separate the post title from the post entry. The div class=”post” is for separating one post from another.
5. Each post now has a number or post ID attached to it. the_ID() simply calls for the id of each post, that’s it. Why use it? It’s for customizing the look of posts, individually. When you use the style.css file to tell your theme how the posts will look like, every post will look the same. With a unique ID attached to each post, you can target a single post and make it look different from the rest of the posts. Without the IDs, you have no way of differentiating the posts within the style.css file.
6. How can you assign both class and id to the same DIV (invisible box)? DIV is a tag, class is an attribute. id is an attribute. Each tag can have multiple attributes just like each DIV can have both class and id. Note: id is an xhtml attribute. the_ID() is a PHP function. They’re different.
7. Adding descriptions to your links is also useful when other sites have to scan your blog. Technorati for example, each time you publish, WordPress notifies Technorati and other sites that your blog has been updated. Technorati then comes to your blog, scans it, and indexes a summary of your post, which includes the link title description.
8. Validate your code with XHTML Validator and CSS Validator. This is tough because most of the top blogs don’t validate to perfect XHTML. I’ve seen static websites validate better than blogs. Please prove me wrong. 🙂
9. Test your CSS in multiple browsers – Safari, Opera, Firefox, Internet Explorer.
10. In CSS, specifically in style.css, the pound sign (#) is how you address a DIV with an id. The period is how you address a DIV with a class. For a class example, if your codes were <div class=”wrapper”> then use .wrapper instead of #wrapper to address the wrapper DIV.
11. Screen resolution 1024 x 768 has become more popular than 800 x 600 according to the statistics at W3Schools and my own traffic statistics. Now I also know, “Statistics are like bikinis, they reveal a lot but hide the vital spots.”
12. margin: 0 auto 0 auto; means (in exact order) 0 top margin, auto right margin, 0 bottom margin, and left auto margin. For now, just remember that setting right and left margins to auto is centering.
13. What’s the difference between the Header and Footer stylings? The answer is the presence of clear: both; in footer{}. It’s there to make sure the Footer doesn’t attach itself to anything above it, like the Sidebar or Container.
14. This is just in case you’re getting a 20px margin instead of a 10px margin. 20px margin would break your layout and push the sidebar to the bottom of the page because a 20px margin makes the sum of the Container and Sidebar widths equal 760px instead of 750px. This extra step is Internet Explorer’s fault because the bug of doubling the set margin doesn’t exist in Firefox. To fix this bug, add display: inline; to the Sidebar.
15. When all your values are the same you can use one number like margin: 0; instead of margin: 0 0 0 0;.
16. Style Inheritance – a certain style that inherits from another style attribute or class.

That’s it for this part of my first WordPress theme. Now that I’m through the tutorial I’m ready to start customizing the theme I’m working. If you’re interested in learning how to create a WordPress theme or just want to know what goes into a theme, check out the tutorial at Small Potato’s WPDesigner blog.

More to come…