WordPress themes and templates

last update : April 3, 2012
A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. Some templates (the header.php and footer.php template files for example) are used on all the web pages, while others are used only under specific conditions.

A simple WordPress web page structure is made up of three basic building blocks: a header, the content, and a footer. The main template file is index.php, it’s function is to call other template files and to gather information from the database (posts, pages, categories, etc.) with the WordPress Loop. Most WordPress pages contain one or more sidebars (sidebar.php) that contains navigation features and more information about the website.

The Theme’s style sheet determines the look and placement of the header, footer, sidebar, and content in the user’s browser screen.

WordPress features two core page views: the single post view is used when the web pages displays a single post. The multi-post view lists multiple posts or post summaries, and applies to category archives, date archives, author archives, and (usually) the “normal” view of the blog’s home page. WordPress uses a template hierarchy to select the right template file to display a certain type of page. Template files include the use of XHTML tags and CSS references. HTML elements and CSS references can cross template files, beginning in one and ending in another. Tracking down where an HTML element begins and ends can get complicated if a Theme is designed or modified.

A very simple, but fully functional loop page (index.php) is shown below:

<?php
get_header();
if (have_posts()) :
   while (have_posts()) :
      the_post();
      the_content();
   endwhile;
endif;
get_sidebar();
get_footer();
?>

Template tags are used within the blog to display information dynamically or to customize the blog. It provides the tools to make the blog individual and interesting. The template tags are segmented as follows :

  • include tags
  • blog info tags
  • lists & dropdown tags
  • login/logout tags
  • post tags
  • comment tags
  • date and time tags
  • category tags
  • author tags
  • tag tags
  • edit link tags
  • permalink tags (a URL at which a resource or article will be permanently stored)
  • links manager tags
  • trackback tags
  • general tags
  • geo tags

The the_content() template tag displays the content of the post. The post meta data is the “administrative” information provided to viewers about each post. An archive is a collection of historical posts. In the default usage, the posts displayed on the main index are recent chronological postings. By default, the archive will use index.php, and thus look the same as the front page. A special archive.php file can be used to visually disambiguate archives from the front page. The same is true for category views. It is even possible to create separate category template files for each category.

To cut down the size of a page,  excerpts (a condensed description of a blog post) rather than the entire content of a post or the <!–more–> tag can be used. With the static front page it’s possible to display something special only on the front page of the blog. The list of the typical WordPress pages are listed herafter :

  • home page
  • single post
  • page
  • category
  • tage
  • author
  • date
  • search result
  • 404 (not found)
  • attachment

To style a blog for print, it’s best to use a print.css sytle sheet file. To integrate code in a wordpress page, refer to the following guidelines. Here is a checklist to verify the proper setup of a new theme. Informations about WordPress widgets are available at the widgets website.

The WordPress default theme based on Kubrick contains two stylesheets. The file rtl.css is called when you are using a language localization that reads from right to left (e.g., Arabic or Hebrew). The file style.css is separated in segments:

  • Typography & Colors
  • Structure
  • Headers
  • Images
  • Lists
  • Form Elements
  • Comments
  • Sidebar
  • Calendar
  • Various Tags & Classes
  • Captions

The most recent default Worpdpress theme is Twenty Eleven, version 1.3.