Theme File Languages

WordPress is a system that allows you to focus on writing content, instead of managing your web pages. It uses themessets of template files written in XHTML and PHPto work with the posts you write to make them available to visitors as Web pages and RSS feeds. Cascading style sheets (CSS) provide display information for formatting and layout. If you intend to modify or create themes, you need to understand at least a little about what these things are and how they interact.

The Default theme for WordPress contains approximately 20 items: PHP files, a preview screenshot, a Cascading Style Sheet, and a folder containing images and another PHP file. Other themes may have fewer or more files.

Some themes may offer more features than the Default theme, such as components for Google's Adsense or photo sharing, while others may offer fewer features, perhaps omitting the sidebar, footer, or other files.

MySQL

Your posts and related information are stored in a MySQL database. The database also stores links, if you enter them, user information, page content, and WordPress settings.

When visitors access a page of your blog or your blog's RSS feed, the database provides the correct content. Although the database is effectively invisible it is fundamental to your WordPress blog.

XHTML

WordPress uses XHTML (eXtensible HyperText Markup Language), the currently recommended version of HTML (HyperText Markup Language). If you intend to edit any of the HTML in your WordPress theme you should be familiar with the rules of XHTML.

HTML is a static language that provides structure to a web page. HTML cannot interact with the MySQL database. This means that you can set up a page in HTML and give it headings and lists and so forth, but you can't use HTML to call up specific information on demand from the database.

You can identify the HTML portions of a page by the angle brackets around the code, for example:

<h2 >Not Found</h2>

Tips

• Tags and attributes must be lower case: <div >

• All tags must be closed: <p>My paragraph.</p>

• Close image tags, breaks and other empty tags with a space and slash within the opening tag: <br />

• Tags must be correctly nested: <p>My <em>emphasis</em>.</p>

• Attributes must have a value <input type="submit" />

• Values must be quoted: <img src="/books/2/586/1/html/2/test.jpg" alt="Test. " />

• Validate your code as it must be correct.

• If you're looking for a good guide to XHTML, check out Liz Castro's HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide.

PHP

WordPress uses PHP to create template tagsspecial commands that WordPress uses to find and retrieve data from the MySQL database. These PHP template tags work with a template's HTML to assemble and display blog pages.

You can identify the PHP portions of a page by the angle brackets and question marks that enclose them. For example:

<?php get_header(); ?>. Note the space after <?php and before ?>.

Some sections of PHP may contain several lines that are spread throughout a template and intermingled with HTML. Code 1 shows an example from the index.php file; the PHP code is black while the HTML is gray.

Code 1. PHP and HTML in the index.php file

<?php if (have_posts()) : ?>  <?php while (have_posts()) : the_post(); ?>    <div  >      <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to      <?php the_title(); ?>"><?php the_title(); ?></a></h2>      <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>      <div >        <?php the_content('Read the rest of this entry &raquo;'); ?>      </div>      <p >Posted in <?php the_category(', ') ?> |      <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments      &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>    </div>  <?php endwhile; ?>  <div >    <div ><?php next_posts_link('&laquo; Previous Entries') ?></div>    <div ><?php previous_posts_link('Next Entries &raquo;') ?></div>  </div> <?php else : ?>  <h2 >Not Found</h2>  <p >Sorry, but you are looking for something that isn't here.</p>  <?php include (TEMPLATEPATH . "/searchform.php"); ?> <?php endif; ?>

You don't need to know how to write or edit PHP to modify a theme, but you do need to be able to recognize which parts of a template file you should leave intact. If you "break" the PHPin other words, introduce errors into the codeyou'll see an error message like the one in Figure 7 when you view your blog.

Figure 7. If you "break" the PHP code in a template file, an error message will appear in your blog.

Although some theme modifications in this chapter rely on editing the PHP, if you follow the instructions carefully and make sure you have working backups, you shouldn't get into trouble, even if you don't know any PHP.

Tips

• If you want to learn more about PHP, check out Larry Ullman's PHP for the World Wide Web: Visual QuickStart Guide.

• You can find a complete list of WordPress 2 template tags in the WordPress Codex, codex.wordpress.org/Template_Tags.

CSS

The structure of a page comes from the HTML, the content is drawn together by PHP from the MySQL database. CSS gives the whole thing shape, form, and color.

WordPress themes make extensive use of CSS to create complex layouts, many of which include multicolumn text, graphical elements, and other design features. In most well-designed themes, CSS determines the size, font, and color of text; the layout of the page's header, body, sidebar, and footer; and the positioning of graphic elements with or beneath text.

To modify or create your own look and feel for your blog, you'll need some understanding of CSS.

Tip

• If you're looking for a good guide to CSS, check out Liz Castro's HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide.