Vote for WordPress

Filed under: General Info by Maria on May 28, 2007     Print This Post

Are you a WordPress user? Do you like it as much as I do? If so, cast your vote for WordPress in the WebWare 100 poll.

Google Sitemap Article Now Online

Filed under: How-To Articles, Tips & Tricks, Useful Add-ons by Maria on May 26, 2007     Print This Post

Help Google index your WordPress site by setting up a sitemap.

My most recent article for Informit.com is now online: “Add A Google-Compatible Sitemap For Your WordPress Blog.” The article explains the steps you need to follow to set up a WordPress plugin that will automatically generate and update a Google-compatible sitemap. This can help Google index your site and improve your Google rankings.

Creating a Theme from Scratch: Planning the Theme Files

Filed under: How-To Articles by Maria on May 1, 2007     Print This Post

I now manage five different Web sites based on WordPress, each of which uses a different theme to display information. Although I’ve spent hours and hours modifying each theme to get just the right look for my sites, I’ve never actually developed my own theme from scratch.

One of the reasons for this is my lack of knowledge about CSS. I’ll admit it: I only know enough CSS to make me dangerous. But I want to learn. So I invested in a book called Beginning CSS Web Development: From Novice to Professional by Simon Collison. It seems to have the information I need to learn CSS from the ground up, rather than by experimenting with other people’s CSS. Because although I don’t know much CSS, I know enough to realize that other people’s CSS can be really sloppy and not the best to learn from.

I figured the best way to learn is to jump right in with a project. But rather than whip up a simple Web site with HTML, I figured I’d go all the way, by developing a brand new WordPress theme for a site I’m getting ready to launch later this month.

Talk about rolling up your sleeves!

I also figured that I’d kill another bird with this learn CSS stone by writing a series of articles explaining how I created the new theme. This is the first article in that series. I’ll release them, one a week, on my site as well as this site.

Now let’s get down to the first step: Planning the Theme Files.

Understanding the Files You Need

A WordPress theme is what gives a WordPress-based site or blog its overall appearance. WordPress comes with two themes and literally hundreds of others are available for free on Web sites all over the world. My site uses Exquisite by Kaushal Sheth. wpvqs.com uses Soft White by Sreejith. Miraz and I cover themes in a lot of detail in Chapter 6 and elsewhere in our book, so I won’t repeat that stuff here. You can learn more on the WordPress Codex’s “Using Themes” page.

A theme is made up of a CSS file and one or more PHP files. The CSS file, as you might expect, includes style information that is referenced by the PHP files. The PHP files — which are commonly referred to as template files — include HTML, PHP, and WordPress template tags to display the contents of the MySQL database in which your WordPress data resides.

Each theme consists of at least two files: index.php and style.css. But most themes have a lot more files than that. (In fact, there’s no real limit to the number of template files that can be included in a theme.) These files are included in the theme’s directory, which can be found within the themes folder in your sites wp-content folder.

WordPress supports a number of predefined template files. The file that is used to display data depends on the type of query used to display the data. For example, a visitor going to your blog’s Home page would see the home.php file (if it existed) or the index.php file (if home.php did not exist). A visitor who clicked a category link would see the category.php file (if it existed) or the archive.php file (if category.php did not exist and archive.php did) or the index.php file (if neither the category.php file nor the archive.php file existed).

These example illustrate the template file hierarchy, or the order in which WordPress prefers template files. You can learn more about that on the WordPress Codex’s “Template Hierarchy” page, which is required reading for anyone interested in creating a theme from scratch. (Go read it now. I’ll wait.)

Another really good source of information about what’s required in a theme is the “Theme Development” page. (You should probably take a break from me to read that, too. I have to go get my chicken soup out of the microwave now, anyway.)

[You know, there’s nothing quite as good as homemade chicken soup when you’re fighting off a cold. My husband makes the best.]

Back? That was quick. Okay, let’s get on with it.

Template files can call other template files to display information. This makes it possible to have modular pages. For example, instead of putting the same header information in every template file, you can include it in a header.php file and then call that file at the beginning of index.php, category.php, archive.php, or any other template file used to display a page. This modular approach makes it easy to modify components of your site; a change in one file can change multiple pages. The WordPress Codex’s “Stepping into Templates” page does a great job explaining how this works.

Make Your File List

After reading all this documentation — you have been reading, haven’t you? — you should have a good idea of the files you might want to include in your theme. Here’s my list:

• style.css is the required CSS file.
• index.php is the required template file. I’ll use it to display the Home page.
• header.php is the header template file. It will include all the information that appears in a WordPress header, including some navigation features.
• sidebar.php is the sidebar template file. Like most WordPress sites, my site will have a sidebar. At this point, I’m thinking it might have two sidebars, but I’ll cross that bridge when I get to it.
• footer.php is the footer template file. It will include all the information that normally appears in a WordPress page footer.
• single.php will display single-post pages.
• category.php will display category pages.
• archive.php will display other archive pages, including date and author archives.
• comments.php is the comments template file. It will display comments and the comment form.
• search.php will display search results.
• page.php will display WordPress Pages. This is not to be confused with Web site pages; these are Pages using WordPress’s Page feature.
• 404.php will appear if a visitor attempts to view a page that does not exist.

I also plan to have a post.php template. This is something I learned from a theme created by someone else that I use on one of my sites. In the spirit of modular construction, the post.php file will contain The Loop and will be called by the other template files that need to display posts.

Creating the Test Site

If you haven’t already done so, you’ll need to create a WordPress blog on which you can test the theme as you build it. For best results, this should not be a site that’s currently online and accessed by site visitors.

If you’re a WordPress user, you shouldn’t need any help setting up a WordPress blog on a server. But if you do, you’ll find instructions in Chapter 1 of our WordPress book. (Hey, I got hosting bills to pay.) You can also find instructions where you download the latest version of WordPress.

Oh, and while we’re mentioning versions, I’d just like to note that I’ll be using WordPress 2.1.3 (or later) throughout this series.

Next Article

The next article in this series will cover creating the CSS file. Don’t expect me to teach you CSS — I won’t. But I will tell you about the components you’ll need to make the CSS file work with WordPress.

Now let me learn this CSS stuff so I don’t sound like an idiot in the next piece.