Examining a Themes Components

A theme consists of two or more files. At the very least, it requires a CSS style sheet named style.css and a PHP template named index.php. The style sheet must contain a specially formatted comment at the beginning of the file. This comment identifies meta-information about the theme, such as a name and description for the theme, version number, URL for the theme, and so on. Figure 16-6 shows this comment for the WordPress Default theme.

The PHP file contains the HTML and WordPress tags to display your content. This file contains what WordPress calls The Loop, which is a fairly short but important piece of PHP code that is the heart of your blog page. This code displays the title and contents of your blog posts, as well as information related to it. It also displays a count of the comments a post has and a link to the comments themselves.

All the rest of the information displayed on a typical blog page—the blog title, links in a sidebar, archive links, and so on—is peripheral to The Loop. Most of this other information is displayed by calls to template tags.

Theme Name: WordPress Default Theme URI: http://wordpress.org/

Description: The default WordPress theme based on the famous href="http://binarybonsai.com/kubrick/">Kubrick</a> Version: 1.5

Author: Michael Heilemann

Author URI: http://binarybonsai.com/

Kubrick vl.5 http://binarybonsai.com/kubrick/

This theme was designed and built by Michael Heilemann, whose blog you will find at http://binarybonsai.com/

The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl- license.php

All CSS that involves the use of images, can be found in the 'index.php1 file. This is to ease installation inside subdirectories of a server.

Have fun, and don't be afraid to contact me if you have guestions.

Figure 16-6. Stylesheet meta-information

Template tags are small pieces of PHP code (typically one line of code) placed in your template. These tags do a variety of work. Here are just a few examples of what template tags can do:

• List the categories in your blog. This list includes links to make your blog display all the posts in each particular category.

• List your archives by month, by week, or individually.

• Create a calendar on your page, complete with links to stories for each day and links to move the visitor backwards and forwards through the history of your blog postings.

• Change the title of your web page based on the current story or current category.

All these template tags produce XHTML, not colors, borders, or columns. In other words, the tags make the real content of your blog, marked up semantically, with meaning. The CSS applies the look to this page, adding the colors, positioning different elements into columns, and so on. This allows you to deliver the content in a number of ways without changing the content itself.

Tip As an example of the variety of ways you can deliver the same content in very, very different ways, pay a visit to the CSS Zen Garden (http://csszengarden.com). This is a site put together to demonstrate the design capabilities of CSS. The site has hundreds of different themes in a vast range of styles from simple, business-like designs, to eastern-flavored works of art, through punk-styled graffiti-like pieces. But every single version of the site uses exactly the same HTML content!

WordPress goes further than many theming and skinning systems. It can automatically use special template files in appropriate circumstances if it finds them. For example, if you are displaying a single post and the file single.php exists in your current theme directory, WordPress will use that template. This allows you to present single posts with a different layout. Similarly, a file called page.php will be used to display pages. For example, you might decide to use the full width of the browser for your in-depth pages with more content and not display the sidebar.

In this section, I will take you through some adjustments to a theme. You will see how to remove elements you don't want and add extra information you do want. You will also learn how to adjust the CSS to make things appear differently, without needing to change the HTML generated from the template.

Was this article helpful?

0 0

Post a comment